Some time ago I built a virtual paper snowflake creator in Flash and ActionScript, with Barbara Kaskosz at flashandmath.com (see the original here). I have now recreated this application from scratch, using JavaScript and the HTML5 canvas. This time, however, I have added the ability to save images, and to share images on Facebook.

Try it out! Click here or on the image below to open the web application in a new window. (The application works in mobile browsers, but it definitely needs to be optimized for smoother performance. I’ll work on a better mobile version soon!)

paper snowflake app screencap

About the application

The application is intended to recreate the craft of paper snowflake making, where the paper is folded properly to create six-fold symmetry. Clicks with a mouse replace scissor cuts (see the instructions at the bottom of the app). The intent of the design was to allow only straight-line cuts, but after playing with this for a while I’ve decided some freehand cuts might also be nice. Perhaps those will be included in a future version!

Here is a small flickr set containing a few images created with this application.

paper snowflake thumbnails

More to come!

If you are interested in knowing more about the code for this application, I will be posting more articles to this blog soon. For now, you can certainly view the source within your browser. Have fun with the application and let me know if you encounter any issues.

Acknowledgments

  • The code for sharing images on Facebook came from combining elements from this github gist from Andy Burke, this post at coderwall, and some of the source files distributed through this Coursera course.
  • My thanks to Mario Klingemann for his StackBlur for HTML5 canvas, which I used to draw the drop shadow underneath the snowflake. (I know the HTML5 canvas has some built-in methods for drawing shadows, but there is currently an issue in Chrome which causes some inconsistency).