let radius, margin;

let spacex, spacey; // distance between circle

function setup() {

  createCanvas(400, 400);

  noStroke();

}

​

function draw() {

  background(255);

  colns = 4;

  rows = 4;

  radius = 50;

  margin = 20;

  spacex = (width - 2 * margin) / colns;

  spacey = (height - 2 * margin) / rows;

​

  let colorShift = (frameCount % 100) / 100;

  // draw each circle

  for (let row = 0; row < rows; row++) {

    for (let col = 0; col < colns; col++) {

      let x = margin + col * spacex + spacex / 2;

      let y = margin + row * spacey + spacey / 2;

      let numLayers = 3; // Number of concentric layers

      let step = radius / numLayers;

​

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

        let color1 = color(255, 165, 0); // Orange

        let color2 = color(255, 69, 0);  // Red

        let color3 = color(255, 20, 147); // Pink

        // Manually interpolate between the colors depending on the layer

        let fromColor, toColor;

        if (i == 0) {

          fromColor = color1;

          toColor = color2;

        } else if (i == 1) {

          fromColor = color2;

          toColor = color3;

        } else {

          fromColor = color3;

          toColor = color1;

        }

        let dynamicColor = lerpColor(fromColor, toColor, colorShift);

        fill(dynamicColor); 

        ellipse(x, y, radius - i * step, radius - i * step);

      }

    }

  }

}

​