Difference between revisions of "Template:Cologne-Duesseldorf/particles"

Revision as of 18:22, 31 October 2017

(function() {

 var particlesQuantity = 100,
   velocity = 0.3,
   maxRadius = 20;

 var canvas = document.getElementById("canvas"),
   context,
   particles = [];

 if (canvas && canvas.getContext) {
   context = canvas.getContext("2d");

   for (var i = 0; i < particlesQuantity; i++) {
     var alpha = Math.random();

     particles.push({
       x: Math.round(Math.random() * window.innerWidth),
       y: Math.round(Math.random() * window.innerHeight),
       velx: Math.random() * velocity * 2 - velocity,
       vely: Math.random() * velocity * 2 - velocity,
       radius: (1 - alpha) * maxRadius,
       color: "rgba(" + [20, 147, 117, alpha].join(",") + ")"
     });
   }
   initialize();
 }

 function resizeCanvas() {
   canvas.width = window.innerWidth;
   canvas.height = window.innerHeight;
 }

 function render() {
   context.clearRect(0, 0, window.innerWidth, window.innerHeight);

   var particle, len = particles.length;

   for (var i = 0; i < len; i++) {
     particle = particles[i];
     if (particle.x < 0) {
       particle.velx = velocity + Math.random();
     } else if (particle.x > window.innerWidth) {
       particle.velx = -velocity - Math.random();
     }

     if (particle.y < 0) {
       particle.vely = velocity + Math.random();
     } else if (particle.y > window.innerHeight) {
       particle.vely = -velocity - Math.random();
     }
     particle.x += particle.velx;
     particle.y += particle.vely;

     context.fillStyle = particle.color;
     context.beginPath();
     context.arc(
       particle.x,
       particle.y,
       particle.radius,
       0,
       Math.PI * 2,
       true
     );
     context.closePath();
     context.fill();
   }

   context.save();
   context.restore();
 }

 function distanceBetween(a, b) {
   var dx = Math.pow(a.x - b.x, 2),
     dy = Math.pow(a.y - b.y, 2);
   return Math.sqrt(dx + dy);
 }

 function initialize() {
   window.addEventListener("resize", resizeCanvas, false);
   window.requestAnimFrame = (function() {
     return (
       window.requestAnimationFrame ||
       window.webkitRequestAnimationFrame ||
       window.mozRequestAnimationFrame ||
       window.oRequestAnimationFrame ||
       window.msRequestAnimationFrame ||
       function(callback) {
         window.setTimeout(callback, 1000 / 60);
       }
     );
   })();

   (function animloop() {
     requestAnimFrame(animloop);
     render();
   })();

   resizeCanvas();
 }

})();