var show = false;

var pixelCoords = new Set();

var animationIndex = 0;

var lastAnimationTime = 0;

var animationSpeed = 100;

var lastX = 0;

var lastY = 0;

var exportCount = {};

let refImg;

let imgLoaded = false;

let showRef = false;

let quantizedImg = null;  // Initialize as null

let colorPicker, nameInput, clearButton, exportButton, refButton, fileInput, traceButton;

​

// "Trace Section" feature variables

let traceSectionButton;

let circleSelectMode = false; 

let isDraggingCircle = false;

let circleStartX = 0;

let circleStartY = 0;

let circleRadius = 0;

​

// Eraser feature variable

let eraserButton;

let eraserMode = false;

​

function setup() {

  createCanvas(512, 256);

  background(10);

​

  colorPicker = createColorPicker("#FFFFFF");

  colorPicker.position(0, height + 10);

  colorPicker.size(colorPicker.width, 28);

​

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

​

  exportButton = createButton("EXPORT COORDS");

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

  exportButton.size(116, 32);

  exportButton.mousePressed(exportCoords);

​

  refButton = createButton("REF PICTURE");

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

  refButton.size(100, 32);

  refButton.mousePressed(() => showRef = !showRef);

​

  traceButton = createButton("TRACE");

  traceButton.position(refButton.x + refButton.width + 8, height + 10);

  traceButton.size(80, 32);

  traceButton.mousePressed(traceImage);

​

  fileInput = createFileInput(handleFile);

  fileInput.position(traceButton.x + traceButton.width + 8, height + 10);

​

  // "Trace Section" button

  traceSectionButton = createButton("TRACE SECTION (OFF)");

  traceSectionButton.position(fileInput.x + fileInput.width + 8, height + 10);

  traceSectionButton.size(140, 32);

  traceSectionButton.mousePressed(enableTraceSection);

​

  // Eraser button

  eraserButton = createButton("ERASER (OFF)");

  eraserButton.position(traceSectionButton.x + traceSectionButton.width + 8, height + 10);

  eraserButton.size(100, 32);

  eraserButton.mousePressed(toggleEraser);

​

  let canvasElement = document.querySelector('canvas');

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

    e.preventDefault();

  });

}

​

function draw() {

  background(10);

​

  // Show reference image if toggled

  if (showRef && imgLoaded) {

    push();

    tint(255, 127);

    image(refImg, 0, 0, width, height);

    pop();

  }

​

  // Draw all pixels from pixelCoords

  for (let coordStr of pixelCoords) {

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

    noStroke();

    fill(colorPicker.color());

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

  }

​

  // Simple animation of one highlighted pixel

  if (pixelCoords.size > 0) {

    let nowTime = millis();

    if (nowTime - lastAnimationTime > animationSpeed) {

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

​

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

      lastAnimationTime = nowTime;

    } else {

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

    }

  }

​

  // Cross lines for reference

  stroke(150);

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

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

​

  // Redraw logic to keep animation "blinking"

  if (pixelCoords.size > 0) {

    let nowTime = millis();

    if (nowTime - lastAnimationTime > animationSpeed) {

      if (showRef && imgLoaded) {

        background(10);

        push();

        tint(255, 127);

        image(refImg, 0, 0, width, height);

        pop();

      }

      redrawAllPixels();

​

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

​

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

      lastAnimationTime = nowTime;

    }

  }

​

  // If we are in "circleSelectMode", draw the selection circle while dragging

  if (circleSelectMode) {

    if (isDraggingCircle) {

      stroke(255, 0, 0);

      noFill();

      circleRadius = dist(circleStartX, circleStartY, mouseX, mouseY);

      ellipse(circleStartX, circleStartY, circleRadius * 2, circleRadius * 2);

    }

  } 

  else {

    // Normal painting / erasing logic (only if we are NOT in circle select mode)

    if (mouseIsPressed) {

      var currentX = snap(mouseX);

      var currentY = snap(mouseY);

​

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

        lastX = currentX;

        lastY = currentY;

      }

​

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

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

​

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

        var t = i / steps;

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

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

​

        x = snap(x);

        y = snap(y);

​

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

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

​

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

          // If right-click, erase

          if (mouseButton === RIGHT) {

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

          }

          else if (mouseButton === LEFT) {

            // If eraser mode is on, erase on left-click

            if (eraserMode) {

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

            } 

            // Otherwise paint

            else {

              noStroke();

              fill(colorPicker.color());

              square(x, y, grid);

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

            }

          }

        }

      }

