INITIALIZE:
    Create array of colors from Kelly's artwork
    Set grid size to 20x20
    Create empty array 'pixels' of size 400 (20x20)
    Create array 'emptyPixels' with numbers 0 to 399
    Set boolean 'fillingComplete' to false

FUNCTION setup:
    Create canvas 400x400 pixels
    Calculate size of each grid square

FUNCTION draw:
    Clear canvas with background color

    IF NOT fillingComplete:
        CALL fillPixel
    ELSE IF it's time to change colors (every 0.5 seconds):
        CALL changeAllColors

    CALL drawPixels

FUNCTION fillPixel:
    IF emptyPixels is not empty:
        Choose random index from emptyPixels
        Set pixels[chosen index] to random color from color array
        Remove chosen index from emptyPixels
    ELSE:
        Set fillingComplete to true

FUNCTION changeAllColors:
    FOR EACH pixel in pixels:
        Set pixel to new random color from color array

FUNCTION drawPixels:
    FOR EACH pixel in pixels:
        IF pixel is not null:
            Calculate x position: (index % 20) * square size
            Calculate y position: (index / 20, rounded down) * square size
            Draw square at (x, y) with pixel's color

REPEAT draw function continuously

// Array of colors sampled from Ellsworth Kelly's "Spectrum Colors Arranged by Chance III"
// These colors will be used to fill our grid, representing different moments or events in time
const colors = [
  "#F2385A",
  "#F5A503",
  "#E9F1DF",
  "#4AD9D9",
  "#36B1BF",
  "#E3B8B5",
  "#FFD872",
  "#E1D0B3",
  "#BFD9B5",
  "#A8D9D3",
  "#D9AC8E",
  "#F2C2B8",
  "#F2B5D4",
  "#94E2F2",
  "#52B9D3",
  "#6C49B8",
  "#8E3D87",
  "#D3B0B0",
  "#D9C589",
  "#8FD3B5",
];

// Define the size of our grid. 20x20 gives us 400 "moments" to represent, (doing this turns our 2D drawing into 2D)
const gridSize = 20;

// This array will store the color of each square in our grid
// Initially, all elements are emptyu
let pixels = [];

// The size of each square in our grid, calculated based on canvas size
let pixelSize;

// A Boolean to indicate when we've filled all squares and should start changing colors
let fillingComplete = false;

// This array keeps track of which grid positions are still empty
// This will help us select random unfilled positions in the "grid"
let emptyPixels = [];

function fillPixel() {
  if (emptyPixels.length > 0) {
    // Randomly select an empty position from the array
    // Generates a random index in the emptyPixels array by rounding a random float between 0 and emptyPixels.length using floor

    const index = floor(random(emptyPixels.length));
    const pixelIndex = emptyPixels[index];

    // Fill this position with a random color from colour array
    pixels[pixelIndex] = random(colors);

    // Removes one element from emptyPixels at the specified index, modifying the array (splice(): This is a JavaScript array method that changes the contents of an array by removing, replacing, or adding elements.)

    emptyPixels.splice(index, 1);
  } else {
    // If no empty positions left, we're done with the filling phase
    fillingComplete = true;
  }
}

function changeAllColors() {
  // Assign a new random color to every position in our grid

  for (let i = 0; i < pixels.length; i++) {
    pixels[i] = random(colors);
  }
}

function drawPixels() {
  for (let i = 0; i < pixels.length; i++) {
    if (pixels[i]) {
      // Only draw squares that have been filled
      // Calculate x position:
      // i % gridSize gives us the column number (0-19)
      // Multiplying by pixelSize converts to canvas coordinates
      const x = (i % gridSize) * pixelSize;

      // Calculate y position:
      // Math.floor(i / gridSize) gives us the row number (0-19)
      // Multiplying by pixelSize converts to canvas coordinates
      const y = Math.floor(i / gridSize) * pixelSize;

      // IMP ( By using % for x and / for y, we're essentially "unwrapping" our 1D array into a 2D grid. The modulo wraps around for each row (giving us the column), while the division tells us which row we're on.)

      // Set the fill color for this square
      fill(pixels[i]);

      // Draw the square at (x, y) with size pixelSize
      square(x, y, pixelSize);
    }
  }
}

function setup() {
  createCanvas(400, 400);

  // Calculate the size of each grid square
  pixelSize = width / gridSize;

  // We don't want outlines on our squares
  noStroke();

  // Initialize our grid: all positions start empty (null) and are added to emptyPixels, doing this in setup so when our functions are implemented they have a data structure ready to go into for the pixels
  for (let i = 0; i < gridSize * gridSize; i++) {
    pixels.push(null);
    emptyPixels.push(i);
  }
}

function draw() {
  background("#F4F2EF");

  // we're working in two phases: filling empty squares, then changing all colors, (!fillingiComplete checks wether the boolean is still flase, it will turn true from the fillPixel function over time as the grid is filled
  if (!fillingComplete) {
    fillPixel(); // Fill one random empty square
  } else if (frameCount % 30 === 0) {
    // Once filled, change all colors every 30 frames (0.5 seconds at 60fps). if we remove this each pixel will flashe super quickly.
    changeAllColors();
  }

  // Draw all of our colored squares
  drawPixels();
}