Jason Mooberry

I recently built a new homepage to celebrate Fall and kill a few weekends playing with canvas, javascript and CA.

A little while back I had an idea to use Cellular Automata rules to generate random groupings of xy coordinates. This worked well as a way to generate a rock pattern for my canvas drawing. I even developed a little tool to help me refine the parameters to use that produced the pattern I wanted.

I wanted to expand on that approach to make something more abstract and vizzy. And animation seemed like the next step. So I built another tool that allowed me to play around with animating generated CA sets of cells from one state to the next.

It lets you embed js into the callbacks for the driving parameters and even saves your settings into the hash tag so you can bookmark settings that you like and link to them.

So I’m publishing them both here for you to play with.

Well I really had a blast working with @darkgoyle on the Merry Ecsmas project on Christmas Eve. It was my first attempt at a canvas creation and it came together great. I am still finding myself creating snowflakes there!

All this canvas exposure and seeing how @darkgoyle does his maths got me in a mood to experiment! So I played around with implementing variations on a Fibonacci graph and many other different oddities involving timestamps and Phi. The one I liked the most was pretty simple. It is a rotation at 160 degrees with a 10px increment on the line length at each iteration. Here’s what it produces:

I think it’s rad in a simple Trony sortof way. Here’s the code to generate it:

// get the canvas
var canvas = document.getElementsByTagName('canvas')[0],
  c = canvas.getContext('2d'),
  center = { x: canvas.width/2, y: canvas.height/2 };

// setup starting state
c.translate(center.x,center.y);

// base styles
c.lineCap = 'round';
c.lineWidth = 2;
c.strokeStyle = 'rgba(0,0,255,.7)';

var f = 1;
while (f < 500) {
  c.beginPath();
  c.moveTo(0,0);
  c.rotate(160*(Math.PI/180)); // convert degrees to radians
  c.lineTo(f,f);
  c.translate(f,f);
  c.stroke();
  f += 10;
}