Mr Speaker

Springs with Canvas

Fluffy linesEven more Canvas vs Maths fun! This JavaScript demo vaguely emulates some spring physics. There are 10 linked points - each of whose acceleration is determined by the distance to the spring in front of them. A nice curve drawn between each point using the quadraticCurveTo command. And it sure makes some perdy patterns.

The controls let you adjust the friction and the spring strength, as well as turn on or off the "trails". Clicking on the canvas element will toggle drawing (so you can "lift your pen"). Anyhoo, that's it. Make some lines!


  1. Hmmm, a twitter informant tells me it appears that it don’t work in Chrome on PC… I’m not sure why, but I suspect it _might_ be to do with setting the globalCompositeOperation parameter to “lighter” and then drawing very light (0.01 opacity) 1px lines. I’ll have to check it.

    Monday, August 17, 2009 at 9:23 am | Permalink
  2. It’s brain-breaking to think of all the springy nebulae of arcs, spans, vaults and vortices that my mousing has made that have herefore too remained invisible. So it is.

    Monday, August 17, 2009 at 10:39 am | Permalink
Captcha! Please type 'radical' here: *
How did you find this thingo? *