/*
  Click and drag to attract
  Right click to repulse
  Mouse-wheel click to create a time dilation field
  Use the Controls to decrease or increase
  the particle count to tweak performance.
*/

+(function(root) {
  'use strict';
  var Vector3D = function Vector3D(x, y, z) {
    this.set(x, y, z);
  }, v3dp = Vector3D.prototype;

  v3dp.dot2d = function(x, y) {
    return ((this.x * x) + (this.y * y));
  };

  v3dp.dot3d = function(x, y, z) {
    return ((this.x * x) + (this.y * y) + (this.z * z));
  };

  v3dp.set = function(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
    
    return this;
  };

  v3dp.add = function(other) {
    if(typeof other === "number") {
      this.x += other, this.y += other, this.z += other;
      return this;
    }
    this.x += other.x, this.y += other.y, this.z += other.z;
    return this;
  };

  v3dp.sub = function(other) {
    if(typeof other === "number") {
      this.x -= other, this.y -= other, this.z -= other;
      return this;
    }
    this.x -= other.x, this.y -= other.y, this.z -= other.z;
    return this;
  };

  v3dp.mul = function(other) {
    if(typeof other === "number") {
      this.x *= other, this.y *= other, this.z *= other;
      return this;
    }
    this.x *= other.x, this.y *= other.y, this.z *= other.z;
    return this;
  };

  v3dp.div = function(other) {
    if(typeof other === "number") {
      this.x /= other, this.y /= other, this.z /= other;
      return this;
    }
    this.x /= other.x, this.y /= other.y, this.z /= other.z;
    return this;
  };

  v3dp.move = function(dest) {
    if(dest instanceof Vector3D) {
      dest.x = this.x, dest.y = this.y, dest.z = this.z;
    }
    return this;
  };

  v3dp.within2d = function(bounds) {
    return (this.x >= 0 && this.x < bounds.x && this.y >= 0 && this.y < bounds.y);
  };

  v3dp.wrap2d = function(bounds) {
    if(this.x > bounds.x) {
      this.x = 0;
      return true;
    }

    if(this.x < 0) {
      this.x = bounds.x;
      return true;
    }

    if(this.y > bounds.y) {
      this.y = 0;
      return true;
    }

    if(this.y < 0) {
      this.y = bounds.y;
      return true;
    }
  };

  v3dp.eq = function(other) {
    return (other instanceof Vector3D) && this.x === other.x && this.y === other.y && this.z === other.z;
  };
  
  v3dp.distance = function(other) {
    var dx = (this.x - other.x),
        dy = (this.y - other.y);
    
    return Math.sqrt(dx * dx + dy * dy);
  };
  
  v3dp.clone = function() {
    return new Vector3D(this.x, this.y, this.z);
  };

  root.Vector3D = Vector3D;
}(window));

