let wave = [];

​

function setup() {

  createCanvas(700, 600);

}

​

function draw() {

  background(0);

  // a todas as coordenadas passadas para desenho, será adicionado 200 para coord x e 200 para coord y

  let translateX = 200;

  let translateY = 200;

  // translate(translateX, translateY)

  let radius = 100;

  time += 0.05

  stroke(255)

  noFill()

  ellipse(0 + translateX, 0 + translateY, radius * 2)

​

  let x = radius * cos(time)

  let y = radius * sin(time)

  let shift = 150

  // como se fosse desenhar uma senoide com os valores de y para cada x (tempo), em uma senoide normal, y variaria de 1 a -1, aqui muda só a amplitude da variação

  //wave.push(y)

  // o contrário de push, ou seja, inserir no inicio do array

  wave.unshift(y)

  // eliminando os pontos que seriam plotados fora do canvas

  if (wave.length > width - (translateX + shift)) wave.pop()

  // desenhar senoide com pontos 

  // wave.forEach((value, index) => point(index + shift + translateX, value + translateY))

  // desenhar senoide com linha

  beginShape()

  wave.forEach((value, index) => vertex(index + shift + translateX, value + translateY))

  endShape()

  stroke(255)

  fill(255)

  ellipse(x + translateX, y + translateY, 10)

   // line from the point rotating to the first point of the sinusoid

  line(x + translateX , y + translateY , 0 + translateX + shift, wave[0] + translateY)

}