//click on the right half of the canvas to speed up waves

//click on top half of the canvas to increase waves amplitudes

//...bottom half....decreas...

​

var waves1 = [];

var waves2 = [];

// var waves3 = [];

var z = 1;

var zSpeed = 0.01;

var amp=20;

​

function setup() {

  createCanvas(800, 800);

  //waves moving to right;

  for (var i = 0; i < 8; i++) {

    waves1[i] = new Wave(-(i + 1) * 0.05, (9 - i) * 40, 100 + i * height / 10, 100 - (i * 10));

  }

  //waves moving to left

  for (var j = 0; j < 8; j++) {

    waves2[j] = new Wave((j + 1) * 0.05, (9 - j) * 40, 100 + j * height / 10, 255 - j * 20);

  }

  // //vertical waves 

  // for (var u = 0; u < 8; u++) { 

  //   waves3[u] = new Wave((u + 1) * 0.05, (9 - u) * 40, 100 + u * height / 10);

  // }

}

​

function draw() {

  background(0);

  //waves moving to right

  for (var i = 0; i < 8; i++) {

    waves1[i].renderWave(amp);

  }

  //waves moving to left

  for (var j = 0; j < 8; j++) {

    waves2[j].renderWave(amp);

  }

  // //vertical waves

  // push();

  // translate(width,0);

  // rotate(PI/2);

  // for (var u = 0; u < 8; u++) {

  // waves2[u].renderWave(20);

  // }

  // pop();

​

}

​

//Wave constructor

function Wave(tempTheta, tempPeriod, tempAxis, tempColor) {

  this.xspacing = 3;

  this.x = 0.02;

  this.w = width + 16;

  this.theta = tempTheta; //moving speed of waves

  this.period = tempPeriod;

  this.axis = tempAxis; //y value of wave axis 

  this.dx = (TWO_PI / this.period) * this.xspacing;

  this.y = new Array(floor(this.w / this.xspacing));

  this.color = tempColor;

​

  this.renderWave = function(amp) {

    this.theta += tempTheta;

​

    this.x = this.theta;

    // console.log(this.x);

    for (var i = 0; i < this.y.length; i++) {

      this.y[i] = sin(this.x) * amp;

      this.x += this.dx;

    }

​

    noStroke();

    fill(this.color);

    for (var j = 0; j < this.y.length; j++) {

      ellipse(j * this.xspacing, tempAxis + this.y[j], 5, 5);

    }

  }

  //reference: https://p5js.org/examples/math-sine-wave.html

​

  this.clicked = function(mx, my) {

    //change wave speed by mouseclick (left and right canvas)

    if (mx > 0 && mx < width / 2) {

      tempTheta = tempTheta / 1.5;

    } else if (mx > width / 2 && mx < width) {

      tempTheta = tempTheta * 1.5;

    }

        //change wave amplitudes by mouseclick(top and bottom canvas)

    if (my > 0 && my < height / 2) {

      amp = amp * 1.01;

    } else if (my > height / 2 && my < height) {

      amp = amp / 1.01;

    }

  }

}

​

function mousePressed() {

  //waves moving to right;

  for (var i = 0; i < 8; i++) {

    waves1[i].clicked(mouseX, mouseY);

  }

  //waves moving to left

  for (var j = 0; j < 8; j++) {

    waves2[j].clicked(mouseX, mouseY);

  }

}