2010/12/27

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