Ecsmas and Tron

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;
}

Tags: , , ,

Leave a Reply