adrianseeley/dwight.html

## dwight.html
<html>
	<body>
		Max Iterations:       <input id="max_iterations" type="text" value="1500"><br>
		Max Shapes:           <input id="max_shapes" type="text" value="100"><br>
		Annealing Rate:       <input id="annealing_rate" type="text" value="0.999"><br>
		Starting Temperature: <input id="starting_temperature" type="text" value="0.04"><br>
		<input id="input" type="file" onchange="return load_image();"><br>
		<canvas id="original"></canvas>
		<canvas id="rendered"></canvas><br>
		<span id="status"></span>
	</body>
	<script>
		var canvas_original      = document.getElementById('original');
		var canvas_rendered      = document.getElementById('rendered');
		var status_div           = document.getElementById('status');
		var ctx_original         = canvas_original.getContext('2d');
		var ctx_rendered         = canvas_rendered.getContext('2d');
		var max_iterations       = null;
		var max_shapes           = null;
		var annealing_rate       = null;
		var starting_temperature = null;
		var shapes               = null;
		var current_iteration    = null;
		var current_shape        = null;
		var temperature          = null;
		var last_shape           = null;
		var last_fitness         = null;
		var pixels_original      = null;

		function load_image () {
			var input = document.getElementById('input');
			var file = input.files[0];
			var fr = new FileReader();
			fr.onload = function () {
				var img = new Image();
				img.onload = function () {
					canvas_original.width  = img.width;
					canvas_original.height = img.height;
					canvas_rendered.width  = img.width;
					canvas_rendered.height = img.height;
					ctx_original.drawImage(img, 0, 0);
					pixels_original      = ctx_original.getImageData(0, 0, canvas_original.width, canvas_original.height).data;
					max_iterations       = parseInt(document.getElementById('max_iterations').value);
					max_shapes           = parseInt(document.getElementById('max_shapes').value);
					annealing_rate       = parseFloat(document.getElementById('annealing_rate').value);
					starting_temperature = parseFloat(document.getElementById('starting_temperature').value);
					shapes               = [];
					current_iteration    = 0;
					current_shape        = 0;
					temperature          = starting_temperature;
					last_shape           = null;
					last_fitness         = null;
					return iterate();
				};
				img.src = fr.result;
			};
			fr.readAsDataURL(file);
			return false;
		};

		function iterate () {
			if (current_iteration >= max_iterations) {
				current_iteration = 0;
				current_shape     += 1;
				temperature       = starting_temperature;
				return iterate();
			}
			if (current_shape >= max_shapes) {
				return; // done!
			}
			if (shapes.length <= current_shape) {
				shapes.push([0, 0, 1, 1, 0, 0, 0]);
				last_shape   = null;
				last_fitness = null;
			} else {
				var two_temperature = temperature * 2;
				var random_idx = Math.floor(Math.random() * 7);
				shapes[shapes.length - 1][random_idx] = Math.min(1, Math.max(0, shapes[shapes.length - 1][random_idx] + ((Math.random() * two_temperature) - temperature)));
				/* walk all
				for (var i = 0; i < 7; i++) {
					shapes[shapes.length - 1][i] = Math.min(1, Math.max(0, shapes[shapes.length - 1][i] + ((Math.random() * two_temperature) - temperature)));
				}
				*/
			}
			function draw (canvas, ctx, shapes) {
				ctx.fillStyle = 'white';
				ctx.fillRect(0, 0, canvas.width, canvas.height);
				for (var i = 0; i < shapes.length; i++) {
					ctx.fillStyle = 'rgb(' + Math.floor(shapes[i][4] * 255) + ',' + Math.floor(shapes[i][5] * 255) + ',' + Math.floor(shapes[i][6] * 255) + ')';
					ctx.fillRect(shapes[i][0] * canvas.width, shapes[i][1] * canvas.height, shapes[i][2] * canvas.width, shapes[i][3] * canvas.height);
				}
			};
			draw(canvas_rendered, ctx_rendered, shapes);
			function calculate_fitness (pixels_original, ctx, canvas) {
				var fitness = 0;
				var pixels_rendered = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
				for (var i = 0; i < pixels_original.length; i++) {
					if ((i + 1) % 4 != 0) {
						fitness += Math.abs(pixels_rendered[i] - pixels_original[i]);
					}
				}
				return fitness;
			};
			var fitness = calculate_fitness(pixels_original, ctx_rendered, canvas_rendered);

			// if this wasnt the first iteration
			if (last_fitness != null) {
				// if current fitness is worse than last fitness
				if (fitness > last_fitness) {
					// set last shape back to previous iteration version
					for (var i = 0; i < 7; i++) {
						shapes[shapes.length - 1][i] = last_shape[i];
					}
				// else current fitness is better than last fitness
				} else {
					// set the last shape and fitness
					last_shape = [];
					for (var i = 0; i < 7; i++) {
						last_shape.push(shapes[shapes.length - 1][i]);
					}
					last_fitness = fitness;
				}
			// otherwise this was the first iterations
			} else {
				// set the last shape and fitness
				last_shape = [];
				for (var i = 0; i < 7; i++) {
					last_shape.push(shapes[shapes.length - 1][i]);
				}
				last_fitness = fitness;
			}

			current_iteration += 1;
			temperature *= annealing_rate;
			var percent_done = Math.floor((((shapes.length - 1) + (current_iteration / max_iterations)) / max_shapes) * 10000) / 100;
			status_div.innerText = percent_done + '%';
			setTimeout(iterate, 1);
		};
	</script>
