<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> <canvas id="canvs646785"></canvas> <script> window.requestAnimFrame = (function(callback) { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {window.setTimeout(callback, 1000 / 60);}; })(); canvas = document.getElementById("canvs646785"); w = 500; h = 500; canvas.width =w; canvas.height =h; context = canvas.getContext("2d"); var particles = []; var particle_count = 1; for(var i = 0; i < particle_count; i++){ particles.push(new particle(i)); } function particle(v){ this.index=v; this.speed = {x: (Math.random()*10)-4.5, y: (Math.random()*10)-4.5}; this.location = {x: Math.random()*w, y: Math.random()*h}; this.radius = 20-(Math.random()*10); this.fillColor= '#ffffff'; } animate(); function animate() { // context.clearRect(0, 0, canvas.width, canvas.height); context .fillStyle = "rgba(0, 0, 0, 0.3)"; context .fillRect(0, 0, w, h); context.globalCompositeOperation = "source-over"; for(var i = 0; i < particles.length; i++){ var p = particles[i]; context.beginPath(); context.fillStyle =p.fillColor; context.arc(p.location.x, p.location.y, p.radius, Math.PI*2, false); context.fill(); p.location.x += p.speed.x; p.location.y += p.speed.y; if(p.location.x<0 || p.location.x>w ){ p.speed.x=-p.speed.x; }else if(p.location.y<0 || p.location.y>h){ p.speed.y=-p.speed.y; } for(var j = 0; j < particles.length; j++){ var q = particles[j]; if(p.index != q.index){ var vec=Math.sqrt(Math.pow((p.location.x-q.location.x),2)+Math.pow((p.location.y-q.location.y),2)); var ran=p.radius+q.radius; if(vec<=ran ){ p.speed.x=-p.speed.x; p.speed.y=-p.speed.y; q.speed.x=-q.speed.x; q.speed.y=-q.speed.y; } } } } requestAnimFrame(function() {animate();}); } </script> </body> </html>