+(function(root) {
  'use strict';
  // a simple non-optimized Perlin Simplex Noise. I wrote this
  // to understand Simplex Noise a bit more.

  // fully self-contained state, so you can influence the outcome
  // of each simplex noise state
  var Perlin = function Perlin() {
    this.grad3 = [
      new Vector3D(1,1,0), new Vector3D(-1,1,0), new Vector3D(1,-1,0), new Vector3D(-1,-1,0),
      new Vector3D(1,0,1), new Vector3D(-1,0,1), new Vector3D(1,0,-1), new Vector3D(-1,0,-1),
      new Vector3D(0,1,1), new Vector3D(0,-1,1), new Vector3D(0,1,-1), new Vector3D(0,-1,-1)
    ];

    this.p = [
      0x97, 0xa0, 0x89, 0x5b, 0x5a, 0x0f, 0x83, 0x0d, 0xc9, 0x5f, 0x60, 0x35, 0xc2, 0xe9, 0x07, 0xe1, 
      0x8c, 0x24, 0x67, 0x1e, 0x45, 0x8e, 0x08, 0x63, 0x25, 0xf0, 0x15, 0x0a, 0x17, 0xbe, 0x06, 0x94, 
      0xf7, 0x78, 0xea, 0x4b, 0x00, 0x1a, 0xc5, 0x3e, 0x5e, 0xfc, 0xdb, 0xcb, 0x75, 0x23, 0x0b, 0x20, 
      0x39, 0xb1, 0x21, 0x58, 0xed, 0x95, 0x38, 0x57, 0xae, 0x14, 0x7d, 0x88, 0xab, 0xa8, 0x44, 0xaf, 
      0x4a, 0xa5, 0x47, 0x86, 0x8b, 0x30, 0x1b, 0xa6, 0x4d, 0x92, 0x9e, 0xe7, 0x53, 0x6f, 0xe5, 0x7a, 
      0x3c, 0xd3, 0x85, 0xe6, 0xdc, 0x69, 0x5c, 0x29, 0x37, 0x2e, 0xf5, 0x28, 0xf4, 0x66, 0x8f, 0x36, 
      0x41, 0x19, 0x3f, 0xa1, 0x01, 0xd8, 0x50, 0x49, 0xd1, 0x4c, 0x84, 0xbb, 0xd0, 0x59, 0x12, 0xa9, 
      0xc8, 0xc4, 0x87, 0x82, 0x74, 0xbc, 0x9f, 0x56, 0xa4, 0x64, 0x6d, 0xc6, 0xad, 0xba, 0x03, 0x40, 
      0x34, 0xd9, 0xe2, 0xfa, 0x7c, 0x7b, 0x05, 0xca, 0x26, 0x93, 0x76, 0x7e, 0xff, 0x52, 0x55, 0xd4, 
      0xcf, 0xce, 0x3b, 0xe3, 0x2f, 0x10, 0x3a, 0x11, 0xb6, 0xbd, 0x1c, 0x2a, 0xdf, 0xb7, 0xaa, 0xd5, 
      0x77, 0xf8, 0x98, 0x02, 0x2c, 0x9a, 0xa3, 0x46, 0xdd, 0x99, 0x65, 0x9b, 0xa7, 0x2b, 0xac, 0x09, 
      0x81, 0x16, 0x27, 0xfd, 0x13, 0x62, 0x6c, 0x6e, 0x4f, 0x71, 0xe0, 0xe8, 0xb2, 0xb9, 0x70, 0x68, 
      0xda, 0xf6, 0x61, 0xe4, 0xfb, 0x22, 0xf2, 0xc1, 0xee, 0xd2, 0x90, 0x0c, 0xbf, 0xb3, 0xa2, 0xf1, 
      0x51, 0x33, 0x91, 0xeb, 0xf9, 0x0e, 0xef, 0x6b, 0x31, 0xc0, 0xd6, 0x1f, 0xb5, 0xc7, 0x6a, 0x9d, 
      0xb8, 0x54, 0xcc, 0xb0, 0x73, 0x79, 0x32, 0x2d, 0x7f, 0x04, 0x96, 0xfe, 0x8a, 0xec, 0xcd, 0x5d, 
      0xde, 0x72, 0x43, 0x1d, 0x18, 0x48, 0xf3, 0x8d, 0x80, 0xc3, 0x4e, 0x42, 0xd7, 0x3d, 0x9c, 0xb4
    ];

    this.permutation = new Array(512);
    this.gradP       = new Array(512);

    // skew and unskew factors for 2D or 3D, can be modified per state!
    this.F2 = (0.5 * (Math.sqrt(3) - 1));
    this.G2 = ((3 - Math.sqrt(3)) / 6);
    this.F3 = (1 / 3);
    this.G3 = (1 / 6);
  }, pp = Perlin.prototype;

  pp.init = function(prng) {
    if(typeof prng !== "function") {
      throw new TypeError("prng needs to be a function returning an int between 0 and 255");
    }

    for(var i = 0; i < 256; i += 1) {
      var randval = (this.p[i] ^ prng());
      this.permutation[i] = this.permutation[i + 256] = randval;
      this.gradP[i] = this.gradP[i + 256] = this.grad3[randval % this.grad3.length];
    }
  };

  // I removed the pp.simplex2d function, because I don't need it in this project
  // pp.simplex2d = function(x, y) {};

  pp.simplex3d = function(x, y, z) {
    var n0, n1, n2, n3, i1, j1, k1, i2, j2, k2,
        x1, y1, z1, x2, y2, z2, x3, y3, z3,
        gi0, gi1, gi2, gi3, t0, t1, t2, t3,
        s = ((x + y + z) * this.F3),
        i = Math.floor(x + s), j = Math.floor(y + s), k = Math.floor(z + s),
        t = ((i + j + k) * this.G3),
        x0 = (x - i + t), y0 = (y - j + t), z0 = (z - k + t);

    if(x0 >= y0) {
      if(y0 >= z0)      { 
        i1=1; j1=0; k1=0; i2=1; j2=1; k2=0; 
      } else if(x0 >= z0) { 
        i1=1; j1=0; k1=0; i2=1; j2=0; k2=1; 
      } else { 
        i1=0; j1=0; k1=1; i2=1; j2=0; k2=1; 
      }
    } else {
      if(y0 < z0) { 
        i1=0; j1=0; k1=1; i2=0; j2=1; k2=1; 
      } else if(x0 < z0) { 
        i1=0; j1=1; k1=0; i2=0; j2=1; k2=1; 
      } else { 
        i1=0; j1=1; k1=0; i2=1; j2=1; k2=0; 
      }
    }

    x1 = (x0 - i1 + this.G3), y1 = (y0 - j1 + this.G3), z1 = (z0 - k1 + this.G3);
    x2 = (x0 - i2 + 2 * this.G3), y2 = (y0 - j2 + 2 * this.G3), z2 = (z0 - k2 + 2 * this.G3);
    x3 = (x0 - 1 + 3 * this.G3), y3 = (y0 - 1 + 3 * this.G3), z3 = (z0 - 1 + 3 * this.G3);

    i &= 255, j &= 255, k &= 255;

    gi0 = this.gradP[i + this.permutation[j + this.permutation[k]]];
    gi1 = this.gradP[i + i1 + this.permutation[j + j1 + this.permutation[k + k1]]];
    gi2 = this.gradP[i + i2 + this.permutation[j + j2 + this.permutation[k + k2]]];
    gi3 = this.gradP[i + 1 + this.permutation[j + 1 + this.permutation[k + 1]]];

    t0 = (0.6 - x0 * x0 - y0 * y0 - z0 * z0);
    t1 = (0.6 - x1 * x1 - y1 * y1 - z1 * z1);
    t2 = (0.6 - x2 * x2 - y2 * y2 - z2 * z2);
    t3 = (0.6 - x3 * x3 - y3 * y3 - z3 * z3);
    n0 = (t0 < 0 ? 0 : (t0 *= t0, t0 * t0 * gi0.dot3d(x0, y0, z0)));
    n1 = (t1 < 0 ? 0 : (t1 *= t1, t1 * t1 * gi1.dot3d(x1, y1, z1)));
    n2 = (t2 < 0 ? 0 : (t2 *= t2, t2 * t2 * gi2.dot3d(x2, y2, z2)));
    n3 = (t3 < 0 ? 0 : (t3 *= t3, t3 * t3 * gi3.dot3d(x3, y3, z3)));

    return (32 * (n0 + n1 + n2 + n3));
  };

  root.Perlin = Perlin;
}(window));

