alert('Code might run slow on older devices.'); alert("Don't forget to like and comment 😊"); $(document).ready(function (){ var canvas = document.querySelector('canvas'); var fps = 0; var shadowBlur = 120; var lowFps = false; var pop = new Audio('http://arnevk.sytes.net/sounds/pop.mp3'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var c = canvas.getContext('2d'); c.lineWidth = 2; function Circle(x, y, dx, dy, radius, R, G, B) { this.R = R; this.G = G; this.B = B; this.x = x; this.y = y; this.dx = dx; this.dy = dy; this.radius = radius; this.Rspeed = 1; this.Gspeed = 1; this.Bspeed = 1; this.draw = function () { c.beginPath(); c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); if(this.R >= 255) { this.Rspeed =- this.Rspeed; } if(this.R <= 0) { this.Rspeed =- this.Rspeed; } this.R += this.Rspeed; if(this.G >= 255) { this.Gspeed =- this.Gspeed; } if(this.G <= 0) { this.Gspeed =- this.Gspeed; } this.G += this.Gspeed; if(this.B >= 255) { this.Bspeed =- this.Bspeed; } if(this.B <= 0) { this.Bspeed =- this.Bspeed; } this.B += this.Bspeed; c.strokeStyle = "rgba(" + this.R + ", " + this.G + ", " + this.B + ", 1)"; c.shadowColor = "rgba(" + this.R + ", " + this.G + ", " + this.B + ", 1)"; c.shadowBlur = shadowBlur; c.shadowOffsetX = 0; c.shadowOffsetY = 0; c.fillStyle = "rgba(" + this.R + ", " + this.G + ", " + this.B + ", 1)"; c.fill(); c.stroke(); } this.update = function () { if(this.x + this.radius > innerWidth || this.x - radius < 0) { this.dx =- this.dx; } if(this.y + this.radius > innerHeight || this.y - radius < 0) { this.dy =- this.dy; } this.x += this.dx; this.y += this.dy; this.draw(); } } var circleArray = []; /* for(i=0;i<0;i++) { var R = Math.round(Math.random() * 255); var G = Math.round(Math.random() * 255); var B = Math.round(Math.random() * 255); var radius = (Math.random() * 30) + 10; var x = Math.random() * (innerWidth - radius * 2) + radius; var y = Math.random() * (innerHeight - radius * 2) + radius; var dx = (Math.random() - 0.5); var dy = (Math.random() - 0.5); circleArray.push(new Circle(x, y, dx, dy, radius ,R ,G ,B)); } */ function animate() { requestAnimationFrame(animate); c.clearRect(0, 0, innerWidth, innerHeight); fps++; for (var i = 0; i < circleArray.length; i++) { circleArray[i].update(); } } animate(); canvas.onmousedown = function (a) { pop.play(); var R = Math.round(Math.random() * 255); var G = Math.round(Math.random() * 255); var B = Math.round(Math.random() * 255); var radius = (Math.random() * 30) + 10; var x = a.pageX; var y = a.pageY; var dx = (Math.random() - 0.5); var dy = (Math.random() - 0.5); circleArray.push(new Circle(x, y, dx, dy, radius ,R ,G ,B)); $('#tapMe').fadeOut(2000); } function noscroll() { window.scrollTo( 0, 0 ); } setInterval(function () { if(fps < 10) { lowFps = true; $('#fps').html('fps: ' + fps + '
Low power mode'); } if(lowFps === true) { shadowBlur = 0; $('#fps').html('fps: ' + fps + '
Low power mode'); } else { shadowBlur = fps * 1.5; $('#fps').html('fps: ' + fps); } fps = 0; }, 1000); window.addEventListener('scroll', noscroll); })

Floating bubbles &amp;#128309;&amp;#128308;⚫⚪

Floating bubbles 🔵🔴⚫⚪