Tangerine Development

Mouse-over or touch/drag to interact with Angels and Flowers. Or, view fullscreen.

About the Art

This beautiful watercolor painting was done by my wonderful aunt, Merry Kurtz.

About the Programming

I used some of my favorite tricks and some simple math on this one.

First, parallax. I use it all the time because I LIKE IT. It's a simple concept - the stuff in front moves more than the stuff behind. Both of the midground and foreground sprites are centered on the x-axis, so we just want to shift them back and forth with the mouse/touch point.

    function updateParallax() {
        var intendedOffset = center.x;
        if (trackLoc.x > 0) {
            intendedOffset = (trackLoc.x - center.x) / 10 + center.x;
        }
        var diff = intendedOffset - foreground.x;

        if (Math.abs(diff) > 1) {
            // Don't bother if it's within a pixel
            midground.x += diff / 60;
            foreground.x += diff / 30;
        }
    }

And the angels. I have them flying up and back and forth sinusoidally, and then they also fly away from the mouse. Here's that function:

    function updateAngel(angel) {

        var vx = angel.vx * Math.sin(frame + angel.frameOffset);
        var vy = angel.vy + 0.1 * (1 - vx / angel.vx);

        if (trackLoc.x > 0) {
            // If tracking, scoot the little angel around
            var dist = distance(trackLoc.x, trackLoc.y,
                                angel.x, angel.y);
            if (dist < maxDist) {
                var intAngle = Math.atan2(trackLoc.y - angel.y,
                                          trackLoc.x - angel.x) + Math.PI/2;
                vx -= (maxDist - dist)/100 * Math.cos(intAngle);
                vy -= (maxDist - dist)/100 * Math.sin(intAngle);
            }
        }

        angel.x += vx;
        angel.y += vy;

        angel.targetFlip = vx > 0 ? 1 : -1;
        var diff = angel.scale._x 
            - angel.targetFlip * angel.baseScale;

        // If it isn't at the target flip, rotate it.
        if (Math.abs(diff) > 0.01) {
            //console.log("flipping", diff);
            var newXFlip = angel.scale._x - diff / 10;
            angel.scale.set(newXFlip, angel.baseScale)
        } 

        // Keep her in bounds (Code omitted)
    }

And voila! I think I should probably factor out the fly-away-from-tracking point behavior because I use it pretty frequently.