* Creative Coding Workshop #2 Demo - Repeated Colorful Circles forming a Rotating Circle - Smooth Color Transition

 *

 * 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 = 100;

  // a for loop that repeats based on numOfCircles

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

    // use map function to calculate a fill color for each circle

    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+offsetX),

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

           50);

  }

}