Keep your eye out for Mr Speaker and @twalve's frightfully good book, jQuery: Novice to Ninja - in stores NOW!

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!

2 Comments

  1. Mr Speaker wrote:

    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. Transfixled wrote:

    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

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*
Captcha! Please type 'lolz' *