(function() {
  var x, y;
  var t = 0;
  
  var maxAmplitude = 900;
  var A1 = 300, 
      A2 = 200, 
      A3 = 200, 
      A4 = 200;
  
  var maxFrequency = 300;
  var f1 = 200, 
      f2 = 200, 
      f3 = 300, 
      f4 = 400;
  
  var maxPhase = 1/4;
  var p1 = 1/16, 
      p2 = 0.5, 
      p3 = 13/15, 
      p4 = 0.5;
  
  var maxDamping = 1;
  var d1 = 0.4, 
      d2 = 0.08, 
      d3 = 0.5, 
      d4 = 0.1;
  
  var i;
  
  var pendulums = 2;
  
  var canvas = document.getElementById("canvas");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  var ctx = canvas.getContext("2d");
  var red, green, blue;
 
  function draw() {
    for(i = 0; i < 5000; ++i) {
      x = calc(A1, t, f1, p1, d1)
        + (pendulums == 4 ? calc(A2, t, f2, p2, d2) : 0) 
        + canvas.width/2;
      
      y = calc(A3, t, f3, p3, d3)
        + (pendulums == 4 ? calc(A4, t, f4, p4, d4) : 0) 
        + canvas.height/2;
      
      red = Math.round((Math.sin(t*maxFrequency/100)+1)*128);
      green = Math.round((Math.sin(t*maxFrequency/100+Math.PI*2/3)+1)*128);
      blue = Math.round((Math.sin(t*maxFrequency/100+Math.PI*4/3)+1)*128);
      
      ctx.fillStyle = "rgba(" + red + ", " + green + ", " + blue + ", 0.2)";
      ctx.fillRect(x, y, 1, 1);
      t += 0.001/maxFrequency;
    }
    window.requestAnimationFrame(draw);  
  }
  
  window.requestAnimationFrame(draw);
  
  function calc(A, t, f, p, d) {
    return A * Math.sin(t * f + Math.PI * p * 2) * Math.exp(-d * t);
  }
  
  function random (max) {
    return Math.floor(Math.random() * (max-1)) + 1;
  } 
                
  function randomAmplitudes() {
    A1 = random(maxAmplitude);
    A2 = random(maxAmplitude);
    A3 = random(maxAmplitude);
    A4 = random(maxAmplitude);   
  }

  function randomFrequencies() {
    f1 = random(maxFrequency);
    f2 = random(maxFrequency);
    f3 = random(maxFrequency);
    f4 = random(maxFrequency);    
  }
  
  function randomPhase() {
    p1 = Math.random()*maxPhase;
    p2 = Math.random()*maxPhase;
    p3 = Math.random()*maxPhase;
    p4 = Math.random()*maxPhase;
   }
  
  function randomDamping() {
    // We need float for these
    d1 = Math.random()*maxDamping;
    d2 = Math.random()*maxDamping;
    d3 = Math.random()*maxDamping;
    d4 = Math.random()*maxDamping;   
  }
 
  function restart() {
    t = 0;
    
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  }
  
  function reset() {
    randomAmplitudes();
    randomFrequencies();
    randomPhase();
    randomDamping();
    restart();
  }
  
  document.getElementById("random").addEventListener("click", reset);

  document.getElementById("2").addEventListener("click", function() {
    pendulums = 2;
    reset();
  });

  document.getElementById("4").addEventListener("click", function() {
    pendulums = 4;
    reset();
  });
  
  var amplitudeSlider = document.getElementById("amplitudeSlider");
  amplitudeSlider.max = 1500;
  amplitudeSlider.value = maxAmplitude;
  amplitudeSlider.addEventListener("change", function () {
    maxAmplitude = this.value;
    randomAmplitudes();
    restart();
  });
  
  var frequenzySlider = document.getElementById("frequenzySlider");
  frequenzySlider.min = 0;
  frequenzySlider.max = 1000;
  frequenzySlider.value = maxFrequency;
  frequenzySlider.addEventListener("change", function () {
    maxFrequency = this.value;
    randomFrequencies();
    restart();
  });
 
  var phaseSlider = document.getElementById("phaseSlider");
  phaseSlider.step = 0.001;
  phaseSlider.min = 0;
  phaseSlider.max = 1;
  phaseSlider.value = maxPhase;
  phaseSlider.addEventListener("change", function () {
    maxPhase = this.value;
    randomPhase();
    restart();
  });
  
  var dampingSlider = document.getElementById("dampingSlider");
  dampingSlider.step = 0.001;
  dampingSlider.min = 0;
  dampingSlider.max = 2;
  dampingSlider.value = maxDamping;
  dampingSlider.addEventListener("change", function () {
    maxDamping = this.value;
    randomDamping();
    restart();
  });
})();