constructor(amp, period, phase){

    this.amplitude = amp;

    this.period = period;

    this.phase = phase;

  }

  calculate(x){

    return sin(this.phase + (TWO_PI*x) / this.period) * this.amplitude;

  }

  update(){

    this.phase += 0.08;

  }

}

​

​

let waves = [];

let duck1;

let duck2;

let duck;

let mathMode = false;

let axisX = 0;

let mono;

let amplitude= 10;

function preload(){

  duck1 = loadImage('duck_black.png');

  duck2 = loadImage('duck_white.png');

  mono = loadFont('robotoMono.ttf');

}

  function mouseClicked(){

  if (mouseX > 480 && mouseX < 580 && mouseY > 20 && mouseY < 60 && mathMode === false){

    mathMode = true;

  } else if (mouseX > 480 && mouseX < 580 && mouseY > 20 && mouseY < 60){

    mathMode = false;

  }

}

function setup() {

  createCanvas(600, 600);

​

  for (let i = 0; i <5; i++){

  waves[i] = new Wave(random(10,40), random(100,600), random(TWO_PI));

}

}

​

function draw() {

  background(255);

    textFont(mono);

​

​

  ////////////////////////////////////////draw wave////////////////////////

  noStroke();    // strokeWeight(4);

  if(mathMode){

      background(0);

​

    strokeWeight(40);

  stroke(255);

  line(550, 45, 500, 45);

  noStroke();

  fill(255,0,0);

  circle(500,45,30);

​

  duck = duck2;

 }else if (mathMode == false){

    duck = duck1;

   strokeWeight(40);

  stroke(0);

  line(550, 45, 500, 45);

  noStroke();

  fill(255,0,0);

  circle(550,45,30);

​

  }

  beginShape();

    fill(0,0,255);

​

      curveVertex(width/2, height);

​

  curveVertex(0,height);

  for (let x = -10; x< width+20; x+=10){

    let y = 0;

    for (let wave of waves){

      if (mathMode){

        y=wave.calculate(x)*3;

        stroke(255);

​

        strokeWeight(4);

        fill(0);

    }else{

        y += wave.calculate(x);

   }

   }

    curveVertex(x, y + height/2);

    if (x == 300 ){ 

     image(duck, 300-150 , (y*0.2)+90, 300 ,300);

      fill(255);

      noStroke();

      textSize(20);

     text('pos='+ y*0.2, 300,(y*0.2)+100);

          fill(0,0,255);

​

         }

  }

​

  for (let wave of waves){

    wave.update();

  }

    curveVertex(width,height);

    curveVertex(width/2, height);

​

  endShape();

    //////////////////////////////////////////draw wave////////////////////////

      /////////////////////////axis////////////////////////

​

​

  if (mathMode){

    textSize(40);

​

  axisX+=20;

      stroke(255);

  line(width/10, height*9/10, width/10 + axisX, height*9/10);

  line(width/10, height*9/10, width/10, height*9/10 - axisX);

​

  fill(255);

  noStroke();

​

        text('Y', 20,120);

        text('X', width-120, height-20);

  if (axisX > width-width/5){

    axisX = width - width/5;

    triangle(60, 30, 50, 65, 70, 65);

    triangle(570, 540, 530, 530, 530, 550);

  }

}

  else{

    axisX = 0;

  }

    /////////////////////////axis////////////////////////

}