var b = document.getElementById("myCanvas"); var c = b.getContext("2d"); function Box(x, y, size, a, dx, dy, da) { this.x = x; this.y = y; this.size = size; this.angle = a; this.dx = dx; this.dy = dy; this.da = da; this.update = function() { this.angle += this.da; this.x = this.x + this.dx; this.y = this.y + this.dy; if (this.x < 0 || this.x + this.size > w) { this.dx = -this.dx; this.da = -this.da; } if (this.y < 0 || this.y + this.size > h) { this.dy = -this.dy; this.da = -this.da; } this.stroke(); }; this.stroke = function() { c.save(); var x = this.x + this.size / 2; var y = this.y + this.size / 2; c.translate(x, y); c.rotate(this.angle); c.strokeStyle = "#ffcd8a"; c.strokeRect(-this.size / 2, -this.size / 2, this.size, this.size); c.restore(); }; } var timeStep = 50; var w = c.canvas.width; var h = c.canvas.height; var cmTID; function updateAll() { c.clearRect(0, 0, w, h); for (var i = 0; i < boxes.length; i = i + 1) { boxes[i].update(); } clearTimeout(cmTID); cmTID = setTimeout(updateAll, timeStep); } var boxes = []; var s = 80; for (var i = 0; i < 3; i = i + 1) { var x = Math.random() * (w - s); var y = Math.random() * (h - s); var a = Math.random() * 2 - 1; var dx = Math.random() * 2 - 1; var dy = Math.random() * 2 - 1; var da = 0.1 * (Math.random() * 2 - 1); boxes.push(new Box(x, y, s, a, dx, dy, da)); } updateAll();