var show = false;

var pixelCoords = new Set(); // Store coordinates as "x,y" strings for uniqueness

var animationIndex = 0;

var lastAnimationTime = 0;

var animationSpeed = 100; // Time between highlights in milliseconds

​

function setup() {

  createCanvas(512, 256); // 128*4 x 64*4 pixels

  background(10);

  colorPicker = createColorPicker("#FFFFFF");

  colorPicker.position(0, height + 10);

  colorPicker.size(colorPicker.width, 28);

  showGridButton();

  saveButton = createButton("DOWNLOAD PNG");

  saveButton.position(width - 150, height + 10);

  saveButton.size(150, 32);

  saveButton.mousePressed(download);

  clearButton = createButton("CLEAR");

  clearButton.position(button.x + button.width + 8, height + 10);

  clearButton.size(clearButton.width, 32);

  clearButton.mousePressed(clean);

  // Add array export button

  exportButton = createButton("EXPORT COORDS");

  exportButton.position(clearButton.x + clearButton.width + 8, height + 10);

  exportButton.size(116, 32);

  exportButton.mousePressed(exportCoords);

}

​

function draw() {

  // Handle animation

  fill(100);

  stroke(150);

​

  line(width/2,0,width/2,height);

  line(0,height/2,width,height/2);

  if (pixelCoords.size > 0) {

    let currentTime = millis();

    if (currentTime - lastAnimationTime > animationSpeed) {

      // Draw all pixels in their normal color

      redrawAllPixels();

      // Draw the current animation pixel in red

      let coordArray = Array.from(pixelCoords);

      let currentCoord = coordArray[animationIndex].split(',').map(Number);

      noStroke();

      fill(255, 0, 0);

      square(currentCoord[0] * grid, currentCoord[1] * grid, grid);

      // Update animation index

      animationIndex = (animationIndex + 1) % coordArray.length;

      lastAnimationTime = currentTime;

    }

  }

  // Handle drawing

  if (mouseIsPressed) {

    var x = snap(mouseX);

    var y = snap(mouseY);

    if (show == false) {

      noStroke();

    } else {

      stroke(150);

    }

    fill(colorPicker.color());

    square(x, y, grid);

    // Convert to grid coordinates and store

    var gridX = Math.floor(x / grid);

    var gridY = Math.floor(y / grid);

    // Check if coordinates are within bounds

    if (gridX >= 0 && gridX < 128 && gridY >= 0 && gridY < 64) {

      pixelCoords.add(`${gridX},${gridY}`); // Store as string for uniqueness

    }

  }

}

​

function createGrid() {

  var l = 0;

  strokeWeight(1);

  stroke(150);

  while (l < width || l < height) {

    line(0, l, width, l);

    line(l, 0, l, height);

    l += grid;

  }

}

​

function removeGrid() {

  var l = 0;

  strokeWeight(1);

  erase();

  while (l < width || l < height) {

    line(0, l, width, l);

    line(l, 0, l, height);

    l += grid;

  }

  noErase();

}

​

function showGridButton() {

  button = createButton("SHOW GRID");

  button.position(colorPicker.width + 8, height + 10);

  button.size(116, 32);

  button.mousePressed(turnOnGrid);

}

​

function eraseGridButton() {

  button = createButton("ERASE GRID");

  button.position(colorPicker.width + 8, height + 10);

  button.size(116, 32);

  button.mousePressed(turnOnGrid);

}

​

function turnOnGrid() {

  if (show == false) {

    createGrid();

    button.remove();

    eraseGridButton();

    show = true;

  } else {

    removeGrid();

    button.remove();

    showGridButton();

    show = false;

  }

}

​

function snap(p) {

  var cell = Math.round((p - grid / 2) / grid);

  return cell * grid;

}

​

function redrawAllPixels() {

  // Redraw all pixels in their normal color

  for (let coordStr of pixelCoords) {

    let coord = coordStr.split(',').map(Number);

    if (show == false) {

      noStroke();

    } else {

      stroke(150);

    }

    fill(colorPicker.color());

    square(coord[0] * grid, coord[1] * grid, grid);

  }

}

​

function clean() {

  clear();

  background(240);

  show = false;

  button.remove();

  showGridButton();

  // Reset coordinates and animation

  pixelCoords.clear();

  animationIndex = 0;

  lastAnimationTime = 0;

}

​

function download() {

  saveCanvas("myPixelArt", "png");

}

​

function exportCoords() {

  let output = "const uint8_t pixelCoords[][2] = {\n";

  // Convert Set of strings back to coordinates and sort them

  let coordArray = Array.from(pixelCoords)

    .map(coord => coord.split(',').map(Number))

    .sort((a, b) => {

      if (a[1] === b[1]) return a[0] - b[0];

      return a[1] - b[1];

    });

  // Generate the coordinate pairs

  coordArray.forEach((coord, index) => {

    output += `  {${coord[0]}, ${coord[1]}}`; // x, y coordinates

    if (index < coordArray.length - 1) output += ",";

    output += "\n";

  });

  output += "};\n";

  output += `const uint16_t numCoords = ${coordArray.length};\n`;

  // Create and download the text file

  let blob = new Blob([output], {type: 'text/plain'});

  let url = window.URL.createObjectURL(blob);

  let a = document.createElement('a');

  a.href = url;

  a.download = 'pixel_coords.txt';

  a.click();

  window.URL.revokeObjectURL(url);

}