let pathCanvas;

let doublePendulums = [];

const numPendulums = 20;

​

function setup() {

  createCanvas(800, 800)

  pathCanvas = createGraphics(width, height)

  colorMode(HSB, 1, 1, 1, 1)

  pathCanvas.colorMode(HSB, 1, 1, 1, 1)

  cx = width / 2

  cy = height * 0.2

  pathCanvas.translate(cx, cy)

  pathCanvas.background(0.3)

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

    let doublePendulum = 

    doublePendulums.push(

      new DoublePendulum({

        r1: map(i, 0, numPendulums, 100, 300),

        r2: 100,

        g: 1

      })

    )

  }

}

​

function draw() {

  clear()

  imageMode(CORNER)

  image(pathCanvas, 0, 0, width, height)

  pathCanvas.background(0.3, 0.09)

  translate(cx, cy)

  for (let [i, p] of doublePendulums.entries()) {

    let pColor = color(i / numPendulums, 1, 1)

    fill(pColor)

    p.next()

    p.draw(pColor)

    pathCanvas.stroke(pColor)

    pathCanvas.strokeWeight(4)

    pathCanvas.line(p.x2, p.y2, p.x3, p.y3)

  }

}