</html>
	<html>
	<body>
	Max Iterations: <input id="max_iterations" type="text" value="1500"><br>
	Max Shapes: <input id="max_shapes" type="text" value="100"><br>
	Annealing Rate: <input id="annealing_rate" type="text" value="0.999"><br>
	Starting Temperature: <input id="starting_temperature" type="text" value="0.04"><br>
	<input id="input" type="file" onchange="return load_image();"><br>
	<canvas id="original"></canvas>
	<canvas id="rendered"></canvas><br>
	<span id="status"></span>
	</body>
	<script>
	var canvas_original = document.getElementById('original');
	var canvas_rendered = document.getElementById('rendered');
	var status_div = document.getElementById('status');
	var ctx_original = canvas_original.getContext('2d');
	var ctx_rendered = canvas_rendered.getContext('2d');
	var max_iterations = null;
	var max_shapes = null;
	var annealing_rate = null;
	var starting_temperature = null;
	var shapes = null;
	var current_iteration = null;
	var current_shape = null;
	var temperature = null;
	var last_shape = null;
	var last_fitness = null;
	var pixels_original = null;

	function load_image () {
	var input = document.getElementById('input');
	var file = input.files[0];
	var fr = new FileReader();
	fr.onload = function () {
	var img = new Image();
	img.onload = function () {
	canvas_original.width = img.width;
	canvas_original.height = img.height;
	canvas_rendered.width = img.width;
	canvas_rendered.height = img.height;
	ctx_original.drawImage(img, 0, 0);
	pixels_original = ctx_original.getImageData(0, 0, canvas_original.width, canvas_original.height).data;
	max_iterations = parseInt(document.getElementById('max_iterations').value);
	max_shapes = parseInt(document.getElementById('max_shapes').value);
	annealing_rate = parseFloat(document.getElementById('annealing_rate').value);
	starting_temperature = parseFloat(document.getElementById('starting_temperature').value);
	shapes = [];
	current_iteration = 0;
	current_shape = 0;
	temperature = starting_temperature;
	last_shape = null;
	last_fitness = null;
	return iterate();
	};
	img.src = fr.result;
	};
	fr.readAsDataURL(file);
	return false;
	};

	function iterate () {
	if (current_iteration >= max_iterations) {
	current_iteration = 0;
	current_shape += 1;
	temperature = starting_temperature;
	return iterate();
	}
	if (current_shape >= max_shapes) {
	return; // done!
	}
	if (shapes.length <= current_shape) {
	shapes.push([0, 0, 1, 1, 0, 0, 0]);
	last_shape = null;
	last_fitness = null;
	} else {
	var two_temperature = temperature * 2;
	var random_idx = Math.floor(Math.random() * 7);
	shapes[shapes.length - 1][random_idx] = Math.min(1, Math.max(0, shapes[shapes.length - 1][random_idx] + ((Math.random() * two_temperature) - temperature)));
	/* walk all
	for (var i = 0; i < 7; i++) {
	shapes[shapes.length - 1][i] = Math.min(1, Math.max(0, shapes[shapes.length - 1][i] + ((Math.random() * two_temperature) - temperature)));
	}
	*/
	}
	function draw (canvas, ctx, shapes) {
	ctx.fillStyle = 'white';
	ctx.fillRect(0, 0, canvas.width, canvas.height);
	for (var i = 0; i < shapes.length; i++) {
	ctx.fillStyle = 'rgb(' + Math.floor(shapes[i][4] * 255) + ',' + Math.floor(shapes[i][5] * 255) + ',' + Math.floor(shapes[i][6] * 255) + ')';
	ctx.fillRect(shapes[i][0] * canvas.width, shapes[i][1] * canvas.height, shapes[i][2] * canvas.width, shapes[i][3] * canvas.height);
	}
	};
	draw(canvas_rendered, ctx_rendered, shapes);
	function calculate_fitness (pixels_original, ctx, canvas) {
	var fitness = 0;
	var pixels_rendered = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
	for (var i = 0; i < pixels_original.length; i++) {
	if ((i + 1) % 4 != 0) {
	fitness += Math.abs(pixels_rendered[i] - pixels_original[i]);
	}
	}
	return fitness;
	};
	var fitness = calculate_fitness(pixels_original, ctx_rendered, canvas_rendered);

	// if this wasnt the first iteration
	if (last_fitness != null) {
	// if current fitness is worse than last fitness
	if (fitness > last_fitness) {
	// set last shape back to previous iteration version
	for (var i = 0; i < 7; i++) {
	shapes[shapes.length - 1][i] = last_shape[i];
	}
	// else current fitness is better than last fitness
	} else {
	// set the last shape and fitness
	last_shape = [];
	for (var i = 0; i < 7; i++) {
	last_shape.push(shapes[shapes.length - 1][i]);
	}
	last_fitness = fitness;
	}
	// otherwise this was the first iterations
	} else {
	// set the last shape and fitness
	last_shape = [];
	for (var i = 0; i < 7; i++) {
	last_shape.push(shapes[shapes.length - 1][i]);
	}
	last_fitness = fitness;
	}

	current_iteration += 1;
	temperature *= annealing_rate;
	var percent_done = Math.floor((((shapes.length - 1) + (current_iteration / max_iterations)) / max_shapes) * 10000) / 100;
	status_div.innerText = percent_done + '%';
	setTimeout(iterate, 1);
	};
	</script>
	</html>