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!)
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.
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).
So cool! But the “sharing your snowflake on fb” option isn’t working for me. It gives me a “user login problem!” error.
December 15, 2013 @ 8:53 pm
|Thanks for letting me know. I guess more testing of that code is needed. It is working for me here, but I’ll look into this some more.
December 17, 2013 @ 6:23 am
|Really cool man! Saw your post on reddit (I don’t have an account). I am trying to learn web development and stuff like this inspires me.
December 19, 2013 @ 4:43 am
|Thanks for your comments! Glad you like it. (Sorry I didn’t see your comment for a while…I was busy with some things.) I’m working on a blog post now that will explain some of the code behind this application. I hope you’ll find it instructive!
December 30, 2013 @ 5:56 pm
|Is there any possibility of your adding a tool for making better curves? Thanks! This is a fun thing to play with.
December 16, 2014 @ 6:21 am
|Glad you like it! Yes, I think I should probably add some more curve-drawing options when I can. The original idea was to make the cut lines straight like scissor cuts, but I suppose you can also cut curved lines with scissors. And it would be a fun option, so I should add it.
December 16, 2014 @ 5:12 pm
|I too would love you to include curves.. draw with a pen?
I would use this program to make Hawaiian quilts.
Thank you for creating this.
January 24, 2018 @ 2:57 am
|Sorry for the slow response! Thank you for your comment. Curves might be a nice idea for a future update.
March 19, 2018 @ 10:48 pm
|This needs to come with a warning:
“This application is highly addictive. Use at your own risk.”
December 18, 2014 @ 4:59 pm
|Glad you’re enjoying it! Sorry for any loss of productivity.
December 18, 2014 @ 6:47 pm
|So cool. Makes me consider what the equivalent one dimension up would be. Perhaps rotating a 3d cutout object in euclidean 4-space about a 2D plane to get a symmetric object in 3-space.
December 20, 2014 @ 5:11 pm
|Glad you’re enjoying it! It sounds like you’re going two dimensions up in your thinking. Going up one dimension would produce a 3d solid from some transformed solid. The symmetries might be reflections over planes, but there could also be rotations. There are a lot of interesting symmetry “groups” one could consider. Might be interesting to code someday!
December 25, 2014 @ 2:40 am
|This is amazing! So easy that my elementary students are having a BLAST with it!!
So many uses — symmetry, geometry, even multiplication (total number of cut-outs).
Thank you!
🙂
December 15, 2017 @ 4:15 pm
|So glad you could use it with your students!
December 18, 2017 @ 12:42 am
|Hey Dan,
Its an amazing game, can you help me making a similar game like this or can you share me the JS you have used in this game. My son wants to submit something similar in his school for his project
January 31, 2018 @ 11:12 am
|Very sorry I never responded – as you may have noticed I am not updating this blog frequently! You can grab the source code from your browser.
March 19, 2018 @ 10:50 pm
|Love your website and snowflake maker! I use it with my students in elementary school and they love it!
Is there a good way to save these and change the color from gray and white? When they save they do not carry over the background color from the app page.
Any suggestions are appreciated!
January 5, 2022 @ 2:43 pm
|