​

      lastX = currentX;

      lastY = currentY;

    } 

    else {

      lastX = 0;

      lastY = 0;

    }

  }

}

​

// p5 mouse functions for "Trace Section" mode

function mousePressed() {

  if (circleSelectMode && mouseButton === LEFT) {

    isDraggingCircle = true;

    circleStartX = mouseX;

    circleStartY = mouseY;

    circleRadius = 0;

  }

}

​

function mouseReleased() {

  if (circleSelectMode && mouseButton === LEFT && isDraggingCircle) {

    isDraggingCircle = false;

    // Perform partial trace on the selected circle region

    let cxQuant = circleStartX / 4;

    let cyQuant = circleStartY / 4;

    let rQuant = circleRadius / 4;

​

    let startPixel = findStartPixelInCircle(cxQuant, cyQuant, rQuant);

    if (startPixel) {

      let contourPoints = traceContourInCircle(startPixel, cxQuant, cyQuant, rQuant);

      for (let point of contourPoints) {

        pixelCoords.add(`${point.x},${point.y}`);

      }

    }

  }

}

​

// Toggle the circle selection mode

function enableTraceSection() {

  circleSelectMode = !circleSelectMode;

  if (circleSelectMode) {

    traceSectionButton.html("TRACE SECTION (ON)");

  } else {

    traceSectionButton.html("TRACE SECTION (OFF)");

  }

}

​

// Toggle eraser mode

function toggleEraser() {

  eraserMode = !eraserMode;

  if (eraserMode) {

    eraserButton.html("ERASER (ON)");

  } else {

    eraserButton.html("ERASER (OFF)");

  }

}

​

// Helper: check if a point (x,y) is inside the circle (cx,cy,r)

function insideCircle(cx, cy, r, x, y) {

  let dx = x - cx;

  let dy = y - cy;

  return (dx*dx + dy*dy) <= (r*r);

}

​

// Find the first black pixel (bottom-to-top) within the circle

function findStartPixelInCircle(cx, cy, r) {

  for (let x = 0; x < 128; x++) {

    for (let y = 63; y >= 0; y--) {

      if (insideCircle(cx, cy, r, x, y) && getPixelColor(x, y) < 127) {

        return { x, y };

      }

    }

  }

  return null;

}

​

// Trace contour within the circle using Moore's boundary following

function traceContourInCircle(start, cx, cy, r) {

  let contourPoints = [];

  let visited = new Set();

  let current = start;

  let lastMove = { x: current.x, y: current.y + 1 };

​

  do {

    contourPoints.push(current);

    let key = `${current.x},${current.y}`;

    visited.add(key);

​

    let neighbors = getMooreNeighbors(current);

    let found = false;

    let backtrackPoint = lastMove;

​

    let startIdx = 0;

    for (let i = 0; i < neighbors.length; i++) {

      if (neighbors[i].x === backtrackPoint.x && neighbors[i].y === backtrackPoint.y) {

        startIdx = (i + 1) % 8;

        break;

      }

    }

​

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

      let idx = (startIdx + i) % 8;

      let neighbor = neighbors[idx];

​

      // Check if neighbor is black AND inside the selection circle

      if (insideCircle(cx, cy, r, neighbor.x, neighbor.y) && getPixelColor(neighbor.x, neighbor.y) < 127) {

        lastMove = current;

        current = neighbor;

        found = true;

        break;

      }

    }

​

    if (!found) {

      current = backtrackPoint;

    }

​

  } while (

    !(current.x === start.x &&

      current.y === start.y &&

      contourPoints.length > 2)

  );

​

  return contourPoints;

}

​

function handleFile(file) {

  imgLoaded = false;

  quantizedImg = null;  // Reset quantizedImg

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

    refImg = createImg(file.data, 'Reference image', 'anonymous', imgCreated);

    refImg.hide();

  } else {

    refImg = null;

  }

}

​

