var waves = [];

var wave_num;



var time;

var colors = [];



function setup() {

  createCanvas(windowWidth,

               windowHeight);

  angleMode(DEGREES);

  noStroke();



  wave_num = 20;

  for (var i = 0; i < wave_num; i = i + 1) {

    var ratio = i / wave_num;

    var mode = (i % 2) ? 'sin' : 'cos';

    var num = random(20, 80);

    var amp = 10 + ratio * windowHeight / 2;

    var dia = 10 + ratio * 15;

    waves[i] = new Wave(mode, num, amp, dia);

  }



  for (var i = 0; i < wave_num; i = i + 1) {

    waves[i].setup();

  }



  colors.push(color(0, 180, 300));

  colors.push(color(0, 200, 300));

  colors.push(color(2, 160, 225));

  colors.push(color(2, 100, 165));

  colors.push(color(0, 25, 100));

  colors.push(color(0, 25, 100));



  time = 0.0;

}





function draw() {

  background(238, 238, 238);



  for (var i = 0; i < wave_num; i = i + 1) {

    waves[i].update();

  }



  for (var i = 0; i < wave_num; i = i + 1) {

    var c = getColor((i / (wave_num - 1)));

    fill(c);

    waves[i].draw();

  }



  time = time + 1;

}



class Wave {

  constructor(mode, num, amp, dia) {

    this.mode = mode;

    this.num = num;

    this.amplitude = amp;

    this.diameter = dia;

  }



  setup() {

    this.values = [];

    for (var i = 0; i < this.num; i = i + 1) {

      this.values[i] = 0.0;

    }

  }



  update() {

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

      var x = 180 / (this.values.length - 1) * i + time;

      if (this.mode == 'sin') {

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

      }

      else if (this.mode == 'cos') {

        this.values[i] = this.amplitude * cos(x);

      }

    }

  }



  draw() {

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

      var ellipseX = windowWidth / (this.values.length - 1) * i;

      var ellipseY = windowHeight / 2 + this.values[i];

      ellipse(ellipseX, ellipseY, this.diameter);

    }

  }



}



function getColor(t) {

  t = constrain(t, 0.0001, 0.9999);

  var p = t * (colors.length - 1);

  var from = floor(p);

  return lerpColor(colors[from], colors[from + 1], p - from);

}