A Pen by max.

A-Pen-by-max.markdown

A Pen by max

A Pen by max on CodePen.

License.

index.html

<canvas id="myCanvas" width="1200" height="800"></canvas>

script.js

window.requestAnimFrame = (function(callback) {
  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };
})();


var canvas = document.getElementById("myCanvas"),
    ctx = canvas.getContext("2d");


var amount = 20,
    particle = [];
    trans = 0.4;

function Particles(x, y, distance, _color){
  this.x =x;;
  this.y =y;
  this.distance = distance;
  this.velocity = distance * (Math.random());
  this.radius = distance * 3;
  this.color = _color;
}

Particles.prototype.draw = function(){
  ctx.fillStyle = this.color;
  ctx.beginPath();
  ctx.arc(this.x,this.y, this.radius, 0, 2*Math.PI, false);
  ctx.fill();
}

function loop(){
  clearContext();
  for(i =0; i< particle.length; i++){
    var p = particle[i];
    
    (p.x > canvas.width) ? p.x =0 : p.x +=p.distance * (Math.random() * trans);
    (p.y > canvas.width) ? p.y =0 : p.y +=p.distance * (Math.random() * trans);
   
    for(j = i +1; j< particle.length; j++){
      p2 = particle[j];
      distance(p, p2);
    }
    
    
    function distance(p1, p2){
      var dx = p1.x-p2.x;
      var dy = p1.y-p2.y;
      
      var ax = dx/20000
          ay = dy/20000;
      
      
      if((dx + dy) < 500){
        // Draw the line
          ctx.beginPath();
          ctx.strokeStyle = p.color;
          ctx.moveTo(p.x, p.y);
          ctx.lineTo(p2.x, p2.y);
          ctx.stroke();
              
        p1.x -=ax;
        p2.x -=ax;
        p1.y -=ay;
        p2.y -=ay
      }
        
    }
      
    /*p.y -=1;*/
    
    /*p.x +=Math.sin(t)*1000; */
   /* (p.x > canvas.width) ? p.x -=1 : p.x +=1;*/
    p.draw();
  }
  
  requestAnimFrame(loop);
}

for(i=0; i < amount; i++){
  var randomColor = ["white", "blue", "white", "green", "red", "#eec41b", "#f32a2a", "#1beee2", "#ee661b"];
  var randomNum = Math.round( Math.random() * randomColor.length) + 1;

  
  ps= new Particles(Math.random() * canvas.width, Math.random()*canvas.height, Math.random() * 3, randomColor[randomNum]);
  
  particle.push(ps);
}

requestAnimFrame(loop);
clearContext = function(){
  ctx.clearRect(0,0,canvas.width,canvas.height);
}

style.css

body { background:#000;}
#canvas {
  
  
}