Independent Web and Educational Software Developer
Mouse-over or touch/drag to interact with Sleeping Beauty. Or, view fullscreen.
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.
There are two main components to this animation - the snow and the branches. Both of them are fairly simple (much simpler than the lilies).
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);
}
}
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;
}