tnSuperman tanktn oParticles uExtrusion j3d sandy flExtrusion fuelyoursenses meshCam bufferSnake dMap2 dMap pv2 cursorFire opticks faceGame FPSnake pv preOpticks painty youtuber fractalFIngers 2dbals

August 13, 2011

Code studies in JS canvas

Filed under: doodles — Tags: , , , , , , , , — Brandel Zachernuk @ 10:33 pm

A map generated from a single wanderer

Whenever I see a painting or a design that is especially interesting, I like to understand it as well as I can. In order to do that, I make a copy. In order to make a copy, you’ve got to pay attention to a much finer level of detail than when you’re just appreciating something. Every brush-stroke in a painting needs to be made, and when you try to make them all yourself, you understand them better.

It’s the same with programming. Spending time wondering “how did they do that?” will give you some answers, but trying to do it yourself will give you more.

A few weekends ago I was watching Jared Tarbell’s speech at Flash On the Beach from 2010, and when he started talking about his ‘substrate’ algorithm,  I was eager to try it out. His experiments seem to be centred on the crystalline quality of the result, but I found the idea of a street map to be more interesting. Hit ‘Draw’ at any time to start a new map, or play with the numbers to get a different effect. I’ve managed to create maps of 6000×4000 pixels with 90 starting wanderers. I have some good samples up at My Flickr page.

Note: This runs in other browsers but it was written as a chrome experiment, so it’ll run best in Chrome and Safari.

Save as PNG!

Dimensions: width: height
Branches: Initial wanderers: Max wanderers:
Initial thickness:

Line opacity:

Children wanderers are thinner
On Black?

Wanderers travel in straight lines

In testing this page I have had some ‘security domain’ errors because it’s trying to execute javascript. This only appears to happen when the page hasn’t finished loading already – so if it doesn’t work, reload the page and try again. If you want to use this code and modify it yourself, please do – I’d love to see what you do with it!

1 Comment

  1. This excites me.

    Comment by Bill Connelly — December 21, 2011 @ 11:30 pm

RSS feed for comments on this post. TrackBack URL

Sorry, the comment form is closed at this time.

Powered by WordPress