let rows, cols;

let grid;

let resolution = 5;

let drawingComplete = true;

let revealedCells = 0;

​

function preload() {

  img = loadImage('dancheong.jpg'); // Replace with the path to your image

}

​

function setup() {

  createCanvas(img.width, img.height);

  rows = floor(height / resolution);

  cols = floor(width / resolution);

​

  // Initialize the grid with all cells initially dead (0)

  grid = new Array(cols).fill(null).map(() => new Array(rows).fill(0));

​

  // Extract pixel values from the image and use them to set the initial state of cells

  img.loadPixels();

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

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

      let pixelIndex = (i * resolution + j * resolution * img.width) * 4;

      let pixelBrightness = (img.pixels[pixelIndex] + img.pixels[pixelIndex + 1] + img.pixels[pixelIndex + 2]) / 3;

​

      // Map pixel brightness to cell state (1 if bright, 0 if dark)

      grid[i][j] = pixelBrightness > 128 ? 1 : 0;

    }

  }

}

​

function draw() {

  background(255);

​

  // Display the revealed cells

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

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

      let x = i * resolution;

      let y = j * resolution;

      if (grid[i][j] === 1) {

        fill(0);

        noStroke();

        rect(x, y, resolution - 1, resolution - 1);

      }

    }

  }

​

  if (!drawingComplete) {

    // Draw three cells per frame until the pattern is complete

    for (let k = 0; k < 3; k++) {

      if (revealedCells < cols) {

        revealedCells++;

      } else {

        drawingComplete = true;

        break; // Exit the loop if the pattern is complete

      }

    }

  }

}

​

function mousePressed() {

  // Start revealing the cells from the beginning

  if (drawingComplete) {

    drawingComplete = false;

    revealedCells = 0;

  }

}

​