Example : Creating spiral designs with Canvas, JavaScript and EaselJS

I have been having fun playing around with JavaScript, the HTML5 Canvas element and EaselJS lately, and have been building a lot of small experiments. I wanted to share a simple one I created, which creates spiral designs.

The example was pretty simple to put together, but is fun to play with, and can make some pretty nice patterns / spirals. I have uploaded a couple of images that I have created using the example:

and put together a time lapse video showing a spiral being created:

You can view the video on YouTube

You can view the example here .

I have also posted all of the code in my GitHub Repository.

There is no UI to change settings, but you can tweak the designs you create by passing in some URL params, like so:

/index.html?minradius=10&maxradius=3000&strokealpha=0.2&spread=.8

minradius : The minimum radius of the circle that will be drawn.
maxradius : The maximum radius of the circle that will be drawn.

If minradius and maxradius are different, the circle radius will tween back and forth between the sizes.

strokealpha : A number between 0.0 and 1.0 that specifies the alpha of the stroke of the circle
spread: How quickly the spiral expands / opens up

Click the screen to start / pause the drawing.

Play around with different combinations of settings. If you create anything cool, or have any questions / suggestions, then post them below.