Tangerine Development

Click the 'Spin' button to start the game and generate a project! You can also view fullscreen if that's more convenient.

A quick note - I am not promising you will find every category of art at every one of the sites listed in the game! Just do your best and have fun with it. :-) To hear more about the talk that goes with the game, check here.

A list of all of the collections I used for this game:

• The Metropolitan Museum of Art
• The Rijksmuseum
• Wellcome Collection
• The Getty
• The Museum of New Zealand
• Yale University Art Gallery
• The National Gallery of Art
• LACMA (The Los Angeles County Museum of Art)
• The Library of Congress

About the Art

La Roulette in the Casino by Georges Goursat is a lithograph from about 1910. It depicts the roulette table in Monte Carlo. What I enjoy most about this piece are the faces of the people watching the game! They're so cute and funny.

About the Programming

The main thing going on in the picture is that when the button is clicked, the wheels spin - although it's obviously not the whole wheel. I've only animated the impressionistic versions of the numbers. Because the wheel is shown at an angle, you can't just spin a circular image like you could if you were viewing the wheel from the top. Instead, I have the numbers animated along elliptical paths that approximately match the wheel itself. I use the equation for the ellipse with parameters for each band of ticks - so the wheel's center x and y, and then the x and y radius for each band of ticks. For more information about that, check out my other elliptical path animation - the Winter Scene in Moonlight.

    function updateTick(tick) {
        var angle = leaderAngle + tick.index * (2 * Math.PI / numTicks[tick.band]);
        tick.rotation = angle;
        var u = Math.tan(angle/2);
        tick.x = a[tick.band] * (1 - u*u)/(u*u + 1) + cx;
        tick.y = 2 * b[tick.band] * u / (u*u + 1) + cy;
    }

I also have a teetering back and forth type of animation on a few different parts in the crowd. The speed at which they totter between two defined angles is tied to the speed of the wheel, so they slow down when the wheel does.

When the wheel is told to spin, I reset the angular velocity (phi). It then decelerates a little bit with each frame. When it is effectively stopped, stop the animations.

    app.ticker.add(function () {
        if (wheelSpinning) {
            leaderAngle -= phi;
            phi *= deceleration;
            if (phi < 0.001) {
                wheelSpinning = false;
                showProjectIdea();
            }
            ticks.forEach(updateTick);
            teeterSprites.forEach(updateTeeterSprite);
        }
    })

For the game itself, I have three arrays of options: Art time periods, Open-Access collections, and project ideas. Those are randomly combined when the roulette wheel stops spinning. (The wheel is just for fun...)