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

var lastX = 0;

var lastY = 0;

var exportCount = {};  // Track export counts for each name

​

function setup() {

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

  background(10);

  // Create color picker

  colorPicker = createColorPicker("#FFFFFF");

  colorPicker.position(0, height + 10);

  colorPicker.size(colorPicker.width, 28);

  // Create name input field

  nameInput = createInput('mySprite');

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

  nameInput.size(150, 28);

  clearButton = createButton("CLEAR");

  clearButton.position(nameInput.x + nameInput.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);

​

  // Prevent context menu on right click

  canvas.addEventListener('contextmenu', (e) => {

    e.preventDefault();

  });

}

​

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 and erasing

  if (mouseIsPressed) {

    var currentX = snap(mouseX);

    var currentY = snap(mouseY);

    // If this is the first point of the stroke, initialize last position

    if (lastX === 0 && lastY === 0) {

      lastX = currentX;

      lastY = currentY;

    }

    // Calculate number of steps needed based on distance

    var distance = dist(lastX, lastY, currentX, currentY);

    var steps = Math.max(1, Math.ceil(distance / grid));

    // Interpolate points between last and current position

    for (var i = 0; i <= steps; i++) {

      var t = i / steps;

      var x = lerp(lastX, currentX, t);

      var y = lerp(lastY, currentY, t);

      // Snap interpolated points to grid

      x = snap(x);

      y = snap(y);

      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) {

        if (mouseButton === RIGHT) {

          // Erase pixel

          pixelCoords.delete(`${gridX},${gridY}`);

          // Clear the pixel on canvas

          fill(10); // Background color

          noStroke();

          square(x, y, grid);

        } else if (mouseButton === LEFT) {

          // Draw pixel

          noStroke();

          fill(colorPicker.color());

          square(x, y, grid);

          pixelCoords.add(`${gridX},${gridY}`);

        }

      }

    }

    // Update last position for next frame

    lastX = currentX;

    lastY = currentY;

  } else {

    // Reset last position when mouse is released

    lastX = 0;

    lastY = 0;

  }

}

​

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);

    noStroke();

    fill(colorPicker.color());

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

  }

}

​

function clean() {

  clear();

  background(10);

  // Reset coordinates and animation

  pixelCoords.clear();

  animationIndex = 0;

  lastAnimationTime = 0;

}

​

function exportCoords() {

  let baseName = nameInput.value().trim() || 'mySprite';

  // Initialize counter for this base name if it doesn't exist

  if (!(baseName in exportCount)) {

    exportCount[baseName] = 0;

  }

  // Increment counter

  exportCount[baseName]++;

  // Create variable name with suffix if needed

  let varName = baseName;

  if (exportCount[baseName] > 1) {

    varName = `${baseName}_${exportCount[baseName]}`;

  }

  let output = `const uint8_t ${varName}[][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 ${varName}_length = ${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 = `${varName}.txt`;

  a.click();

  window.URL.revokeObjectURL(url);

}