​

let time = 0;

let wave = [];

let path = [];

​

let slider;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  slider = createSlider(1, 50, 5);

  slider.position(windowWidth/2-150, 20);

  slider.style('width', '300px');

}

​

function draw() {

  background(48,50,52);

  translate(windowWidth/2-50, windowHeight/2);

  slider.position(windowWidth/2-150, 20);

​

  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 = 50 * (4 / (n * PI));

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

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

​

    stroke(255, 100);

    strokeWeight(3); 

    noFill();

    ellipse(prevx, prevy, radius * 2);

​

    //fill(255);

    stroke(38,139,210);

    line(prevx, prevy, x, y);

    //ellipse(x, y, 8);

  }

  wave.unshift(y);

​

​

  translate(100, 0);

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

  beginShape();

  noFill();

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

    vertex(8/3*i, wave[i]);

  }

  endShape();

​

  time += 0.05;

​

​

  if (wave.length > 250) {

    wave.pop();

  }

}

​

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​