​

let rows = 5;

let cols = 5;

let verticalMargin = 40;

let horizontalMargin = 40;

let borderRadius = 40;

​

let cellWidth, cellHeight;

let verticalPadding, horizontalPadding;

​

let colors = ["#000000", "#5090ae", "#ed5731", "#f8a31e"];

​

function setup() {

  createCanvas(400, 400);

  cellWidth = (width - horizontalMargin) / cols;

  cellHeight = (height - verticalMargin) / rows;

  verticalPadding = cellHeight / 15;

  horizontalPadding = cellWidth / 15;

  noLoop();

}

​

async function draw() {

  background("#ece2c8");

  noStroke();

  translate(horizontalMargin / 2, verticalMargin / 2);

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

    for (let j = 0; j < cols; j++) {

      fill(colors[(j + i) % colors.length]);

      await sleep(100);

      let radius = getBorderRadius(j);

      rect(

        horizontalPadding / 2,

        verticalPadding / 2,

        cellWidth - horizontalPadding,

        cellHeight - verticalPadding,

        ...radius

      );

      // translate to the column

      translate(cellWidth, 0);

    }

    // translate to the beggining of next row

    translate(-cols * cellWidth, cellHeight);

  }

}

​

// Function to get the border radius for each cell

function getBorderRadius(colIndex) {

  switch(colIndex) {

    case 0: return [0, 0, 0, 0];

    case 1: return [0, 0, 0, borderRadius];

    case 2: return [0, borderRadius, 0, borderRadius];

    case 3: return [borderRadius, borderRadius, 0, borderRadius];

    case 4: return [borderRadius, borderRadius, borderRadius, borderRadius];

    default: return [0, 0, 0, 0];

  }

}

​

// A custom sleep function that returns a Promise resolved after a timeout

function sleep(millisecondsDuration) {

  return new Promise((resolve) => {

    setTimeout(resolve, millisecondsDuration);

  });

}