* Creative Coding Workshop #2 Demo - Repeated Colorful Circles forming Multiple Patterns

 *

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

 */

​

function setup() {

  // create a 400px by 400px canvas

  createCanvas(400, 400);

}

​

function draw() {

  // set blendMode to BLEND (default) so background will cover over entire canvas

  blendMode(BLEND);

  // specify a background for each frame

  background(220);

  // this blendMode only reveals the darkest color at each pixel

  blendMode(DARKEST);

  let offsetX = 3*sin(frameCount/40);

  let offsetY = 4*sin(frameCount/50);

  let numOfCircles = 200;

  // a for loop that repeats based on numOfCircles to create animated lissajous

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

    fill(map(sin(TWO_PI*i/numOfCircles*1),-1,1,0,255),

         map(sin(TWO_PI*i/numOfCircles*2),-1,1,0,255),

         map(sin(TWO_PI*i/numOfCircles*3),-1,1,0,255));

    // turn off stroke

    noStroke();

    circle(200+100*sin(i/numOfCircles*TWO_PI*2+offsetX),

           200+100*cos(i/numOfCircles*TWO_PI+offsetY),

           50);

  }

  // a for loop that repeats based on numOfCircles to create animated circles

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

    fill(map(sin(TWO_PI*i/numOfCircles*1),-1,1,0,255),

         map(sin(TWO_PI*i/numOfCircles*1),-1,1,0,255),

         map(sin(TWO_PI*i/numOfCircles*1),-1,1,0,255));

    // turn off stroke

    noStroke();

    circle(200+100*sin(i/numOfCircles*TWO_PI+offsetX),

           200+100*cos(i/numOfCircles*TWO_PI+offsetY),

           50);

  }

}