var axis = 170;

let circles = [];

var input;

var button;

function setup() {

  createCanvas(605, 300);  

  strokeWeight(2);

​

  input= createInput("1"); //TODO: Restrict to maximum of 4000

  button = createButton("go");

  background(0);

  for(let i = 0;i < input.value(); i++){

    let n = 1+i*2;

    let angle = (4/(n*PI));

    let c = new movingCircle(axis, 150, 60*angle, n);

    let d = new waveDrawer(c.x, c.y);

    circles.push( {c, d} );

  }

  button.mousePressed(changeCircles);

}

function changeCircles() {

  if(input.value() > 2000) {

    input.value(2000);

  }

  circles = [];

  for(let i = 0;i < input.value(); i++){

    let n = 1+i*2;

    let angle = (4/(n*PI));

    let c = new movingCircle(axis, 150, 60*angle, n);

    let d = new waveDrawer(c.x, c.y);

    circles.push( {c, d} );

  }

}

​

let wave = [];

​

function draw() {

  background(0);

  noFill();

  stroke(255);

  for(let i = 0; i < circles.length; i++){

    circles[i].c.show();

    if(i > 0 ){

      circles[i].c.x = circles[i-1].c.borderX;

      circles[i].c.y = circles[i-1].c.borderY;

    }

    if(i == circles.length-1){

      circles[i].d.x = circles[i].c.borderX;

      circles[i].d.y = circles[i].c.borderY;

      wave.unshift(circles[i].d.y);

      if(wave.length > 390){

        wave.pop();

      }

      beginShape();

        noFill();

        for(let i= 0; i < wave.length; i++){

          stroke("red");

          vertex(410+i/2, wave[i]); 

        }

      endShape();

      circles[i].d.show();  

    }

       circles[i].c.update();

  }

​

}