let animate = requestAnimationFrame(draw);
let w3 = new Wave(300,200,.5);
let w4 = new Wave(100,200,0.5);

function setup() {
	Wave.render();
	recordMousePos(Canvas.Element); //setzt die Update-func für das Aufzeichnen der MausPos auf true
}

function draw() {
	Wave.render();
	//Observer (Punkt der dargestellt wird) bewegt sich mit der Maus
	Observer.x = (mouseX<Canvas.Element.width/10*4) ? mouseX : Canvas.Element.width/10*4; // (4/10) des Canvas
	Observer.y = mouseY;
	animate = requestAnimationFrame(draw);
}

function NoLoop() {
	cancelAnimationFrame(animate);
}

function Loop() {
animate = requestAnimationFrame(draw);
}

function reload() {
	location.reload();
}
//NoLoop();

//Framerate
var before,now,fps;
before=Date.now();
fps=0;
requestAnimationFrame(
    function loop(){
        now=Date.now();
        fps=Math.round(1000/(now-before));
        before=now;
        requestAnimationFrame(loop);
				if(fps < 58) {
        document.getElementById("Count").innerHTML = fps;
			} else {
				document.getElementById("Count").innerHTML = 60;
			}
    }
 );


let res = 10; //pixelgröße
let waves = []; //Array mit Wellenobjekten
let Observer = new V2D(Canvas.Element.width/2/10*4,Canvas.Element.height/2); //Punkt, der dargestellt wird
let Observertime = 0; //Zeit die abläuft

class Wave {
  constructor(x,y,Amplitude) {
    this.coords = new V2D(x,y);
    this.time = 0;
    this.amp = Amplitude;
    waves.push(this); //Updated Wellen-Array
  }

  static render() {
    Wave.GraphAPoint(Observer.x,Observer.y);

    for(let i=0,n=Canvas.Element.width/10*4;i<n;i+=res) {
      for(let z=0,m=Canvas.Element.height;z<m;z+=res) {
        let sum = 0;
        for(let d in waves) {
            	sum += AM.sin(waves[d].coords.dist(new V2D(i,z))/res+waves[d].time);
     	}
        let color = Math.round(AM.map(sum,-1,1,0,255)); //stellt einen besseren Kontrast dar. Eig müsste es (-waves.length,waves.length) 							 //anstatt (-1,1) sein
            if(color>255) {color = 255} //fängt Overflow ab
            if(color<0) {color = 0}	//Undeflow? is das nen Wort..?
        Canvas.ctx.fillStyle = "rgb("+color+","+color+","+color+")";
        Canvas.Rectangle(i,z,res,res,"fill"); //Malt an der Stelle (x,y) oder (i,z) ein Viereck mit entsprechender Farbe
      }
    }
    Wave.addTime(); // lässt die Zeit korrespondierend zur amp weiterlaufen
    Observertime-=0.05; //lässt die Zeit des Observers laufen
    Observer.draw(5,"red"); //Malt die stelle des Observers rot
  }

  static addTime() {
    for(let d in waves) {
    Canvas.Circle(waves[d].coords.x,waves[d].coords.y,5,"fill","green");
    waves[d].time-=waves[d].amp;
  }
  }

  static GraphAPoint(x,y) {
    Canvas.ctx.clearRect(Canvas.Element.width/10*4,0,Canvas.Element.width/10*6,Canvas.Element.height);
    let time = Observertime; // damit es keine Zeitsprünge gibt
    for(let i=0;i<Canvas.Element.width/10*6/res;i++) {
      let sum = 0;
      for(let d in waves) {
        sum += AM.sin(waves[d].coords.dist(new V2D(x,y))/res+time);
      }
      let h = AM.map(sum,-waves.length,waves.length,-100,100); //Höhe wird evaluiert [diesmal korrekt]
        Canvas.ctx.fillStyle = "black";
      Canvas.Rectangle(Canvas.Element.width/10*4+i*res,Canvas.Element.height/2-h,res,res,"fill");
      time-=0.5; //Zeit schreitet voran [rückwärts, da es sonst iwie aussieht als würde es sich nach innen bewegen #Illusion oder so]
    }
  }
}