Close
Simone Seagle

Simone Seagle

Independent Web and Educational Software Developer

Read More

Search

Play

Clouds and Water

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

About the Art

Clouds and Water, inspired by the north shore of Long Island, was painted by Arthur Dove in 1930. He lived there with his mistress (who he later married) after leaving his wife and son. Not cool. Anyway, he is often considered the first artist to create purely abstract imagery, although obviously this painting is not an example of that. He was interested in taking the forms of nature and abstracting them into color and lines, which is what you see in the painting style of the hills and water.

Want to read more? Check out Arthur Dove's biography on the Met's website.

About the Programming

This interactive includes three primary movements. If you want to know how it works, read on for code samples.

  1. Gently rolling waves. I create this by moving each wave in a circle that is slightly out of phase with the wave above it.

    wave.vy = (0.5 + index) * 0.1 * Math.sin(frame + index);
    wave.vx = (1 + index) * 0.1 * Math.cos(frame + index) + waveParallax;
  2. Parallax. Parallax is what you notice when you bob your head side to side and notice that things close to you appear to move more than those that are distant. In order to create this, based on the location of the mouse, I move the waves the most from side to side, the mountains a little bit, and then I don't move the sky at all.

    function updateParallax() {
        // First find out what offset we want.  Default is the center.
        var intendedOffset = center.x;
    
        if (trackLoc.x > 0) {
            // If the tracking point (Mouse or touch point) on screen,
            //  change the offset to one fifteenth of the distance
            intendedOffset = (trackLoc.x - center.x) / 15 + center.x;
        }
    
        // How much does it still need to go?
        var diff = intendedOffset - land.x;
        // Only change it if the difference is appreciable
        if (Math.abs(diff) > 1) {
            land.x += diff / 40;
            // The return
            waveParallax = diff / 20;
        } else {
            waveParallax = 0;
        }
    }
  3. Boats. The boats speed up when you touch behind them, and slow down if you touch in front of them. I start by giving each of the three boats a base speed, and then that speed is modified based on how close the interaction point is to the boat - the closer it is, the more the boat's velocity changes. I am also bobbing the boat up and down because of the waves. That function is pretty long, so I'm going to leave it off of here. If you want to know how it works, feel free to look at the source code. I commented on it quite a bit.