let time = 0;

let wave = [];

​

function setup() {

  const length = min(innerWidth, innerHeight)

  if (length == innerWidth) {

    createCanvas(length, floor(length * 0.75)) 

  } else {

    createCanvas(floor(length * 1.33), length) 

  }

  frameRate(30)

  cx = 0

  cy = 0

  r = width * 0.15

  d = r * 2

}

​

function draw() {

  translate(d, height/2)

  background(40)

​

  let x = 0,

      y = 0;

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

    let prevX = x

    let prevY = y

    let n = 2*i + 1

    let radius = r * r1(n)

    if (i % 2 == 0) {

      n = i + 1

      radius = r * r2(n)

    }

​

    x += radius * cos(n * time)

    y += radius * sin(n * time)

    stroke(255, 80)

    noFill()

    circle(prevX, prevY, radius)

    stroke(255)

    line(prevX, prevY, x, y)

  }

  wave.unshift(y)

  translate(r, 0)

  push()

  stroke(255)

  strokeWeight(2)

  line(x-r, y, 0, wave[0])

  fill('red')

  stroke('red')

  circle(0, wave[0], 4)

  noFill()

  beginShape()

  for (let [t, h] of wave.entries()) {

    vertex(t, h)

  }

  endShape()

  if (wave.length > width - d) {

    wave.pop()

  }

  pop()

  time += 0.03

}

​

function r1(n) {

  return 4 / (n * PI); 

}

​

function r2(n) {

  let sign = n % 2 == 0 ? -1 : 1

  return 2 / (n * sign * PI); 

}