Tangerine Development

Touch or move your mouse around the gallery if you would like to be creeped out. For fullscreen view, click here.

About the Art

I got all of the paintings from The Met's Open Access art collection. When I first published this little game, I was remiss in not listing the portraits. So, clockwise from the left:

1. Elijah Boardman - pained by Ralph Earl in 1789. Elijah is a dry-goods merchant shown in his store in New Milford, Connecticut.

2. Ester Boardman - also painted by Ralph Earl in 1789, a native of New Haven, Connecticut. She is Elijah Boardman's sister.

3. Martha Rigden/Mrs. Charles Frederick - painted by George Romney in the mid 1770s. She is the wife of a merchant in the East India Trading company whom she married clandestinely. Cool.

4. Lucas van Uffel - painted by Anthony van Dyck around 1622. Van Uffel was a respected merchant in Venice and is shown doing learned and interesting things. With that mustache, he should have taken up fencing.

5. Anthony van Dyck - self portrait painted around 1620. He shows himself in fine clothing, likely because his father was a merchant of fine fabrics.

6. Lady Williams and Child - painted by Ralph Earl in 1783. I would be interested to know her full name...

About the Programming

This interactive was inspired by the old trick of having people peering at you through holes in a portrait. They've been cropped using Photoshop so that the eyes are more prominent in the image and arranged into a gallery. The eyes are separate images behind the gallery image that move independently... well... as a pair. I would also recommend not peering at the eye images themselves because they are really frightening. I had to clone out much of the skin around the eyes so the pupils could move more convincingly.

This is the code I used to track the movement of the eyes. I first get the angle to the tracking point with the arc tangent, then move the eyes by at most 3 pixels in the x direction and 1.5 pixels in the y. I came to those constants by playing around with what looked convincing.

function trackMovement(eye, index) {
    if (trackLoc.x > 0) {
        // If we are currently tracking the cursor or touch point, follow it with the eyes
        var angle = Math.atan2(eyes[index].home.y - trackLoc.y,
                           trackLoc.x - eyes[index].home.x);
        var x = eyes[index].home.x + 3 * Math.cos(angle);
        var y = eyes[index].home.y - 1.5 * Math.sin(angle);

        eye.x = x;
        eye.y = y;
    } else {
        // Leave the eyes in their usual position
        eye.x = eyes[index].home.x;
        eye.y = eyes[index].home.y;
    }

}