ikr7/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<canvas style="width:500px;height:500px;"></canvas>
<script>

var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');

var W = 250;
var H = 250;
var MAX = 64;

canvas.width = W;
canvas.height = H;

var point = function (i, x, y, b) {
	i.data[(W * (y - 1) + x) * 4 + 0] = b;
	i.data[(W * (y - 1) + x) * 4 + 1] = b;
	i.data[(W * (y - 1) + x) * 4 + 2] = b;
	i.data[(W * (y - 1) + x) * 4 + 3] = 0xFF;
}

var mand = function (a, b) {
	var x = 0, y = 0, x1, y1;
	for (var n = 1; n < MAX; n++) {
		x1 = x * x - y * y - a;
		y1 = 2 * x * y -b;
		if (x1 * x1 + y1 * y1 > 4) return n;
		x = x1;
		y = y1;
	}
	return 0;
};

var loop = function (c) {

	var i = context.createImageData(W, H);

	for (var y = 0; y < H; y++) {
		for (var x = 0; x < W; x++) {
			point(i, x, y, mand(x / c, y / c) * 4);
		}
	}

	context.putImageData(i, 0, 0);

	requestAnimationFrame(function () {
		loop(c + 3);
	}, 100);

};

loop(1);

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	</head>
	<body>
	<canvas style="width:500px;height:500px;"></canvas>
	<script>

	var canvas = document.querySelector('canvas');
	var context = canvas.getContext('2d');

	var W = 250;
	var H = 250;
	var MAX = 64;

	canvas.width = W;
	canvas.height = H;

	var point = function (i, x, y, b) {
	i.data[(W * (y - 1) + x) * 4 + 0] = b;
	i.data[(W * (y - 1) + x) * 4 + 1] = b;
	i.data[(W * (y - 1) + x) * 4 + 2] = b;
	i.data[(W * (y - 1) + x) * 4 + 3] = 0xFF;
	}

	var mand = function (a, b) {
	var x = 0, y = 0, x1, y1;
	for (var n = 1; n < MAX; n++) {
	x1 = x * x - y * y - a;
	y1 = 2 * x * y -b;
	if (x1 * x1 + y1 * y1 > 4) return n;
	x = x1;
	y = y1;
	}
	return 0;
	};

	var loop = function (c) {

	var i = context.createImageData(W, H);

	for (var y = 0; y < H; y++) {
	for (var x = 0; x < W; x++) {
	point(i, x, y, mand(x / c, y / c) * 4);
	}
	}

	context.putImageData(i, 0, 0);

	requestAnimationFrame(function () {
	loop(c + 3);
	}, 100);

	};

	loop(1);

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