Playing around with some simple constraints on an array of moving circles. Click the canvas to start/stop the animation.

After the previous few canvas exercises, I wanted a simple way to allow users to save images from a canvas tag to their local machine. Ideally, without any server-side dependencies. While the whole right-click-the-canvas-and-open-a-png-in-a-new-tab is a handy pro-tip, I really wanted a nicer and easy user experience. Something I wouldn’t have to explain to my mom how to use. I figured there were a few solutions out there, so I began poking around. I ended up with something of my own :)
Continue reading User-friendly image saving from the canvas
Another iteration of the previous canvas circle demos. Felix recommended trying to fade out the progression of the drawing to make the new circles pop a bit more (btw, Felix has some rad OpenGL demos!). Finally, just added some really simple swirling to the circles.
There is probably a ‘better’ way to do fade out the drawing over time, but I stuck with the simple. I am just drawing a slightly opaque black box on to the canvas every tick.
Continue reading [tinkering] swirls
Here is another iteration of my first canvas circles post. This one is more like Fall colored acid rain :). This time, we lose the strokes, introduce a handy getRGBA function, and just let the drawing continue on indefinitely (toggleable of course).
Click the canvas to pause/resume the drawing.
Continue reading [tinkering] splotches
Repeating circles without clearing the canvas. It’s like fall colored soft-serve.
Click anywhere on the canvas to restart the drawing.