Tangerine Development

Mouse-over or touch/drag to interact with Sleeping Beauty. Or, view fullscreen.

About the Art

Erté, born in Russia as Romain de Tirtoff in 1892, is an iconic Art Deco artist. His works of tall, sinewy women with flowing clothes are the epitome of the 1920s. They are magical and I love them. This work was done towards the end of his very long life (he was almost 100 when he died!) in 1983.

Much of Erté's work is still covered by copyright, but this piece appears to have a fair use clause attached to it.

About the Programming

There are two main components to this animation - the snow and the branches. Both of them are fairly simple (much simpler than the lilies).

Falling Snow

The snow has a random x and y velocity - the y velocity is downwards as you would expect, and the x velocity allows it to drift nicely from side to side. I assign these at the beginning and leave them throughout the interactive. At each frame, I add the velocity to the snowflake and it floats on its merry way.

When you interact, it blows the snow out of the way using a repulsive force:

    if (trackLoc.x > 0) {
        // If tracking, blow it around
        var dist = distance(trackLoc.x, trackLoc.y,
                            snow.x, snow.y);
        if (dist < maxDist) {
            var intAngle = Math.atan2(trackLoc.y - snow.y,
                                      trackLoc.x - snow.x);
            snow.x -= (maxDist - dist)/270 * Math.cos(intAngle);
            snow.y -= (maxDist - dist)/270 * Math.sin(intAngle);
        }
    }

The Branches

I cut the branches out of the painting individually and loaded them onto the page in their respective locations. They are oscillating sinusoidally about a given point which changes depending on interaction.

function updateBranch(branch) {
    var targetAngle = 0;
    var dist = distance(trackLoc.x, trackLoc.y,
                 branch.x, branch.y);

    // if it's tracking, go towards the point
    if (trackLoc.x > 0 && dist < maxDist) {
        targetAngle = Math.atan2(trackLoc.y - branch.y,
                                  trackLoc.x - branch.x)
                        - Math.PI/2;
        targetAngle *= dist/(maxDist * 5);
    } 

    // If not interacting, float back down to zero angle
    if (Math.abs(branch.homeAngle - targetAngle) > 0.05) {
        branch.homeAngle += (targetAngle - branch.homeAngle)/40;
    }

    // update the angluar velocity
    branch.phi = 0.1 * Math.sin(frame + branch.angOffset);
    branch.rotation = branch.homeAngle + branch.phi;
}