mike chambers | about

Example : Creating spiral designs with Canvas, JavaScript and EaselJS

Wednesday, February 9, 2011

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.

title

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:

title

title

title

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

</param> </param> </param> </param></embed>

You can view the example at:
</files/html5/easeljs/Spirals/index.html>

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.

twitter github flickr behance