const mouse = {
    x: 0,
    y: 0,
};
  
window.addEventListener('mousemove', function(e){
    mouse.x = e.x;
    mouse.y = e.y;
});

let canvas;
let ctx;
let flowfield;
let flowfieldAnimation = null;

function startFlowfieldAnimation() {
    if (flowfieldAnimation != null) cancelAnimationFrame(flowfieldAnimation);

    // canvas.width = window.innerWidth;
    // canvas.height = window.innerHeight;

    canvas.width = 300;
    canvas.height = 400;

    flowfield = new FlowfieldEffect(ctx, canvas.width, canvas.height);
    flowfield.animate(0);
}

window.addEventListener('resize', function(e){
    // startFlowfieldAnimation();
});
  
window.onload = function(){
  canvas = document.getElementById('canvas1');
  ctx = canvas.getContext('2d');

  startFlowfieldAnimation();
}

class FlowfieldEffect {
  #ctx;
  #width;
  #height;
  #count;
  #radius;

  constructor(ctx, width, height, gradient) {
      this.#ctx = ctx;
      this.#ctx.lineWidth = 0.3;
      this.#width = width;
      this.#height = height;
      this.gradient;
      this.#createGradient();
      this.#ctx.strokeStyle = this.gradient;

      this.#radius = 1.9; // 1.9
      this.vr = 0.03;
      this.cellSize = 10;

      this.interval = 1000/60;
      this.timer = 0;
      this.lastTime = 0;

      this.a = Math.random() * 4 - 2;
      this.b = Math.random() * 4 - 2;
      this.c = Math.random() * 4 - 2;
      this.d = Math.random() * 4 - 2;
  }

  #createGradient(){
      this.gradient = this.#ctx.createLinearGradient(0, 0,this.#width, this.#height);
      this.gradient.addColorStop("0.1","#ff5c33");
      this.gradient.addColorStop("0.2", "#ff66b3");
      this.gradient.addColorStop("0.4", "#ccccff");
      this.gradient.addColorStop("0.6", "#b3ffff");
      this.gradient.addColorStop("0.8", "#80ff80");
      this.gradient.addColorStop("0.9", "#ffff33");
  }

  #getValue(x, y){
      return (Math.cos(mouse.y/3 * x * 0.00005) + Math.sin(mouse.x/3 * y * 0.00005)) * this.#radius;
  }

  #drawLine(x1,y1,x2,y2) {
    this.#ctx.beginPath();
    this.#ctx.moveTo(x1,y1);
    this.#ctx.lineTo(x2,y2);
    this.#ctx.stroke();
  }

  #draw(angle,x,y){
      let positionX = x;
      let positionY = y;
      let dx = mouse.x - positionX;
      let dy = mouse.y - positionY;
      let distance = (dx * dx + dy * dy);
      let length = distance > 150000 ? distance : 150000;
      if (length > 900000) length = 900000;
      this.#drawLine(positionX,positionY, positionX+Math.cos(angle) * length/10000, positionY+Math.sin(angle) * length/10000);
  }

  cliffordAttractor(x, y, a, b, c, d) {
    // clifford attractor
    // http://paulbourke.net/fractals/clifford/
    
    // scale down x and y
    let scale = 0.005;
    let x0 = (x - this.#width / 2) * scale;
    let y0 = (y - this.#height / 2)  * scale;
  
    // attactor gives new x, y for old one. 
    let x1 = Math.sin(a * y0) + c * Math.cos(a * x0);
    let y1 = Math.sin(b * x0) + d * Math.cos(b * y0);
  
    // find angle from old to new. that's the value.
    return Math.atan2(y1 - y0, x1 - x0);
  }

  // http://paulbourke.net/fractals/henonmap/
  henonAttractor(x,y,a,b){
    let scale = 100000;
    let x0 = x*scale;
    let y0 = y*scale;
    let x1 = 1 + y - a*x*x;
    let y1 = b*x;

    return Math.atan2(y1 - y0, x1 - x0);
  }

    // http://paulbourke.net/fractals/henonmap/
  thornFractal(x,y,a,b){
    let scale = 1;
    let c1 = a; 0.102
    let c2 = b; -0.04
    let x0 = x*scale;
    let y0 = y*scale;
    let x1 = x0/Math.cos(y0)+c1;
    let y1 = y0/Math.sin(x0)+c2;
  
    return Math.atan2(y1 - y0, x1 - x0);
  }

  getValue(x,y){
      //return (x + y) * 0.01 * Math.PI * 2;
      //return (x + y) * 0.001 * Math.PI * 2;
      //return (Math.sin(x * 0.01) + Math.sin(y * 0.0001)) * Math.PI * 2;
      return this.cliffordAttractor(x,y,this.cellSize,this.b,this.c,this.d);
      //return this.henonAttractor(x, y, this.a, this.b);
      //return this.thornFractal(x, y, this.a, this.b);
  }

  drawMethod0() {
    let rayon = this.cellSize / 2;

    for (let y = 0; y < this.#height; y += this.cellSize){
        for (let x = 0; x < this.#width; x += this.cellSize){
            let angle = this.getValue(x,y);

            let x0 = x + rayon;
            let y0 = y + rayon;

            let x1 = x0 + Math.cos(angle)*rayon;
            let y1 = y0 + Math.sin(angle)*rayon;

            let x2 = x0 + Math.cos(angle+Math.PI)*rayon*2;
            let y2 = y0 + Math.sin(angle+Math.PI)*rayon*2;

            this.#drawLine(x1, y1, x2, y2);
        }
    }
  }

  drawMethod1() {
    this.#radius += this.vr;
    if (this.#radius > 5  || this.#radius < -5) this.vr *= -1
    for (let y = 0; y < this.#height; y += this.cellSize){
        for (let x = 0; x < this.#width; x += this.cellSize){
            const angle = this.#getValue(x, y);
            this.#draw(angle,x,y);
        }
    }
  }

  animate(timeStamp){
    let deltaTime = timeStamp - this.lastTime;
    this.lastTime = timeStamp;

    this.drawMethod = this.drawMethod0;

    this.a = Math.random() * 4 - 2;
    this.b = Math.random() * 4 - 2;
    this.c = Math.random() * 4 - 2;
    this.d = Math.random() * 4 - 2;

    if (this.timer > this.interval){
        this.#ctx.clearRect(0, 0, this.#width, this.#height);

        this.drawMethod();

        this.timer = 0;
    } else {
        this.timer += deltaTime;
    }

    flowfieldAnimation = requestAnimationFrame(this.animate.bind(this));
  }
}