Mandelbrot

After reading http://sunandstuff.com/mandelbrot/about/

by Anton

HTML

<canvas id="mandelbrot" width="4" height="4"></canvas>

CSS

canvas {
    margin: 20px;
    background-color: #333;
}

JavaScript

var steps = 10;

var canvas = document.getElementById('mandelbrot'),
	ctx = canvas.getContext('2d');

var w = canvas.width,
	h = canvas.height;

var image = ctx.getImageData(0, 0, w, h);

for(var i = 0; i < image.data.length; i += 4) {
	var x = (i / 4) % w - w/2;
    var y = Math.floor(i / (4 * w)) - h/2;
    
    var color = Math.sqrt(x*x + y*y) / h * 255;
    
    console.log(speed(x, y));
    
	image.data[i] = color;
    image.data[i+1] = color;
    image.data[i+2] = color;
    image.data[i+3] = 255;
}

ctx.putImageData(image, 0, 0);

return;

// -----------------------------------------------------------------------

function speed(x, y) {
	var deltas = [],
    	oldDist,
        newDist,
        oldPos = { x: x, y: y },
        newPos,
        avgSpeed;
    
    for(var i = 0; i < steps; i++) {
    	newPos = getNew(x, y, oldPos);
		newDist = distance(newPos);
        
        if(oldDist)
        	deltas.push(newDist - oldDist);
            
		oldPos = { x: newPos.x, y: newPos.y };
        oldDist = newDist;
    }
    
    avgSpeed = deltas.reduce(function(acc, curr) { return acc + curr; }) / deltas.length;
    
    return avgSpeed;
}

function distance(pos) {
	return Math.sqrt(pos.x * pos.x + pos.y * pos.y);
}

function getNew(x, y, pos) {
	return {
    	x: pos.x * pos.x  - pos.y * pos.y + x,
        y: 2 * pos.x * pos.y + y
    };
}