var c; // Don't change! var ctx; // Don't change! var t; // Don't change! var balls = []; // Don't change! var fps = 1000 / 30; // More or less FPS var maxR = 35; // Maximum ball radius var colours = ["blue", "green", "red", "orange", "yellow", "purple"]; // Their colours! function changefps(x) { fps = 1000 / x; clearInterval(t); t = setInterval(function() { animate(); }, fps); } // Set mouse coordinates var mouse = { x: undefined, y: undefined } // Update mouse coordinates when mouse moves window.addEventListener("mousemove", function(event) { mouse.x = event.x; mouse.y = event.y; }); // Shortcut function id(s) { return document.getElementById(s); } // Onload window.onload = function() { alert(" - This code is based on a YouTube tutorial: Animating The Canvas \n - If you lag, take a look in the global variables and in the window.onload function, I made very clear what you can change and what to do to decrease lag! "); c = id("animated"); var inner = { width: window.innerWidth, height: window.innerHeight } c.width = inner.width; c.height = inner.height; c.style.width = c.innerWidth = inner.width; c.style.height = c.innerHeight = inner.height; /* YOU CAN CHANGE THESE! */ // More or less balls (decrease value if lag so increase integer after the "/") var ballsnum = inner.width * inner.height / 250; // Radius from the mouse where balls are affected mouse.r = 25; /* FROM HERE YOU CAN'T ANYMORE! */ ctx = c.getContext("2d"); for(var i = 0; i < ballsnum; i++) { var rad = Math.floor(Math.random() * 5) + 1; var ball = new Ball(Math.floor(Math.random() * c.width), Math.floor(Math.random() * c.height), Math.floor(Math.random() * 6) - 3, Math.floor(Math.random() * 6) - 3, rad); balls[i] = ball; } t = setInterval(function() { animate(); }, fps); } function Ball(x, y, dx, dy, r) { this.x = x || 50; this.y = y || 50; this.dx = dx || 1; this.dy = dy || 2; this.r = r; this.minR = this.r; this.justChanged; this.colour = colours[Math.floor(Math.random() * colours.length)]; // Prevent balls stuck in the sides at spawning if(this.x + this.r >= c.width) { this.x -= this.r - 1; } else if(this.x - this.r < 0) { this.x += this.r + 1; } if(this.y + this.r >= c.height) { this.y -= this.r - 1; } else if(this.y - this.r < 0) { this.y += this.r + 1; } // Draw ball this.draw = function() { ctx.beginPath(); ctx.strokeStyle = ctx.fillStyle = this.colour; ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); ctx.closePath(); }; this.mouseClose = function() { this.mx = mouse.x - c.offsetLeft - c.dataset.bordersize; this.my = mouse.y - c.offsetTop - c.dataset.bordersize; if(this.x + mouse.r > this.mx && this.x - mouse.r < this.mx && this.r < maxR) { this.r++; } else if(this.r > this.minR) { this.r--; } if(this.y + mouse.r > this.my && this.y - mouse.r < this.my && this.r < maxR) { this.r++; } else if(this.r > this.minR) { this.r--; } }; // Update position this.updatePosition = function() { // If left/right wall, invert direction if((this.x + this.r >= c.width || this.x - this.r < 0)) { this.dx *= -1; } // If top/bottom wall, invert direction if((this.y + this.r >= c.height || this.y - this.r < 0)) { this.dy *= -1; } this.x += this.dx; this.y += this.dy; this.mouseClose(); this.draw(); }; } // Ball(); function animate() { // Clear canvas ctx.clearRect(0, 0, c.width, c.height); // Draw balls for(i = 0; i < balls.length; i++) { balls[i].updatePosition(); } }

Animated Canvas