* Creative Coding Workshop #2 Preview - Repetitive Circles forming Lissajous

 *

 * Jack B. Du (github@jackbdu.com)

 */

​

let minLoopFrames = 240;

​

function setup() {

  createCanvas(512, 512);

  frameRate(60);

}

​

function draw() {

  let x = width / 2;

  let y = width / 2;

  let d = width / 6;

  let r = width / 3;

  let n = 800;

  let segs = 9;

  background(0);

  noStroke();

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

    fill(

      178 + 177 * sin(i / n * 15 + TWO_PI * frameCount / minLoopFrames),

      178 + 177 * sin(i / n * 16 + TWO_PI * frameCount / minLoopFrames),

      178 + 177 * sin(i / n * 17 + TWO_PI * frameCount / minLoopFrames * 2)

    );

    circle(

      x + r * sin(TWO_PI * i / n * 2),

      y + r * cos(TWO_PI * i / n * 1),

      d * sin(segs * PI * i / n + TWO_PI * frameCount / minLoopFrames * 2)

    );

  }

}

​