scizo/nebulabrot.html

## nebulabrot.html
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <canvas id="buddhabrot" width="1000" height="1000"></canvas>
    <div id="images"></div>
    <script type="text/javascript">

var canvas = document.getElementById('buddhabrot'),
    images = document.getElementById('images');

var iterations = [1000, 10000, 5000],
    points     = 100000,
    limit      = 50;

var context = canvas.getContext('2d'),
    N       = canvas.width,
    image   = context.createImageData(N, N);

var exposures    = [new Array(N * N), new Array(N * N), new Array(N * N)],
    maxexposures = [0, 0, 0],
    time         = 0,
    timer        = null;

for (var i=0; i<exposures.length; i++) {
  var exposure = exposures[i];
  for (var j=0; j<exposure.length; j++) {
    exposure[j] = 0;
  }
}

function draw() {
  if (time > limit) clearInterval(timer);
  time += 1;
  plot();
  findMaxExposure();
  render();
  addImage();
}

function plot() {
  var x, y;
  for (var n=0; n<points; n++) {
    x = Math.random() * 3 - 2;
    y = Math.random() * 3 - 1.5;
    for (var i=0; i<3; i++) {
      if (iterate(x, y, iterations[i], exposures[i], false))
        iterate(x, y, iterations[i], exposures[i], true);
    }
  }
}

function iterate(x0, y0, iterations, exposures, shouldDraw) {
  var x = 0,
      y = 0;

  for (var i=0; i<iterations; i++) {
    var xnew = x * x - y * y + x0,
        ynew = 2 * x * y + y0;

    if (shouldDraw && i > 3) {
      var drawnX = Math.round(N * (xnew + 2.0) / 3.0),
          drawnY = Math.round(N * (ynew + 1.5) / 3.0);
      if ((0 <= drawnX < N) && (0 <= drawnY < N))
        exposures[drawnX * N + drawnY] += 1;
    }

    if ((xnew * xnew + ynew * ynew) > 4)
      return true;

    x = xnew;
    y = ynew;
  }
  return false;
}

function render() {
  var data = image.data;
  for (var i=0; i<N; i++) {
    for (var j=0; j<N; j++) {
      var idx  = (i * N + j) * 4;
      for (var k=0; k<3; k++) {
        var ramp = exposures[k][i * N + j] / (maxexposures[k] / 2.5);
        if (ramp > 1) ramp = 1;
        data[idx + k] = ramp * 255;
      }
      data[idx + 3] = 255
    }
  }
  context.putImageData(image, 0, 0);
}

function findMaxExposure() {
  for (var i=0; i<3; i++) {
    for (var j=0; j<exposures[i].length; j++) {
      var value = exposures[i][j];
      if (value > maxexposures[i])
        maxexposures[i] = value;
    }
  }
}

function addImage() {
  var dataUrl = canvas.toDataURL(),
      image   = document.createElement("img");

  image.setAttribute("src", dataUrl);
  images.appendChild(image);
}

timer = setInterval(draw, 0);

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	</head>
	<body>
	<canvas id="buddhabrot" width="1000" height="1000"></canvas>
	<div id="images"></div>
	<script type="text/javascript">

	var canvas = document.getElementById('buddhabrot'),
	images = document.getElementById('images');

	var iterations = [1000, 10000, 5000],
	points = 100000,
	limit = 50;

	var context = canvas.getContext('2d'),
	N = canvas.width,
	image = context.createImageData(N, N);

	var exposures = [new Array(N * N), new Array(N * N), new Array(N * N)],
	maxexposures = [0, 0, 0],
	time = 0,
	timer = null;

	for (var i=0; i<exposures.length; i++) {
	var exposure = exposures[i];
	for (var j=0; j<exposure.length; j++) {
	exposure[j] = 0;
	}
	}

	function draw() {
	if (time > limit) clearInterval(timer);
	time += 1;
	plot();
	findMaxExposure();
	render();
	addImage();
	}

	function plot() {
	var x, y;
	for (var n=0; n<points; n++) {
	x = Math.random() * 3 - 2;
	y = Math.random() * 3 - 1.5;
	for (var i=0; i<3; i++) {
	if (iterate(x, y, iterations[i], exposures[i], false))
	iterate(x, y, iterations[i], exposures[i], true);
	}
	}
	}

	function iterate(x0, y0, iterations, exposures, shouldDraw) {
	var x = 0,
	y = 0;

	for (var i=0; i<iterations; i++) {
	var xnew = x * x - y * y + x0,
	ynew = 2 * x * y + y0;

	if (shouldDraw && i > 3) {
	var drawnX = Math.round(N * (xnew + 2.0) / 3.0),
	drawnY = Math.round(N * (ynew + 1.5) / 3.0);
	if ((0 <= drawnX < N) && (0 <= drawnY < N))
	exposures[drawnX * N + drawnY] += 1;
	}

	if ((xnew * xnew + ynew * ynew) > 4)
	return true;

	x = xnew;
	y = ynew;
	}
	return false;
	}

	function render() {
	var data = image.data;
	for (var i=0; i<N; i++) {
	for (var j=0; j<N; j++) {
	var idx = (i * N + j) * 4;
	for (var k=0; k<3; k++) {
	var ramp = exposures[k][i * N + j] / (maxexposures[k] / 2.5);
	if (ramp > 1) ramp = 1;
	data[idx + k] = ramp * 255;
	}
	data[idx + 3] = 255
	}
	}
	context.putImageData(image, 0, 0);
	}

	function findMaxExposure() {
	for (var i=0; i<3; i++) {
	for (var j=0; j<exposures[i].length; j++) {
	var value = exposures[i][j];
	if (value > maxexposures[i])
	maxexposures[i] = value;
	}
	}
	}

	function addImage() {
	var dataUrl = canvas.toDataURL(),
	image = document.createElement("img");

	image.setAttribute("src", dataUrl);
	images.appendChild(image);
	}

	timer = setInterval(draw, 0);

	</script>
	</body>
	</html>