JSFiddle - React, Tailwind, and code Playground

by schrodingers

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.min.js"></script>

CSS

body {
  overflow: hidden;
}

JavaScript

// variable used to store the current frame rate value
var frame_rate_value;

function setup() {
  canvas = createCanvas(displayWidth / 2, displayHeight / 2);
  frame_rate_value = 30;
  frameRate(frame_rate_value);
  rectMode(CENTER);
  background(0);
}

function draw() {
  background(0);
  var i,
    j,
    num = 30,
    gutter = 0, //distance between each cell
    cellsize = (width - gutter * (num - 1)) / (num - 1),
    circleNumber = 0; // counter
  for (i = 0; i < num; i++) {
    for (j = 0; j < num; j++) {
      // different way to calculate the circle number from w2_04
      circleNumber = (i * num) + j;

      var tx = cellsize * i + gutter * i,
        ty = cellsize * j + gutter * j;
      movingCircle(tx, ty, cellsize, circleNumber);
    }
  }
}

function movingCircle(x, y, size, offset) {
  var circlePeriod = frame_rate_value * 1.32,
    circleAge = ((frameCount + offset) % Math.floor(circlePeriod)) /
    circlePeriod,
    circleSize = size * 1.0 * sin(circleAge * HALF_PI);

  strokeWeight(2);
  stroke(255, lerp(255, 0, circleAge));
  fill(lerp(128, 0, circleAge), lerp(120, 0, circleAge));
  ellipse(x - size / 2, y - size / 2, circleSize, circleSize);
}

/**
 * Called by p5 when a mouse button is clicked
 */
function mouseClicked() {

  // click on right side, increase frame rate
  if ((mouseX > (width / 2)) && frame_rate_value < 120) {
    frame_rate_value++;
  }

  // click on left side, decrease frame rate
  if ((mouseX < (width / 2)) && frame_rate_value > 2) {
    frame_rate_value--;
  }

  // print the current value on the screen
  print("Current frame Rate is: " + frame_rate_value);
}