let grid;

let resolution = 20;

let images = [];

let drawingInProgress = false;

let currentCell = 0;

​

function preload() {

  images.push(loadImage('dancheong.jpg'));  // Replace with the path to your images

  images.push(loadImage('dancheong2.jpg'));

  // Add more images as needed

}

​

function setup() {

  createCanvas(400, 400);

  rows = floor(height / resolution);

  cols = floor(width / resolution);

​

  // Initialize the grid with indices of images

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

}

​

function draw() {

  background(255);

​

  // Display the current generation with images

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

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

      let x = i * resolution;

      let y = j * resolution;

      let imgIndex = grid[i][j];

      image(images[imgIndex], x, y, resolution, resolution);

    }

  }

​

  if (drawingInProgress) {

    // Draw one cell per frame until the pattern is complete

    if (currentCell < cols * rows) {

      evolvePattern(currentCell);

      currentCell++;

    } else {

      drawingInProgress = false;

    }

  }

}

​

function mousePressed() {

  // Start drawing the flower pattern from the beginning

  drawingInProgress = true;

  currentCell = 0;

}

​

function evolvePattern(currentCell) {

  // Create a flower pattern gradually

  let centerX = floor(cols / 2);

  let centerY = floor(rows / 2);

  let i = currentCell % cols;

  let j = floor(currentCell / cols);

  let distance = dist(i, j, centerX, centerY);

​

  // Set images in a flower pattern

  if (distance < 5 || (distance > 10 && distance < 15)) {

    grid[i][j] = 0;  // Index of the first image

  } else {

    grid[i][j] = 1;  // Index of the second image

  }

}

​