Multiple circles

let time = 0 //Initiate variables

let radius = 100

let pointX;

let pointY;

let prevPointX;

let prevPointY;

let wave = [];

let lastWave = 0;

let waveOffset = 150;

let n;

let ammountCircles = 5;

​

let period;

let frequency;

​

let circleSlider;

let speedSlider;

​

​

​

function setup() {

  createCanvas(1500, 600);

  background(0);

//  translate(100, 100);

  stroke(255);

​

​

  circleSlider = createSlider(1, 10, 1);

  circleSlider.position(10, 100);

  circleSlider.size(400);

  speedSlider = createSlider(1, 10, 5);

  speedSlider.position(500, 100);

  speedSlider.size(400);

  textSize(30);

}

​

function draw() {

  background(0);

  translate(300, 300); //sets (0, 0) to (300, 300)

  noFill();

​

  pointX = 0;

  pointY = 0;

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

    prevPointX = pointX;

    prevPointY = pointY;

    n = i * 2 + 1;

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

    pointX += radius * cos(n * time); //make x coordinate for point

    pointY += radius * sin(n * time); //make y coordinate for point

    ellipse(prevPointX, prevPointY, radius*2); //draw circle

    line(prevPointX, prevPointY, pointX, pointY); //draw line from center to point  

  }

  wave.unshift(pointY);

  line(pointX, pointY, waveOffset, wave[0]);

  beginShape(); //draws wave pattern

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

      vertex(i + waveOffset, wave[i]); //connects all the points into a vertex

      lastWave = i; //used to get the last wave

    }

  endShape();

  if (lastWave > 1000) {

    wave.pop();

  }

  time += speedSlider.value()/100; //ellapse time

​

  period = (2*PI)/speedSlider.value();

  frequency = 1/period;

  fill(255);

  textSize(10);

  text(round(frequency * 100) + ' Hz', 0, 0);

  text("NUMBER OF CIRCLES", -275, -250);

}