Archive for the javascript Category

[tinkering] bouncing circles

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

Continue reading [tinkering] bouncing circles

User-friendly image saving from the canvas

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

[tinkering] swirls

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

[tinkering] splotches

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

[tinkering] circles

Repeating circles without clearing the canvas. It’s like fall colored soft-serve.


Click anywhere on the canvas to restart the drawing.

Continue reading [tinkering] circles