function imgCreated() {

  refImg.hide();

  let g = createGraphics(refImg.elt.width, refImg.elt.height);

  g.image(refImg, 0, 0);

  refImg.remove();

  refImg = g.get(0, 0, g.width, g.height);

​

  if (refImg.width / refImg.height > width / height) {

    refImg.resize(width, 0);

  } else {

    refImg.resize(0, height);

  }

​

  // Create quantized version for tracing

  quantizedImg = createGraphics(128, 64);

  quantizedImg.pixelDensity(1);

  quantizedImg.background(255);

  quantizedImg.image(refImg, 0, 0, 128, 64);

  quantizedImg.loadPixels();

​

  // Threshold the image

  for (let i = 0; i < quantizedImg.pixels.length; i += 4) {

    let avg = (quantizedImg.pixels[i] + quantizedImg.pixels[i + 1] + quantizedImg.pixels[i + 2]) / 3;

    let binary = avg < 127 ? 0 : 255;

    quantizedImg.pixels[i] = binary;

    quantizedImg.pixels[i + 1] = binary;

    quantizedImg.pixels[i + 2] = binary;

    quantizedImg.pixels[i + 3] = 255;

  }

  quantizedImg.updatePixels();

​

  imgLoaded = true;

  showRef = true;

}

​

function getPixelColor(x, y) {

  if (!quantizedImg || x < 0 || x >= 128 || y < 0 || y >= 64) return 255;

  let index = 4 * (y * 128 + x);

  return quantizedImg.pixels[index];

}

​

function findStartPixel() {

  if (!quantizedImg) return null;

  for (let x = 0; x < 128; x++) {

    for (let y = 63; y >= 0; y--) {

      if (getPixelColor(x, y) < 127) {

        return { x, y };

      }

    }

  }

  return null;

}

​

function getMooreNeighbors(pixel) {

  return [

    { x: pixel.x + 1, y: pixel.y },     // right

    { x: pixel.x + 1, y: pixel.y - 1 }, // top-right

    { x: pixel.x,     y: pixel.y - 1 }, // top

    { x: pixel.x - 1, y: pixel.y - 1 }, // top-left

    { x: pixel.x - 1, y: pixel.y },     // left

    { x: pixel.x - 1, y: pixel.y + 1 }, // bottom-left

    { x: pixel.x,     y: pixel.y + 1 }, // bottom

    { x: pixel.x + 1, y: pixel.y + 1 }  // bottom-right

  ];

}

​

function traceContour(start) {

  let contourPoints = [];

  let visited = new Set();

  let current = start;

  let lastMove = { x: current.x, y: current.y + 1 };

​

  do {

    contourPoints.push(current);

    let key = `${current.x},${current.y}`;

    visited.add(key);

​

    let neighbors = getMooreNeighbors(current);

    let found = false;

    let backtrackPoint = lastMove;

​

    let startIdx = 0;

    for (let i = 0; i < neighbors.length; i++) {

      if (neighbors[i].x === backtrackPoint.x && neighbors[i].y === backtrackPoint.y) {

        startIdx = (i + 1) % 8;

        break;

      }

    }

​

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

      let idx = (startIdx + i) % 8;

      let neighbor = neighbors[idx];

​

      if (getPixelColor(neighbor.x, neighbor.y) < 127) {

        lastMove = current;

        current = neighbor;

        found = true;

        break;

      }

    }

​

    if (!found) {

      current = backtrackPoint;

    }

​

  } while (

    !(current.x === start.x &&

      current.y === start.y &&

      contourPoints.length > 2)

  );

​

  return contourPoints;

}

​

function traceImage() {

  if (!imgLoaded || !quantizedImg) {

    console.log('No image loaded');

    return;

  }

​

  clean();

​

  let startPixel = findStartPixel();

  if (startPixel) {

    let contourPoints = traceContour(startPixel);

​

    for (let point of contourPoints) {

      pixelCoords.add(`${point.x},${point.y}`);

    }

  }

}

​

function snap(p) {

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

  return cell * grid;

}

​

function redrawAllPixels() {

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

  pixelCoords.clear();

  animationIndex = 0;

  lastAnimationTime = 0;

}

​

function exportCoords() {

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

​

  if (!(baseName in exportCount)) {

    exportCount[baseName] = 0;

  }

​

  exportCount[baseName]++;

​

  let varName = baseName;

  if (exportCount[baseName] > 1) {

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

  }

​

  let output = `const uint8_t ${varName}[][2] = {\n`;

​

  let coordArray = Array.from(pixelCoords)

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

​

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

    output += `  {${coord[0]}, ${coord[1]}}`;

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

    output += "\n";

  });

​

  output += "};\n";

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

​

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

}

​