HTML Canvas Lines Toy

Karl Hillesland and I toyed around with the Canvas HTML/Javascript API this weekend. We remade an old program I noodled around with in highschool. The heart of it is just drawing lines between curves made with trig functions (the "offset" constants are continuously changing every frame via their own sin waves):

 var x1 = Math.sin(2*Math.PI*(t+offsetInner1)*periods1x+offsetOuter1);
 var y1 = Math.cos(2*Math.PI*(t+offsetInner2)*periods1y+offsetOuter2);
 var x2 = Math.sin(2*Math.PI*(t+offsetInner3)*periods2x+offsetOuter3);
 var y2 = Math.cos(2*Math.PI*(t+offsetInner4)*periods2y+offsetOuter4);

 // line from (x1,y1) to (x2,y2)
If you're using a browser that supports Canvas, you'll see it above. Internet Explorer doesn't support it as I'm writing this - so use Chrome or Firefox or ... wait for Microsoft to catch up.

It's not exactly "done", but who knows if we'll clean it up. ;) If you'd like to experiment with it, here's a version with debug mode sliders you can drag around:

lines-07.html

• Changing the periods (last 4 options) results in very different effects.
• Use Chrome for slider input support - sliders are nice. Firefox just displays input boxes ;(.
• Resize your browser's width for the desired aspect ratio -- that page auto-letterboxes.

For sad people with no capable browser, here's a still image: