* Creative Coding Workshop #3 Demo - Repeated Circles in Color Gradient Forming Noise Path - Animated Path & Diameters

 *

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

 */

​

function setup() {

  // create a 400px by 400px canvas

  createCanvas(400, 400);

  // use 4 as seed for noise generation

  noiseSeed(4);

}

​

function draw() {

  // specify a background for each frame

  background(220);

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

    noStroke();

    // set fill color based on sin

    fill(map(sin(i/80),-1,1,0,255),

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

         map(sin(i/90),-1,1,0,255));

    // draw a circle whose x and diameter are based on noise

    circle(map(noise(i/100,frameCount/50), 0, 1, 100, 300),

           i,

           map(noise(i/90,frameCount/50), 0, 1, 10, 200));

  }

}