Categories

Site Information

Search

Mouse-over or touch/drag to interact with Bridge over a Pond of Water Lilies. Or, view fullscreen.

About the Art

Bridge over a Pond of Water Lilies, painted in 1899, is one of my favorite impressionist paintings. It was done by the French painter Claude Monet, the leader of the French impressionist movement. He was a man after my own heart - the garden that you see in this painting is his own. He was an avid gardener and bought land with a pond, populating it with a landscape for his paintings. It shows up many times - this series has around 18 paintings in it.

One of the most fascinating things about Claude Monet, in my opinion, was his struggle with cataracts. This article has a lot of simulations of what Monet would have seen with his cataracts and how it affected his paintings. He also experimented with his own eyes, painting the same scene before and after his cataract surgery. Apparently he was so enraged by how his vision had changed that he sadly destroyed many of his older paintings.

About the Programming

This interactive turned out to be much harder to produce than I originally thought it would be. What you see here is the result of many failures and a lot of experimentation. The first three things I tried were not anywhere near as satisfying as I had hoped, so I scrapped them. Here's what didn't work:

Group the lily-pads and have them float together towards the front as if it were a river under the bridge.
This didn't work because the painting is called "Bridge over a POND ..." I scrapped it immediately.

When the lily-pads were generated, create them in patches and then have them float circularly and also spring around a home point.
The patches worked rather well, but for some reason I had a world of trouble creating elliptical patches AND the interaction looked stupid. Lily-pads don't really spring exactly.

What I finally settled on, that required quite a bit of fine tuning, is a rudimentary flocking behavior.

The behavior of the lily-pads has a few components that I'll talk about. Feel free to skip this part if you're not into trigonometry or physics!

The basic "physics" of the lily-pads simply that they each have a position, velocity, and acceleration. The acceleration is the only thing that I modify, except to slow down the lily if it goes too fast. We don't want rogue lily-pads flying around.

Bounce off a neighbor. I loop through each pair of lilies without having duplicates:

What's going on here is that first, we keep track of the nearest neighbor to each lily. That will come in handy later. The angle between them is calculated by the Math.atan2() function.
Next, the lilies bounce off of each other. In order that they bounce off at the correct angle, we take the sin and cosine of that angle and either add or subtract it, depending on the lily. I wound up having to play around with this. If you switch the += and the -=, you wind up having them accelerate past each other, which looks really strange. Pro tip.

Slow down the lily when it's not being hit or average the hit accelerations.

Whew! That's pretty much it. There's also other stuff happening, but if you're curious about that, either look at the source code or email me.

Finally...

Apparently my appreciation for this work goes back a long way. When I was in 3rd grade, I was a part of Odyssey of the Mind and we did a 4-foot-tall rendition of this painting to use as a backdrop. Awesome.