* Creative Coding Workshop #2 Demo - Repeated Colorful Circles forming a Rotating Circle - Map Function

 *

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

 */

​

function setup() {

  // create a 400px by 400px canvas

  createCanvas(400, 400);

}

​

function draw() {

  // specify a background for each frame

  background(220);

  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(i/50),-1,1,0,255),

         map(sin(i/60),-1,1,0,255),

         map(sin(i/70),-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);

  }

}