xxxxxxxxxx375
var capture;paint = [];let handSignUsed = "";//changes on gesturelet circleSizeX = 10;let circleSizeY = 10;let cColor1 = 100;let cColor2 = 100;let cColor3 = 200;let save_button;let prevPointer = [ // Left hand [ { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }, ], // Right hand [ { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }, ],];let fingertips = [8, 12, 16, 20];///////////////////////////////////////////////////////////////////////function preload() {}///////////////////////////////////////////////////////////////////////function setup() { sceneNum = 0; //save button save_button = createButton("Save photo"); save_button.position(10, 10); save_button.mousePressed(save_photo); save_button.style("background-color", "#FFFFFF"); save_button.hide(); buttonStart = createButton("Start Gesture Tracking"); buttonStart.class("handsfree-show-when-stopped"); buttonStart.class("handsfree-hide-when-loading"); buttonStart.mousePressed(() => handsfree.start()); // Create a "loading..." button buttonLoading = createButton("...loading..."); buttonLoading.class("handsfree-show-when-loading"); // Create a stop button buttonStop = createButton("Stop Gesture Tracking"); buttonStop.class("handsfree-show-when-started"); buttonStop.mousePressed(() => handsfree.stop()); sketch = createCanvas(640, 480); capture = createCapture(VIDEO); capture.hide(); rectMode(CENTER); noStroke(); pixelDensity(1); // Colors for each fingertip colorMap = [ // Left fingertips [ color(random(255), random(255), random(255)), color(random(255), random(255), random(255)), color(random(255), random(255), random(255)), color(255, 255, 255), ], // Right fingertips [ color(random(255), random(255), random(255)), color(random(255), random(255), random(255)), color(random(255), random(255), random(255)), color(random(255), random(255), random(255)), ], ]; // #1 Turn on some models (hand tracking) and the show debugger // @see https://handsfree.js.org/#quickstart-workflow handsfree = new Handsfree({ // showDebug: true, // Comment this out to hide the default webcam feed with landmarks hands: true, }); handsfree.enablePlugins("browser"); handsfree.plugin.pinchScroll.disable(); // Add webcam buttons under the canvas // Handsfree.js comes with a bunch of classes to simplify hiding/showing things when things are loading // @see https://handsfree.js.org/ref/util/classes.html#started-loading-and-stopped-states}/** * Main draw loop */function draw() { push(); interactGestureRight(); runCamera1(); pop(); push(); interactGestureLeft(); runCamera2(); pop(); drawHands(); save_button.show(); if (frameCount < 500){ push(); fill(0); noStroke(); text("Turn on Gesture Tracking & pinch your fingers on-camera to reveal image", 100, 25); pop(); }else{}}function runCamera1() { push(); translate(width, 0); // move to far corner scale(-1.0, 1.0); capture.loadPixels(); for (var cy = 0; cy < capture.height; cy += 10) { for (var cx = 0; cx < capture.width; cx += 5) { var offset = (cy * capture.width + cx) * 4; var c = color( capture.pixels[offset], capture.pixels[offset + 1], capture.pixels[offset + 2], 50 ); var b = brightness(c); c = color(cColor1, cColor2, cColor3, b); var xpos = (cx / capture.width) * width; var ypos = (cy / capture.height) * height; rect( xpos, ypos, circleSizeX, circleSizeY * (capture.pixels[offset + 1] / 100) ); //rect(xpos, ypos, 10, 10); } } pop();}function runCamera2() { push(); translate(width, 0); // move to far corner scale(-1.0, 1.0); capture.loadPixels(); for (var cy = 0; cy < capture.height; cy += 10) { for (var cx = 0; cx < capture.width; cx += 5) { var offset = (cy * capture.width + cx) * 4; var c = color( capture.pixels[offset], capture.pixels[offset + 1], capture.pixels[offset + 2], 10 ); var b = brightness(c); c = color(2, 2, 2, b); var xpos = (cx / capture.width) * width; var ypos = (cy / capture.height) * height; rect( xpos, ypos, circleSizeX, circleSizeY * (capture.pixels[offset + 1] / 100) ); //rect(xpos, ypos, 10, 10); } } pop();}function runCamera3() { push(); blendMode(DARKEST); translate(width, 0); // move to far corner scale(-1.0, 1.0); image(capture, 0, 0, width, (width * capture.height) / capture.width); filter(THRESHOLD); pop();}///LEFTfunction interactGestureLeft() { let bounds = document.querySelector("canvas").getClientRects()[0]; const hands = handsfree.data?.hands; // Paint with fingers if (hands?.pinchState) { // Loop through each hand hands.pinchState.forEach((hand, handIndex) => { // Loop through each finger hand.forEach((state, finger) => { if (hands.landmarks?.[handIndex]?.[fingertips[finger]]) { // Landmarks are in percentage, so lets scale up let x = sketch.width - hands.landmarks[handIndex][fingertips[finger]].x * sketch.width; let y = hands.landmarks[handIndex][fingertips[finger]].y * sketch.height; if (handIndex === 0) { // Start line on the spot that we pinched if (state === "start") { prevPointer[0][finger] = { x, y }; // Add a line to the paint array } else if (state === "held") { paint.push([ prevPointer[0][finger].x, prevPointer[0][finger].y, x, y, colorMap[0][finger], ]); circleSizeX = map(prevPointer[0][finger].x, 0, 640, 1, 10); circleSizeY = map(prevPointer[0][finger].y, 0, 480, 1, 10); } // Set the last position prevPointer[0][finger] = { x, y }; } else { } } }); }); } // Draw Paint paint.forEach((p) => { fill(p[4]); line(p[0], p[1], p[2], p[3]); });}////RIGHTfunction interactGestureRight() { let bounds = document.querySelector("canvas").getClientRects()[0]; const hands = handsfree.data?.hands; // Paint with fingers if (hands?.pinchState) { // Loop through each hand hands.pinchState.forEach((hand, handIndex) => { // Loop through each finger hand.forEach((state, finger) => { if (hands.landmarks?.[handIndex]?.[fingertips[finger]]) { // Landmarks are in percentage, so lets scale up let x = sketch.width - hands.landmarks[handIndex][fingertips[finger]].x * sketch.width; let y = hands.landmarks[handIndex][fingertips[finger]].y * sketch.height; if (handIndex === 1) { // Start line on the spot that we pinched if (state === "start") { prevPointer[1][finger] = { x, y }; // Add a line to the paint array } else if (state === "held") { paint.push([ prevPointer[1][finger].x, prevPointer[1][finger].y, x, y, colorMap[1][finger], ]); circleSizeX = map(prevPointer[1][finger].x, 0, 640, 1, 10); circleSizeY = map(prevPointer[1][finger].y, 0, 480, 1, 10); push(); runCamera3(); pop(); } // Set the last position prevPointer[1][finger] = { x, y }; } else { } } }); }); } // Draw Paint paint.forEach((p) => { fill(p[4]); line(p[0], p[1], p[2], p[3]); });}function drawHands() { const hands = handsfree.data?.hands; // Bail if we don't have anything to draw if (!hands?.landmarks) return; // Draw keypoints hands.landmarks.forEach((hand, handIndex) => { hand.forEach((landmark, landmarkIndex) => { // Set color // @see https://handsfree.js.org/ref/model/hands.html#data if (colorMap[handIndex]) { switch (landmarkIndex) { case 8: fill(colorMap[handIndex][0]); break; case 12: fill(colorMap[handIndex][1]); break; case 16: fill(colorMap[handIndex][2]); break; case 20: fill(colorMap[handIndex][3]); break; default: fill(255, 255, 255); } } // Set stroke if (handIndex === 0 && landmarkIndex === 8) { stroke(color(0, 0, 255)); strokeWeight(0); circleSize = 10; } else { stroke(color(0, 0, 0)); strokeWeight(0); circleSize = 10; } circle( // Flip horizontally sketch.width - landmark.x * sketch.width, landmark.y * sketch.height, circleSize ); }); });}function save_photo() { saveCanvas(canvas, "CCLab-ExperimentalCam", "jpg");}