Surface

See the experiment

Synopsis

So a few years ago I made a Flash experiment, inspired by the genius of Yugo Nakamura. Well things have moved on since then and I’ve been playing with WebGL and three.js a lot recently (if you hadn’t noticed!), so it felt like the right time to remake that sucker.

Tech Details

The actual implementation is fairly simple. To begin with I take a plane and have it subdivide as needed. Then it’s a case of creating springs between each vertex and its neighbours. Finally we attach a spring to connect the vertex to its default position.

During each pass we check the length of each spring and apply the force to pull the vertex back to its base. In this process, the forces are going to apply to both ends of the spring so what you see is a vertex pulling its neighbours and you end up with a water-like surface.

A Layer of Love

For a laugh I decided to add a few extra features. You can, as with Photo Particles, add your own photos, and you can also modify the elasticity of the springs in action.

Thanks to Hakim‘s suggestion (he loves making them) I decided it was worth adding raindrops. When they’re going I have to say I find the whole thing mesmerising!

As per usual, I think it’s be wrong if I didn’t thank Mr. doob and Altered Qualia for three.js. I also need to thank Thodoris Tsiridis for allowing me to use his amazing photo of St. Eriksgatan in Stockholm.