ShapingFunctionsIntro

// Uses https://www.npmjs.com/package/p5.createloop

// Be sure that the following script is included:

// https://unpkg.com/p5.createloop@0.2.8/dist/p5.createloop.js

​

function setup() {

  createCanvas(600, 400);

  frameRate(30);

  noSmooth();

  pixelDensity(1);

  createLoop({

    duration: 4,

    gif: false

  });

}

​

//------------------------------------------

function draw() {

  background("DodgerBlue");

  drawDebug();

​

  var p = animLoop.progress;

  var psq = pow(animLoop.progress, 2.0);

  var psqrt = pow(animLoop.progress, 0.5);

  var D = 90;

  var S = sqrt(2) / 2;

  var X;

​

  noStroke();

​

  // Controlling circle size

  X = 100;

  fill(255, 255, 255, 64);

  circle(X, 100, D);

  circle(X, 200, D);

  circle(X, 300, D);

  fill("white");

  circle(X, 100, p * D);

  circle(X, 200, psq * D);

  circle(X, 300, psqrt * D);

​

​

  // Controlling pie angle

  X = 200;

  fill(255, 255, 255, 64);

  circle(X, 100, D);

  circle(X, 200, D);

  circle(X, 300, D);

  fill("white");

  arc(X, 100, D, D, 0, p * TWO_PI);

  arc(X, 200, D, D, 0, psq * TWO_PI);

  arc(X, 300, D, D, 0, psqrt * TWO_PI);

​

​

  // Controlling rotation

  X = 300;

  fill(255, 255, 255, 64);

  circle(X, 100, D);

  circle(X, 200, D);

  circle(X, 300, D);

  fill("white");

  push();

  translate(X, 100);

  rotate(p * TWO_PI);

  translate(D * 0.333, 0);

  circle(0, 0, D * 0.333);

  pop();

  push();

  translate(X, 200);

  rotate(psq * TWO_PI);

  translate(D * 0.333, 0);

  circle(0, 0, D * 0.333);

  pop();

  push();

  translate(X, 300);

  rotate(psqrt * TWO_PI);

  translate(D * 0.333, 0);

  circle(0, 0, D * 0.333);

  pop();

​

​

  // Controlling opacity

  X = 400;

  fill(255, 255 * p);

  circle(X, 100, D);

  fill(255, 255 * psq);

  circle(X, 200, D);

  fill(255, 255 * psqrt);

  circle(X, 300, D);

​

​

  // Controlling count

  X=500;

  fill("white");

  var maxN = 64;

  for (var row = 0; row < 8; row++) {

    for (var col = 0; col < 8; col++) {

      var index = row * 8 + col;

      if (index < (maxN * p)){

        circle(X-35 + col*10, 65+row*10, 9); 

      }

      if (index < (maxN * psq)){

        circle(X-35 + col*10, 165+row*10, 9); 

      }

      if (index < (maxN * psqrt)){

        circle(X-35 + col*10, 265+row*10, 9); 

      }

    }

  }

}

​

​

//------------------------------------------

function drawDebug() {

  noStroke();

  fill(255, 255, 255, 180);

  textAlign(LEFT, CENTER);

  textSize(20);

  var myStr = "animLoop.progress = " + nf(animLoop.progress, 1, 2);

  text(myStr, 55, 25);

  text("p",  20, 100);

  text("p²", 20, 200);

  text("√p", 20, 300);

}