let landmarks = []; // Array to store landmarks for all detected hands

let mode = "paintbrush"; // Default mode of operation

let selectedColor = "red"; // Default color for drawing

let drawingLayer; // Separate graphics layer for drawing

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

let isDrawing = true; // State to track whether drawing is enabled

let actionsStack = []; // Stack to store drawing actions for undo functionality

let brushSize = 10; // Default size for the brush

​

function setup() {

  const canvas = createCanvas(770, 600); // Create a canvas with specified dimensions

  canvas.parent("output_canvas"); // Attach canvas to an HTML element

​

  // Initialize a separate graphics buffer for persistent drawings

  drawingLayer = createGraphics(770, 600);

  drawingLayer.clear(); // Clear the buffer to start fresh

​

  // Webcam setup for capturing live video

  video = createCapture(VIDEO);

  video.size(700, 640); // Set video dimensions

  video.hide(); // Hide the video element (only display it on canvas)

​

  // Configure MediaPipe Hands for hand tracking

  const hands = new Hands({

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

  });

​

  hands.setOptions({

    maxNumHands: 2, // Detect up to two hands

    modelComplexity: 1, // Use the standard model complexity

    minDetectionConfidence: 0.7, // Minimum confidence for detection

    minTrackingConfidence: 0.7, // Minimum confidence for tracking

  });

​

  // Connect webcam feed to MediaPipe Hands

  const mediapipeCamera = new Camera(video.elt, {

    onFrame: async () => {

      await hands.send({ image: video.elt }); // Process the current video frame

    },

    width: 640,

    height: 480,

  });

  mediapipeCamera.start(); // Start the camera feed

​

  // Event listener for hand detection results

  hands.onResults((results) => {

    if (results.multiHandLandmarks) {

      landmarks = results.multiHandLandmarks; // Update landmarks with detected hand data

    } else {

      landmarks = []; // Reset landmarks if no hands are detected

    }

  });

​

  // Initialize color palette and buttons

  createColorPalette();

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

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

  select("#eraser-mode").mousePressed(() => (mode = "eraser")); // Switch to eraser mode

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

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

  select("#toggle-drawing").mousePressed(toggleDrawing); // Toggle drawing on/off

  select("#undo-drawing").mousePressed(undoLastAction); // Undo the last drawing action

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

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

    select("#intro-page").style("display", "flex"); // Return to the intro page

  });

​

  // Brush size slider setup

  const brushSizeSlider = select("#brush-size-slider");

  const brushSizeDisplay = select("#brush-size-display");

​

  brushSizeSlider.input(() => {

    brushSize = brushSizeSlider.value(); // Update brush size

    brushSizeDisplay.html(brushSize); // Display current brush size

  });

​

  // Start button to begin the doodling experience

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

}

​

function draw() {

  // Mirror the video feed horizontally

  push();

  translate(width, 0);

  scale(-1, 1); // Flip the canvas horizontally

  image(video, 0, 0, width, height); // Display the video feed

  pop();

​

  // Overlay the drawing layer on top of the video feed

  image(drawingLayer, 0, 0);

​

  // Draw based on detected hand landmarks

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

    for (let hand of landmarks) {

      const indexTip = hand[8]; // Index finger tip landmark

​

      // Convert hand coordinates to canvas coordinates

      const x = width - indexTip.x * width; // Adjust for flipped video

      const y = indexTip.y * height;

​

      if (mode === "paintbrush") {

        // Paintbrush mode: draw circles with the selected color

        drawingLayer.noStroke();

        drawingLayer.fill(selectedColor);

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

​

        // Record the action for undo functionality

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

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

        // Sprinkle mode: draw a trail of random particles

        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 particle details for undo

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

        }

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

      } else if (mode === "eraser") {

        // Eraser mode: erase with transparent fill

        drawingLayer.noStroke();

        drawingLayer.fill(0, 0, 0, 0);

        drawingLayer.erase(255, 255); // Enable eraser

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

        drawingLayer.noErase(); // Disable eraser after use

      }

    }

  }

}

​

function keyPressed() {

  if (key === 'f' || key === 'F') {

    let fs = fullscreen();

    fullscreen(!fs); // Toggle fullscreen mode

  }

}

​

function createColorPalette() {

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

  colors.forEach((color) => {

    const colorBox = createDiv(); // Create a color box

    colorBox.addClass("color-box");

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

    colorBox.parent(palette); // Add the color box to the palette

    colorBox.mousePressed(() => {

      selectedColor = color; // Change the selected color

    });

  });

}

​

function clearCanvas() {

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

  actionsStack = []; // Reset the actions stack

}

​

function saveCanvasWithWebcam() {

  // Create a combined layer with the video and drawing

  const combinedLayer = createGraphics(640, 480);

​

  combinedLayer.push();

  combinedLayer.translate(combinedLayer.width, 0);

  combinedLayer.scale(-1, 1); // Flip the video horizontally

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

  combinedLayer.pop();

​

  combinedLayer.image(drawingLayer, 0, 0); // Overlay the drawing layer

​

  save(combinedLayer, "doodle_with_webcam", "png"); // Save the combined image

}

​

function toggleDrawing() {

  isDrawing = !isDrawing; // Toggle the drawing state

​

  // Update the button text based on the current state

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

  toggleButton.html(isDrawing ? "Stop Drawing" : "Resume Drawing");

}

​

function undoLastAction() {

  if (actionsStack.length > 0) {

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

    redrawCanvas(); // Redraw the canvas to reflect changes

  }

}

​

function redrawCanvas() {

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

  actionsStack.forEach((action) => {

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

      // Redraw ellipses

      drawingLayer.noStroke();

      drawingLayer.fill(action.color);

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

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

      // Redraw sprinkle trails

      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(); // Hide the intro page

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

}

​