var xvalue = 200;

var offset = 16;

var col = 80;

​

function setup() {

  createCanvas(710, 400);

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

    points[i] = new Wave(xvalue,offset*(i*1.7),col+(i*100));

  }

}

​

function draw() {

  background(0);

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

    points[i].calcWave();

    points[i].renderWave();

  }

}

​

class Wave {

  constructor(xvalue, offset, col){

    this.xvalue = xvalue;

    this.offset = offset;

    this.col = col;

    this.x = 0;

    this.xspacing = 16;    // Distance between each horizontal location

    this.w = 0;                // Width of entire wave

    this.theta = this.offset;      // Start angle at 0

    this.amplitude = 65.0; // Height of wave

    this.period = 500.0;   // How many pixels before the wave repeats

    this.dx = 0;               // Value for incrementing x

    this.yvalues = [];  // Using an array to store height values for the wave

  }

​

  calcWave() {

    this.theta += 0.04; //speed of the wave

    this.w = width+16;

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

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

​

    this.x = this.theta;

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

      this.yvalues[i] = sin(this.x)*this.amplitude;

      this.x+=this.dx;

    }

  }

​

    renderWave() {

    noStroke();

    fill(this.col,this.col, this.col);

    for (var x = 0; x < this.yvalues.length; x++) {

        ellipse(x*(this.xspacing), this.xvalue+this.yvalues[x], 16, 16);

      // ellipse(x*(this.xspacing+this.offset), this.xvalue+this.yvalues[x], 16, 16);

    }       

  }

}