;(function(root) {
  'use strict';

  var MouseMonitor = function(element) {
    this.position = new Vector3D(0, 0, 0);
    this.state    = {left: false, middle: false, right: false};
    this.element  = element;
    
    var that = this;
    element.addEventListener('mousemove', function(event) {
      var dot, eventDoc, doc, body, pageX, pageY;
      event = event || window.event;
      if (event.pageX == null && event.clientX != null) {
        eventDoc = (event.target && event.target.ownerDocument) || document;
        doc = eventDoc.documentElement;
        body = eventDoc.body;
        event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
        event.pageY = event.clientY + (doc && doc.scrollTop  || body && body.scrollTop  || 0) - (doc && doc.clientTop  || body && body.clientTop  || 0 );
      }

      that.position.x = event.pageX;
      that.position.y = event.pageY;
    });

    element.addEventListener('contextmenu', function(event) {
      return event.preventDefault();
    });
    
    element.addEventListener('mousedown', function(event) {
      if(event.which === 1) that.state.left = true;
      if(event.which === 2) that.state.middle = true;
      if(event.which === 3) that.state.right = true;
      
      return event.preventDefault();
    });

    element.addEventListener('mouseup', function(event) {
      that.state.left = that.state.middle = that.state.right = false;
      
      return event.preventDefault();
    });
  };
  
  root.MouseMonitor = MouseMonitor;
}(window));

