let wave = [];

​

let slider;

​

function setup() {

  createCanvas(800, 400);

  slider = createSlider(1, 5, 1);

}

​

function draw() {

  //tryes to draw the current N

  // textSize(60);

  // strokeWeight(2);

  // fill(150);

  // text('word', width/2, height/2);

​

  background(0); //black

  translate(200, 200); // moves x = 0 to 1/4 of canvas (200) and y = 0 to the center

  let x = 0;

  let y = 0;

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

    let prevx = x;

    let prevy = y;

    let n = (i * 2) + 1;

    let radius = 100 * (4 / (n * PI));

    x += radius * cos(n * time);

    y += radius * sin(n * time);

    drawStaticCircle(prevx, prevy, radius);

    drawMovingCircle(prevx, prevy, x, y);

  }

  wave.unshift(y); // adds the latest Y value to the beggining

  // draw the wave pattern

  translate(200, 0); // moves x = 0 to the middle of the canvas (800 / 2 = 400)

  stroke(255, 100);

  line(x - 200, y, 0, wave[0]);

  stroke(255);

  beginShape();

  noFill();

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

    //point(i, wave[i]);

    vertex(i, wave[i]);

  }

  endShape();

  time += 0.03;

  popLastPoints();

​

}

​

function drawStaticCircle(prevx, prevy, radius) {

  stroke(255, 100); //white

  noFill();

  circle(prevx, prevy, radius*2);

}

​

function drawMovingCircle(prevx, prevy, x, y) {

  fill(255); //white

  stroke(255);

  line(prevx, prevy, x, y);

  circle(x, y, 3);

}

​

function popLastPoints() {

  if (wave.length > 400) {

    wave.pop();

  }

}