Colorful squares art

/*

A fun experiment inspired by Jean Baptiste

​

https://twitter.com/JeanBaptisteEt4/status/1753188190620397840

​

Author: Juan Carlos Ponce Campuzano

Date: 02/Feb/2024

Website: https://www.dynamicmath.xyz/

*/

​

​

let colorPalette = ['#263D42', '#387d7a', '#32936f', '#26a96c', '#2bc016'];

let gridSize = 500;

let numSquares = 30;

let squareSize = gridSize / numSquares;

let currentCol = 0;

let currentRow = numSquares - 1; // Start from the bottom row

​

function setup() {

  createCanvas(600, 600);

  background(0);

  noStroke();

  frameRate(60); // Set a low frame rate for the desired effect

}

​

function draw() {

  let x = currentCol * squareSize + 50;

  let y = currentRow * squareSize + 50;

  let fillColor = random(colorPalette);

​

  fill(fillColor);

  rect(x, y, squareSize, squareSize);

​

  // Move to the next square

  currentCol++;

​

  // Check if the row is completed

  if (currentCol === numSquares) {

    currentCol = 0;

    currentRow--;

​

    // Stop drawing when all squares are drawn

    if (currentRow < 0) {

      noLoop();

    }

  }

}

​