Project: HTML5 Canvas Click-Ripples

Andrei Marks · August 7, 2012

click ripples. Haha, what a suggestive phrase.

So, I’ve been out of HTML5 land for a while. My website/meta-game has sort of stalled, but I’d like to jump back into it. My next project: writing a ripple effect algorithm.

I’ll just write it in Canvas, nothing fancier than that at the moment.

All that it’ll do is draw concentric circles out from wherever you click. So it’ll look like ripples. I’ll start with simple on off circles, and then switch to testing out some gradients. I’d also like to make overlapping circles look nice.

This should be a nice refresher. Off to the MDN.

Project Goals:

  • Track mouseclicks.
  • Create a circle at mouseclick.
  • Create a series of concentric circles at mouseclick.
    • Simple enough. A for loop is enough.
  • Animate concentric circles at mouseclick.
    • Now, I'm going to very simply make each mouseclick start an array of ten radii.
    • Each frame, the algorithm will loop over the radii, draw them, and add to the radii.
    • This will give it the appearance of growing outward by one each time.
    • When the smallest radius is larger than the width of the canvas, I'll stop it.
  • Allow for multiple simultaneous ripples.
  • Easy enough. Next, make the ripples look more ripple-like, in terms of spacing.

Project Notes:

function mouseMove(e){ mouseX = e.pageX - this.offsetLeft; mouseY = e.pageY - this.offsetTop; }

arc(x, y, radius, startAngle, endAngle, anticlockwise)

Twitter, Facebook