+(function(root) {
  'use strict';
  
  var Particle = function Particle(generator, bounds, rctx, mon) {
    this.p = new Vector3D(); // position
    this.t = new Vector3D(); // trail to
    this.v = new Vector3D(); // velocity
    this.g = generator; // simplex noise generator
    this.b = bounds;    // window bounds for wrapping
    this.r = rctx;      // random context
    this.m = mon;       // mouse position monitor
    
    this.reset();
  }, pp = Particle.prototype;

  pp.reset = function() {
    // new random position
    this.p.x = this.t.x = Math.floor(this.r.random() * this.b.x);
    this.p.y = this.t.y = Math.floor(this.r.random() * this.b.y);
    
    // reset velocity
    this.v.set(1, 1, 0);
    
    // iteration and life
    this.i = 0; 
    this.l = this.r.random(1000, 10000); // life time before particle respawns
  };

  pp.step = function() {
    if(this.i++ > this.l) {
      this.reset();
    }
    
    var xx = (this.p.x / 200),
        yy = (this.p.y / 200),
        zz = (Date.now() / 5000),
        a  = (this.r.random() * Math.Tau),
        rnd= (this.r.random()  / 4);

    // calculate the new velocity based on the noise
    // random velocity in a random direction
    this.v.x += (rnd * Math.sin(a) + this.g.simplex3d(xx, yy, -zz)); // sin or cos, no matter
    this.v.y += (rnd * Math.cos(a) + this.g.simplex3d(xx, yy, zz));  // opposite zz's matters
    
    if(this.m.state.left) {
      // add a difference between mouse pos and particle pos (a fraction of it) to the velocity.
      this.v.add(this.m.position.clone().sub(this.p).mul(.00085));
    }
    
    // repulse the particles if the right mouse button is down and the distance between
    // the mouse and particle is below an arbitrary value between 200 and 250.
    if(this.m.state.right && this.p.distance(this.m.position) < this.r.random(200, 250)) {
      this.v.add(this.p.clone().sub(this.m.position).mul(.02));
    }
    
    // time dilation field, stuff moves at 10% here, depending on distance
    if(this.m.state.middle) {
      var d = this.p.distance(this.m.position),
          l = this.r.random(200, 250);
      
      if(d < l) {
        this.v.mul(d / l);
      }
    }
    
    // keep a copy of the current position, for a nice line between then and now and add velocity
    this.p.move(this.t).add(this.v.mul(.94)); // slow down the velocity slightly

    // wrap around the edges
    if(this.p.wrap2d(this.b)) {
      this.p.move(this.t);
    }
  };

  // plot the line, but do not stroke yet.
  pp.render = function(context) {
    context.moveTo(this.t.x, this.t.y);
    context.lineTo(this.p.x, this.p.y);
  };

  root.Particle = Particle;
}(window));

