Created
October 20, 2014 21:08
-
-
Save dafrancis/8eaf86cd1bb8e2ea7e90 to your computer and use it in GitHub Desktop.
squares
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment