Simone Seagle

Simone Seagle

Independent Web and Educational Software Developer

Read More



The Portrait Gallery

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;