Procedural Drawing in Canvas
Thanks to a couple of different “build to a certain file size” web developer competitions (JS1k and JS10k), there is a great source of new canvas demos flowing through the community at the moment. Canvas is a great way of making something visually appealing in a small filesize. Steven Wittens has created one such demo for the JS1k competition using procedural drawing, and has written a tutorial that explains more about how procedural drawing works so that others can also learn the skill and start producing their own patterns.
Pretty procedural patterns
Comments from the Author:
This is classic procedural coding at its best: take a time-based
offsetand plug it into a random mish-mash of easily available functions like cosine and sine. Tweak it until it ‘does the right thing’. It’s a very cheap way of creating interesting, organic looking patterns.
Comments
george
Just wondering if you could post a link to JS10k. I found JS1k, but JS10k doesn’t show up on Google, only people talking about JS10k.
Posted on August 11, 2010
Nathan
@George, there is a 10K contest called 10K Apart, but it ends in 3 days. http://10k.aneventapart.com/
Posted on August 22, 2010
ediego
This demo is down, i want to see it anyone has a link?
Posted on November 24, 2010
Gerry Straathof
I was hoping to go through the tutorial, but the link is broken. If there is no tutorial, remove the article. Why give us false hopes?
Posted on November 25, 2010
Related demos