/**
 * JS for Hexocet
 * 
 * @author Alexandre Andrieux
 * @since 2017-01-05
 */

var Hexocet = {
  seeds: [],
  stepCount: 0,
  birthPeriod: 2,
  hexSize: 50,
  targetBounceChance: 0.02,
  springStiffness: 0.01,
  viscosity: 0.8,
  particleMaxOpacity: 0.05,
  historyLength: 10,
  maxPop: 100
};
Hexocet.setupCanvas = function() {
  // Initialize own canvas
	var canvas = document.createElement('canvas');
	canvas.id = 'hexocet';
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	document.body.appendChild(canvas);

  // Get and store canvas context
	this.canvas = document.getElementById(canvas.id);
	this.ctx = this.canvas.getContext('2d');
  
  // Scale parameter
  this.canvasBase = Math.min(this.canvas.width, this.canvas.height);
  // Central point coordinates
  this.xC = this.canvas.width / 2;
  this.yC = this.canvas.height / 2;
};
Hexocet.hexCoordsToXY = function(Hx, Hy) {
  // Hx and Hy are integers corresponding to vertices coordinates in Hex space
  var xPrime, yPrime, XYprime, X, Y, XY;
  var isSumEven = ( (parseInt(Hx) + parseInt(Hy)) % 2 == 0 ? 1 : 0);
  xPrime = 1 * Hx;
  yPrime = 1 /Math.sqrt(3) * (3*Hy + 1 + isSumEven);
  
  XYprime = new Victor(xPrime * this.hexSize, yPrime * this.hexSize);
  XY = XYprime.clone().rotateDeg(30);
  
  return { x: XY.x, y: XY.y };
};
Hexocet.XYtoHexCoords = function(x, y) {
  // Approximate
  var XYprime = new Victor(x / this.hexSize, y / this.hexSize).rotateDeg(-30);
  var Hx = XYprime.x,
      Hy = Math.sqrt(3) * XYprime.y/3;
  return { Hx: Math.floor(Hx), Hy: Math.floor(Hy) };
};
Hexocet.update = function() {
  this.stepCount++;
  
  // Birthrate management
	if (this.stepCount % this.birthPeriod == 0 && this.seeds.length < this.maxPop) {
    this.birth();
  }
  
  this.move();
  this.draw();
};
Hexocet.birth = function(xBirth, yBirth, seed) {
  // Give birth around the canvas center
  var targetH = this.XYtoHexCoords(xBirth || this.xC, yBirth || this.yC);
  // I said AROUND
  var spreadArea = 1;
  targetH.Hx += Math.floor(spreadArea * (-0.5 + Math.random()));
  targetH.Hy += Math.floor(spreadArea * (-0.5 + Math.random()));
  // Convert in Cartesian coords
  var targetXY = this.hexCoordsToXY(targetH.Hx, targetH.Hy);
  
  var x = targetXY.x;
  var y = targetXY.y;
  
  var seed = seed || {
    xLast: x,
    x: x,
    xSpeed: 0,
    yLast: y,
    y: y,
    ySpeed: 0,
    targetHx: targetH.Hx,
    targetHy: targetH.Hy,
    age: 0,
    hue: 205 + 15 * Math.sin(this.stepCount / 50),
    posHistory: [{ x: x, y: y }, { x: x, y: y }]
  };
  this.seeds.push(seed);
};
Hexocet.move = function() {
  // Move all particles
  for (var i = 0; i < this.seeds.length; i++) {
    var seed = this.seeds[i];
    // Get older
    seed.age++;
    // Push last position into posHistory array
     seed.posHistory.push({
       x: seed.x,
       y: seed.y
     });
    if (seed.posHistory.length > this.historyLength) {
      seed.posHistory.shift(); // Remove first element
    }
    
    seed.xLast = seed.x;
    seed.yLast = seed.y;
    
    // Randomly change target
    if (Math.random() < this.targetBounceChance) {
      // Reset age
      seed.age = 0;
      // Either move Hx or Hy, twice more likely to change Hx
      if (Math.random() > 0.33) {
        // Move Hx
        seed.targetHx += (Math.random() > 0.5 ? 1 : -1);
      } else {
        // Increase Hy + Hx is even
        if ((seed.targetHx + seed.targetHy) % 2 == 0) {
          seed.targetHy += 1;
        } else {
          seed.targetHy -= 1;
        }
        
      }
    }
    
    // Acceleration based on target
    var targetXY = this.hexCoordsToXY(seed.targetHx, seed.targetHy);
    // Spring
    var K = this.springStiffness;
    var accX = - K * (seed.x - targetXY.x);
    var accY = - K * (seed.y - targetXY.y);
    // Viscosity
    var visc = this.viscosity;
    accX -= visc * seed.xSpeed;
    accY -= visc * seed.ySpeed;
    // Speed
    seed.xSpeed += accX;
    seed.ySpeed += accY;
    
    // Position, with added canvas base size in order to maintain patterns accross zoom levels
    seed.x += 0.01 * seed.xSpeed * this.canvasBase;
    seed.y += 0.01 * seed.ySpeed * this.canvasBase;
  }
};
Hexocet.draw = function() {
  // Add translucid layer for trace effect
  var opa = 0.05;
  this.ctx.rect(0, 0, this.canvas.width, this.canvas.height);
  this.ctx.fillStyle = "rgba(0, 0, 0, " + opa + ")";
  this.ctx.fill();
  
  for (var key in this.seeds) {
    var seed = this.seeds[key];

    // HSLA
    var hsla = {
      h: seed.hue,
      s: '90%',
      l: '50%',
      a: this.particleMaxOpacity
    };

    // Line width
    var wLine = 1;
    
    // Loop history to draw positions
    for (var p = 0; p < seed.posHistory.length; p++) {
      var a = hsla.a * p / seed.posHistory.length;
      var rad = 2 + seed.age /5;
      // Stroke
      this.ctx.beginPath();
      this.ctx.strokeStyle = 'hsla(' + hsla.h + ', ' + hsla.s + ', ' + hsla.l + ", " + a + ")";
      this.ctx.arc(seed.posHistory[p].x, seed.posHistory[p].y, rad, 0, 2 * Math.PI, true);
      this.ctx.stroke();
    }
    
  }
};
Hexocet.testTheGrid = function() {
  // Line width
  var wLine = 5;

  // Stroke
  this.ctx.lineWidth = wLine;
  this.ctx.lineCap = "round";
  
  for (var i = -100; i < 100; i++) {
    for (var j = -100; j < 100; j++) {
      // HSLA
      var hsla = {
        h: 20 * j,
        s: '50%',
        l: '100%',
        a: 0.5
      };
      this.ctx.strokeStyle = 'hsla(' + hsla.h + ', ' + hsla.s + ', ' + hsla.l + ", " + hsla.a + ")";
      this.ctx.beginPath();
      var XY = this.hexCoordsToXY(i, j);
      this.ctx.moveTo(XY.x, XY.y);
      this.ctx.lineTo(XY.x, XY.y);
      this.ctx.stroke();
    }
  }
};

jQuery(document).ready(function() {
  Hexocet.setupCanvas();
  
  var frame = function() {
    Hexocet.update();
    window.requestAnimationFrame(frame);
  };
  frame();
  
  //Hexocet.testTheGrid();
  
  // Particle spread on click
  jQuery('canvas#hexocet').on('mousemove', function(event) {
    var x = event.pageX,
        y = event.pageY;
    Hexocet.birth(x, y)
  });
});