dafrancis · October 20, 2014 21:08
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Squares</title>
    <style>
 html, body { margin:0; padding:0; }
 #mycanvas { border:1px solid #000000; }
 #mainbody { width:800px;margin:14px auto; }
    </style>
 </head>
 <body>
    <div id="mainbody">
        <canvas id="mycanvas" width="800" height="600"></canvas>
    </div>
    <script>
 (function () {
    var _Mouse;
    var SPACE = 32;
    var Mouse = {
        has_changed: function () {
            var current = JSON.stringify({
                x: this.x,
                y: this.y
            });
            var _has_changed = current !== this._Mouse;
            this._Mouse = current;
            return _has_changed
        }
    };
    var FPS = 1000 / 60;
    var canvas = document.getElementById("mycanvas");
    var ctx = canvas.getContext("2d");
    var size = 50;
    var growth = 0;
    var squares = [];

    function random_integer(min, max) {
        return Math.floor(Math.random() * (max - min)) + min;
    }

    function random_color() {
        var r = random_integer(0, 255),
            g = random_integer(0, 255),
            b = random_integer(0, 255);
        return "rgb(" + r + "," + g + "," + b + ")";
    }

    canvas.addEventListener('mousemove', function (evt) {
        var rect = canvas.getBoundingClientRect();
        Mouse.x = evt.clientX - rect.left;
        Mouse.y = evt.clientY - rect.top;
    }, false);

    canvas.addEventListener('mousedown', function (evt) {
        Mouse.down = true;
    }, false);

    canvas.addEventListener('mouseup', function (evt) {
        Mouse.down = false;
    }, false);

    function run(callback) {
        setInterval(callback, FPS);
    }

    function Square(x, y, size) {
        this.x = x;
        this.y = y;
        this.color = random_color();
        this.size = size;
    }

    Square.prototype.draw = function () {
        var half_size = this.size / 2,
            x = this.x - half_size,
            y = this.y - half_size;
        ctx.fillStyle = this.color;
        ctx.fillRect(x, y, this.size, this.size);
    };

    Square.prototype.change = function () {
        var new_size = this.size - 1;
        if (new_size) {
            squares.push(new Square(this.x, this.y, new_size));
        }
    };

    Square.prototype.step = function () {
        this.draw();
        this.change();
    }

    function check_growth() {
       if (Mouse.down) {
            growth += 1;
            if (growth > 100) {
                growth = 100;
            }
        } else {
            growth = 0;
        }
    }

    function animate_squares() {
        var squares_length = squares.length;
        while (squares_length--) {
            squares.shift().step();
        }
    }

    function add_square() {
        if (Mouse.has_changed()) {
            squares.push(new Square(Mouse.x, Mouse.y, size + growth));
        }
    }

    run(function () {
        animate_squares();
        check_growth();
        add_square();
    });

    document.body.addEventListener('keypress', function (e) {
        var a, image_data;
        if (e.keyCode === SPACE) {
            image_data = canvas.toDataURL("image/png");
            a = document.createElement("a");
            a.href = image_data;
            a.download = "square_image.png"
            a.click();
        }
    }, false)
 })();
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Squares</title>
	<style>
	html, body { margin:0; padding:0; }
	#mycanvas { border:1px solid #000000; }
	#mainbody { width:800px;margin:14px auto; }
	</style>
	</head>
	<body>
	<div id="mainbody">
	<canvas id="mycanvas" width="800" height="600"></canvas>
	</div>
	<script>
	(function () {
	var _Mouse;
	var SPACE = 32;
	var Mouse = {
	has_changed: function () {
	var current = JSON.stringify({
	x: this.x,
	y: this.y
	});
	var _has_changed = current !== this._Mouse;
	this._Mouse = current;
	return _has_changed
	}
	};
	var FPS = 1000 / 60;
	var canvas = document.getElementById("mycanvas");
	var ctx = canvas.getContext("2d");
	var size = 50;
	var growth = 0;
	var squares = [];

	function random_integer(min, max) {
	return Math.floor(Math.random() * (max - min)) + min;
	}

	function random_color() {
	var r = random_integer(0, 255),
	g = random_integer(0, 255),
	b = random_integer(0, 255);
	return "rgb(" + r + "," + g + "," + b + ")";
	}

	canvas.addEventListener('mousemove', function (evt) {
	var rect = canvas.getBoundingClientRect();
	Mouse.x = evt.clientX - rect.left;
	Mouse.y = evt.clientY - rect.top;
	}, false);

	canvas.addEventListener('mousedown', function (evt) {
	Mouse.down = true;
	}, false);

	canvas.addEventListener('mouseup', function (evt) {
	Mouse.down = false;
	}, false);

	function run(callback) {
	setInterval(callback, FPS);
	}

	function Square(x, y, size) {
	this.x = x;
	this.y = y;
	this.color = random_color();
	this.size = size;
	}

	Square.prototype.draw = function () {
	var half_size = this.size / 2,
	x = this.x - half_size,
	y = this.y - half_size;
	ctx.fillStyle = this.color;
	ctx.fillRect(x, y, this.size, this.size);
	};

	Square.prototype.change = function () {
	var new_size = this.size - 1;
	if (new_size) {
	squares.push(new Square(this.x, this.y, new_size));
	}
	};

	Square.prototype.step = function () {
	this.draw();
	this.change();
	}

	function check_growth() {
	if (Mouse.down) {
	growth += 1;
	if (growth > 100) {
	growth = 100;
	}
	} else {
	growth = 0;
	}
	}

	function animate_squares() {
	var squares_length = squares.length;
	while (squares_length--) {
	squares.shift().step();
	}
	}

	function add_square() {
	if (Mouse.has_changed()) {
	squares.push(new Square(Mouse.x, Mouse.y, size + growth));
	}
	}

	run(function () {
	animate_squares();
	check_growth();
	add_square();
	});

	document.body.addEventListener('keypress', function (e) {
	var a, image_data;
	if (e.keyCode === SPACE) {
	image_data = canvas.toDataURL("image/png");
	a = document.createElement("a");
	a.href = image_data;
	a.download = "square_image.png"
	a.click();
	}
	}, false)
	})();
	</script>
	</body>
	</html>