Generative canvas is fun (too)

Quick post.
I created a simple generative doodle using the canvas with javascript, check it out:
» Canvas Doodle

It is based on this experiment by mr.doob. For me it was a challenge to finally do a canvas experiment. It is kinda fun, you don’t have to compile and the surprise is very big if it works, since you don’t have such a thing as compile errors 🙂

A nice thing with the html-canvas is that you can set the line thickness to floats, where in actionscript you can only use an numbers that will be be rounded. That allows me to create nice thin lines. An annoying thing is that you have to use strings (with RGBA values) to define the color of the lines. Can this be a uint-value?
context.strokeStyle = ‘rgba(242, 43, 81, 0.8)’;
Another thing that I noticed, it’s is hard to blend two canvas contexts, you’ll have to do it pixel per pixel.

function merge(toContext, fromContext)
{
var imageData = fromContext.getImageData(0, 0, width, height);
var pixelData1 = imageData.data;
var pixelData2 = toContext.getImageData(0, 0, width, height).data;

if (pixelData1.length != pixelData2.length) return;

for (var i = 0, total = pixelData1.length; i < total; i ++ ) { pixelData1[i] = (pixelData1[i] + pixelData2[i]) / 2; // ugly blend } toContext.putImageData(imageData, 0, 0); } [/as]This works. Yeah yeah, I know if I want a normal blend, I should grab the RGB values separately and mix them per channel, but this works in the experiment.. (!?) 😉 I'm open for suggestions and optimization of this thing. Is there a Actionscript-like [i]BitmapData.draw()[/i] or [i]BitmapData.copyPixels()[/i] alternative for this?