window.addEventListener('load', function() {
  var rctx = new SmallPRNG(+new Date()), // random generator, see ref
      p = new Perlin(), // simplex noise generator
      canvas = document.getElementById("swarm"),
      context = canvas.getContext("2d"),
      stats = new Stats(),
      monitor = new MouseMonitor(canvas),
      gui = new dat.GUI(),
      hue = 0, particles = [], resize,
      width, height, bounds = new Vector3D(0, 0, 0),
      settings = {
        particleNum: 5000,
        fadeOverlay: true,
        rotateColor: true,
        staticColor: {r: 0, g: 75, b: 50},
        staticColorString: 'rgba(0, 75, 50, 0.55)'
      };

  stats.setMode(0); // Start off with FPS mode

  // Place the statistics at the bottom right.
  stats.domElement.style.position = 'absolute';
  stats.domElement.style.right = '5px';
  stats.domElement.style.bottom = '5px';

  document.body.appendChild(stats.domElement);
  
  // dat.gui stuff, 2 folders with a few properties
  var f1 = gui.addFolder('Particles'),
      f2 = gui.addFolder('Colors');
  
  f1.add(settings, 'particleNum', 1000, 15000).step(10).name("Particles").onChange(function() {
    if(settings.particleNum < particles.length) {
      var toDelete = (particles.length - settings.particleNum);
      particles.splice(particles.length - toDelete, toDelete);
    } else {
      for(var i = particles.length; i < settings.particleNum; i += 1) {
        particles.push(new Particle(p, bounds, rctx, monitor));
      }
    }
  });
  
  f2.add(settings, 'fadeOverlay').name("Fade Clear").onChange(function() {
    if(settings.fadeOverlay) {
      resize();
    }
  });
  
  f2.add(settings, 'rotateColor').name("Rotate Color");
  f2.addColor(settings, 'staticColor').name("Static Color").onChange(function() {
    settings.staticColorString = 'rgba(' + 
      Math.floor(settings.staticColor.r) + ', ' + 
      Math.floor(settings.staticColor.g) + ', ' + 
      Math.floor(settings.staticColor.b) + ', ' + .55 + ')';
  });
  
  f1.open();
  f2.open();
  gui.close();
  
  // seed perlin with random bytes from SmallPRNG
  p.init(function() {
    // called for each permutation (256 times)
    return rctx.random(0, 255);
  });

  resize = function() {
    // resize the canvas
    canvas.width  = width  = bounds.x = window.innerWidth;
    canvas.height = height = bounds.y = window.innerHeight;
    
    // remove this and see weird gorgeous stuffs, the history of particles.
    context.fillStyle = '#ffffff';
    context.fillRect(0, 0, width, height);
  }; resize();

  window.addEventListener('resize', resize); 

  // generate a few particles
  for(var i = 0; i < settings.particleNum; i += 1) {
    particles.push(new Particle(p, bounds, rctx, monitor));
  }
  
  +(function render() {
    requestAnimFrame(render);

    stats.begin();
      context.beginPath();
        // render each particle and trail
        for(var i = 0; i < particles.length; i += 1) {
          particles[i].step(), particles[i].render(context);
        }

        context.globalCompositeOperation = 'source-over';
        if(settings.fadeOverlay) {
          context.fillStyle = 'rgba(0, 0, 0, .085)';
        } else {
          context.fillStyle = 'rgba(0, 0, 0, 1)';
        }
        context.fillRect(0, 0, width, height);

        context.globalCompositeOperation = 'lighter';
        if(settings.rotateColor) {
          context.strokeStyle = 'hsla(' + hue + ', 75%, 50%, .55)';
        } else {
          context.strokeStyle = settings.staticColorString;
        }
        context.stroke();
      context.closePath();
    
    stats.end();
    
    hue = ((hue + .5) % 360);
  }());
});