<div id="controls">
</div>

* { margin:0; padding:0; } 
html, body { width:100%; height:100%; overflow: hidden;} 
canvas { display:block; }
#controls {
  margin: 20px;
  position: absolute;
  top: 0; left: 0;
  color: white;
}

var drag = .95;
var grav = 50;
var m = 2;
var distmod = .02;
var numParticles = 10000;

var points = [];

function Particle(x, y){
  this.x = x;
  this.y = y;
  this.goalX = x + 0;
  this.goalY = y + 0;
  this.dx = 0;
  this.dy = 0;
  
  this.tick = function(){
    
    this.x += this.dx;
    this.y += this.dy;
    
    var a = atan2(this.goalY - this.y, this.goalX - this.x);
    if (abs(this.x - this.goalX) + abs(this.y - this.goalY) > 10){
      this.dx += Math.cos(a);
      this.dy += Math.sin(a);
    }
    
    this.dx *= drag;
    this.dy *= drag;
    if (this.x < 0 || this.x > width){
      this.dx *= -1;
      this.x *= -1;
      if (this.x < 0) this.x += width*2;
    }
    if (this.y < 0 || this.y > height){
      this.dy *= -1;
      this.y *= -1;
      if (this.y < 0) this.y += height*2;
    }
  }
  
  this.addVelocity = function(){
    var a = Math.atan2(mouseY - this.y, mouseX - this.x);
    var d = sDist(mouseX, mouseY, this.x, this.y)*distmod;
    var vel = min(grav/d*d, m);
    this.dx += Math.cos(a)*vel;
    this.dy += Math.sin(a)*vel;
  }
  
  this.render = function(){
    point(floor(this.x), floor(this.y));
  }
}

function setup(){
  createCanvas(WEBGL);
  colorMode(HSB);
  windowResized();
  init();
}

function init(){
  for (var i = 0; i < numParticles; i++){
    points.push(new Particle(random(width), random(height)));
  }
}

function sDist(x1, y1, x2, y2){
  return x1*x2 + y1*y2;
}

function draw(){
  background(0);
  stroke(100);
  for (var i = 0; i < points.length; i++){
    var p = points[i];
    p.tick();
    if (mouseIsPressed) p.addVelocity();
    p.render();
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  pixelDensity(1);
}