let landmarks = [];

let mode = "paintbrush"; // Default mode

let selectedColor = "red"; // Default selected color

let drawingLayer; // Separate layer for drawings

const colors = ["red", "orange", "yellow", "green", "blue", "purple", "white", "black"];

let isDrawing = true; // State to track drawing activity

let actionsStack = []; // Stack to track actions for undo

​

function setup() {

  const canvas = createCanvas(640, 480);

  canvas.parent("output_canvas");

​

  // Create a graphics buffer for persistent drawings

  drawingLayer = createGraphics(640, 480);

  drawingLayer.clear();

​

  // Webcam setup

  video = createCapture(VIDEO);

  video.size(640, 480);

  video.hide();

​

  // MediaPipe Hands setup

  const hands = new Hands({

    locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`,

  });

​

  hands.setOptions({

    maxNumHands: 1,

    modelComplexity: 1,

    minDetectionConfidence: 0.7,

    minTrackingConfidence: 0.7,

  });

​

  const mediapipeCamera = new Camera(video.elt, {

    onFrame: async () => {

      await hands.send({ image: video.elt });

    },

    width: 640,

    height: 480,

  });

  mediapipeCamera.start();

​

  hands.onResults((results) => {

    if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {

      landmarks = results.multiHandLandmarks[0];

    } else {

      landmarks = [];

    }

  });

​

  createColorPalette();

  select("#paintbrush-mode").mousePressed(() => (mode = "paintbrush"));

  select("#sprinkle-mode").mousePressed(() => (mode = "sprinkle-trail"));

  select("#clear-canvas").mousePressed(clearCanvas);

  select("#save-canvas").mousePressed(saveCanvasWithWebcam);

  select("#toggle-drawing").mousePressed(toggleDrawing);

  select("#undo-drawing").mousePressed(undoLastAction);

  select("#back-to-menu").mousePressed(() => {

    select("#drawing-interface").hide();

    select("#intro-page").style("display", "flex");

  });

​

  // Start button event

  select("#start-doodle").mousePressed(startDoodle);

}

​

function draw() {

  // Flip the canvas horizontally

  push();

  translate(width, 0);

  scale(-1, 1);

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

  pop();

​

  // Overlay the drawing layer

  image(drawingLayer, 0, 0);

​

  if (isDrawing && landmarks.length > 0) {

    const indexTip = landmarks[8]; // Index finger tip

    const thumbTip = landmarks[4]; // Thumb tip

​

    // Map coordinates to canvas size (adjust for flipped video)

    const x = width - indexTip.x * width;

    const y = indexTip.y * height;

​

    // Check for pinch gesture

    const pinchDistance = dist(

      width - indexTip.x * width,

      indexTip.y * height,

      width - thumbTip.x * width,

      thumbTip.y * height

    );

​

    if (mode === "paintbrush") {

      drawingLayer.noStroke();

      drawingLayer.fill(selectedColor);

      drawingLayer.ellipse(x, y, 10, 10);

​

      // Save the current stroke

      actionsStack.push({ type: "ellipse", x, y, color: selectedColor });

    } else if (mode === "sprinkle-trail") {

      const particles = [];

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

        let particleX = x + random(-10, 10);

        let particleY = y + random(-10, 10);

        drawingLayer.fill(random(100, 255), random(100, 255), random(100, 255), 150);

        drawingLayer.noStroke();

        drawingLayer.ellipse(particleX, particleY, random(5, 10));

​

        // Save the particle details

        particles.push({ x: particleX, y: particleY });

      }

      actionsStack.push({ type: "sprinkle", particles });

    }

  }

}

​

function createColorPalette() {

  const palette = select("#color-palette");

  colors.forEach((color) => {

    const colorBox = createDiv();

    colorBox.addClass("color-box");

    colorBox.style("background-color", color);

    colorBox.parent(palette);

    colorBox.mousePressed(() => {

      selectedColor = color;

    });

  });

}

​

function clearCanvas() {

  drawingLayer.clear();

  actionsStack = []; // Clear the actions stack

}

​

function saveCanvasWithWebcam() {

  const combinedLayer = createGraphics(640, 480);

​

  combinedLayer.push();

  combinedLayer.translate(combinedLayer.width, 0);

  combinedLayer.scale(-1, 1);

  combinedLayer.image(video, 0, 0, combinedLayer.width, combinedLayer.height);

  combinedLayer.pop();

​

  combinedLayer.image(drawingLayer, 0, 0);

​

  save(combinedLayer, "doodle_with_webcam", "png");

}

​

function toggleDrawing() {

  isDrawing = !isDrawing;

​

  // Update button text dynamically

  const toggleButton = select("#toggle-drawing");

  if (isDrawing) {

    toggleButton.html("Stop Drawing");

  } else {

    toggleButton.html("Resume Drawing");

  }

}

​

function undoLastAction() {

  if (actionsStack.length > 0) {

    actionsStack.pop(); // Remove the last action

    redrawCanvas(); // Redraw the canvas without the last action

  }

}

​

function redrawCanvas() {

  drawingLayer.clear(); // Clear the drawing layer

  actionsStack.forEach((action) => {

    if (action.type === "ellipse") {

      drawingLayer.noStroke();

      drawingLayer.fill(action.color);

      drawingLayer.ellipse(action.x, action.y, 10, 10);

    } else if (action.type === "sprinkle") {

      action.particles.forEach((particle) => {

        drawingLayer.fill(random(100, 255), random(100, 255), random(100, 255), 150);

        drawingLayer.noStroke();

        drawingLayer.ellipse(particle.x, particle.y, random(5, 10));

      });

    }

  });

}

​

function startDoodle() {

  select("#intro-page").hide();

  select("#drawing-interface").style("display", "flex");

}

​