let periodSlider;

​

function setup() {

  createCanvas(400, 400);

  amplitudeSlider = createSlider(0, height / 2, 80);

  amplitudeSlider.position(10, 10);

​

  periodSlider = createSlider(10, 800, 100);

  periodSlider.position(10, 40);

  textSize(16);

}

​

function drawLabels(amplitude, period) {

  text("amplitude: " + amplitude, 180, 27);

  text("period: " + period, 180, 57);

}

​

function drawWaveform(amplitude, period) {

  push();

  noFill();

  translate(0, height / 2);

  beginShape();

  for (let i = 0; i < width; i++) {

    let waveform = amplitude * sin((TWO_PI * (frameCount + i)) / period);

    curveVertex(i, waveform);

  }

  endShape();

  pop();

}

​

function drawYoYo(amplitude, period) {

  let waveform = amplitude * sin((TWO_PI * frameCount) / period);

​

  push();

  fill("black");

  translate(width / 2, height * 0.9);

  circle(0, 0, 5);

  line(0, 0, waveform, 0);

  circle(waveform, 0, 30);

  pop();

}

​

function draw() {

  let amplitude = amplitudeSlider.value();

  let period = periodSlider.value();

​

  background(240);

  drawLabels(amplitude, period);

  drawWaveform(amplitude, period);

  drawYoYo(amplitude, period);

}

​