let currentIndex = 0;

let scale = 4;

let started = false;

​

function setup() {

  createCanvas(800, 400);

  background(255);

  //frameRate(2);

  // Create file input

  let fileInput = createFileInput(handleFile);

  fileInput.position(10, 10);

}

​

function draw() {

  if (!started || currentIndex >= gridData.length) return;

  // Set background only once at start

  if (currentIndex === 0) {

    background(255);

  }

  // Draw one point per frame

  let point = gridData[currentIndex];

  fill(0);

  noStroke();

  rect(point[0] * scale, point[1] * scale, scale, scale);

  currentIndex++;

​

}

​

function handleFile(file) {

  if (file.type === 'text') {

    let content = file.data;

    // Reset animation

    gridData = [];

    currentIndex = 0;

    // Find the array content between the first { and the last }

    let arrayContent = content.substring(

      content.indexOf('{'),

      content.lastIndexOf('}') + 1

    );

    // Match all coordinate pairs maintaining order

    let matches = arrayContent.matchAll(/\{(\d+),\s*(\d+)\}/g);

    for (let match of matches) {

      gridData.push([parseInt(match[1]), parseInt(match[2])]);

    }

    // Start animation

    started = true;

    loop();

  }

}