- mySketch
xxxxxxxxxx//https://handsfree.js.org/gesture/let handsfree;let gesture = "";let last = "";let backgroundColor = 'WHITE';let score = 0;let img;function preload() { img = loadImage('RED.jpg'); console.log(img);}function setup() { createCanvas(windowWidth, windowHeight); handsfree = new Handsfree({ hands: true, maxNumHands: 1, minDetectionConfidence: 7}); activateGestures(); handsfree.start(); document.addEventListener('handsfree-data', event => { const data = event.detail if (!data.hands.gesture) return for (i = 0; i < data.hands.gesture.length; i++) { if (data.hands.gesture[i] != null) { if (data.hands.gesture[i].name != "" && data.hands.gesture[i].name != last) { gesture += data.hands.gesture[i].name; last = data.hands.gesture[i].name; //console.log(data.hands.gesture[i]) } } } })}function draw() { image(img, 0, 0); background(backgroundColor); if(backgroundColor != 'WHITE') { fill('white') } else { fill(0); } textAlign(CENTER, CENTER); textSize(100); text(gesture, width / 4 * 3, height / 2);}function keyPressed() { if (keyCode == BACKSPACE) { gesture = ""; } else { gesture += key; } if (gesture == 'RED' || gesture == 'BLUE' || gesture == 'BLACK' || gesture == 'CYAN') { score++; console.log(score); backgroundColor = gesture; redraw(); }}function activateGestures() { // ahandsfree.useGesture({ "name": "R", "algorithm": "fingerpose", "models": "hands", "confidence": "1", "description": [ [ "addCurl", "Thumb", "NoCurl", 1 ], [ "addDirection", "Thumb", "VerticalUp", 1 ], [ "addCurl", "Index", "NoCurl", 1 ], [ "addDirection", "Index", "VerticalUp", 1 ], [ "addCurl", "Middle", "NoCurl", 1 ], [ "addDirection", "Middle", "DiagonalUpLeft", 1 ], [ "addCurl", "Ring", "FullCurl", 1 ], [ "addDirection", "Ring", "VerticalUp", 1 ], [ "addDirection", "Ring", "DiagonalUpLeft", 0.034482758620689655 ], [ "addCurl", "Pinky", "FullCurl", 1 ], [ "addDirection", "Pinky", "DiagonalUpLeft", 1 ] ]}) handsfree.useGesture({ "name": "B", "algorithm": "fingerpose", "models": "hands", "confidence": "10", "description": [ [ "addCurl", "Thumb", "NoCurl", 1 ], [ "addDirection", "Thumb", "VerticalUp", 1 ], [ "addCurl", "Index", "NoCurl", 1 ], [ "addDirection", "Index", "VerticalUp", 1 ], [ "addDirection", "Index", "DiagonalUpLeft", 0.07142857142857142 ], [ "addCurl", "Middle", "NoCurl", 1 ], [ "addDirection", "Middle", "VerticalUp", 1 ], [ "addDirection", "Middle", "DiagonalUpLeft", 0.034482758620689655 ], [ "addCurl", "Ring", "NoCurl", 1 ], [ "addDirection", "Ring", "VerticalUp", 1 ], [ "addCurl", "Pinky", "NoCurl", 1 ], [ "addDirection", "Pinky", "VerticalUp", 1 ] ]}) handsfree.useGesture({ "name": "T", "algorithm": "fingerpose", "models": "hands", "confidence": "10", "description": [ [ "addCurl", "Thumb", "NoCurl", 1 ], [ "addDirection", "Thumb", "DiagonalUpLeft", 1 ], [ "addDirection", "Thumb", "VerticalUp", 0.42857142857142855 ], [ "addCurl", "Index", "NoCurl", 1 ], [ "addDirection", "Index", "HorizontalLeft", 1 ], [ "addDirection", "Index", "DiagonalUpLeft", 0.15384615384615385 ], [ "addCurl", "Middle", "FullCurl", 1 ], [ "addDirection", "Middle", "HorizontalLeft", 1 ], [ "addDirection", "Middle", "DiagonalUpLeft", 0.07142857142857142 ], [ "addCurl", "Ring", "FullCurl", 1 ], [ "addDirection", "Ring", "HorizontalLeft", 1 ], [ "addCurl", "Pinky", "FullCurl", 1 ], [ "addDirection", "Pinky", "HorizontalLeft", 1 ], [ "addDirection", "Pinky", "DiagonalDownLeft", 0.07142857142857142 ] ]}) handsfree.useGesture({ "name": "O", "algorithm": "fingerpose", "models": "hands", "confidence": "5", "description": [ [ "addCurl", "Thumb", "NoCurl", 1 ], [ "addDirection", "Thumb", "HorizontalLeft", 1 ], [ "addDirection", "Thumb", "DiagonalUpLeft", 0.034482758620689655 ], [ "addCurl", "Index", "HalfCurl", 1 ], [ "addDirection", "Index", "HorizontalLeft", 1 ], [ "addDirection", "Index", "DiagonalUpLeft", 0.5 ], [ "addCurl", "Middle", "HalfCurl", 1 ], [ "addDirection", "Middle", "DiagonalUpLeft", 1 ], [ "addDirection", "Middle", "HorizontalLeft", 1 ], [ "addCurl", "Ring", "HalfCurl", 1 ], [ "addDirection", "Ring", "DiagonalUpLeft", 1 ], [ "addDirection", "Ring", "HorizontalLeft", 0.5789473684210527 ], [ "addCurl", "Pinky", "HalfCurl", 1 ], [ "addDirection", "Pinky", "DiagonalUpLeft", 0.2 ], [ "addDirection", "Pinky", "HorizontalLeft", 1 ] ]}) handsfree.useGesture({ "name": "L", "algorithm": "fingerpose", "models": "hands", "confidence": "4", "description": [ [ "addCurl", "Thumb", "NoCurl", 1 ], [ "addDirection", "Thumb", "HorizontalLeft", 1 ], [ "addDirection", "Thumb", "DiagonalUpLeft", 0.36363636363636365 ], [ "addCurl", "Index", "NoCurl", 1 ], [ "addDirection", "Index", "VerticalUp", 1 ], [ "addCurl", "Middle", "FullCurl", 1 ], [ "addDirection", "Middle", "VerticalUp", 1 ], [ "addDirection", "Middle", "DiagonalUpRight", 0.047619047619047616 ], [ "addDirection", "Middle", "DiagonalUpLeft", 0.38095238095238093 ], [ "addCurl", "Ring", "FullCurl", 1 ], [ "addDirection", "Ring", "VerticalUp", 0.5789473684210527 ], [ "addDirection", "Ring", "DiagonalUpRight", 1 ], [ "addCurl", "Pinky", "FullCurl", 1 ], [ "addDirection", "Pinky", "DiagonalUpRight", 1 ] ], "enabled": true}) handsfree.useGesture({ "name": "A", "algorithm": "fingerpose", "models": "hands", "confidence": "10", "description": [ [ "addCurl", "Thumb", "NoCurl", 1 ], [ "addDirection", "Thumb", "DiagonalUpLeft", 1 ], [ "addDirection", "Thumb", "VerticalUp", 0.7647058823529411 ], [ "addCurl", "Index", "FullCurl", 1 ], [ "addDirection", "Index", "DiagonalUpLeft", 1 ], [ "addDirection", "Index", "VerticalUp", 0.5789473684210527 ], [ "addCurl", "Middle", "FullCurl", 1 ], [ "addDirection", "Middle", "DiagonalUpLeft", 0.42857142857142855 ], [ "addDirection", "Middle", "VerticalUp", 1 ], [ "addCurl", "Ring", "FullCurl", 1 ], [ "addDirection", "Ring", "VerticalUp", 1 ], [ "addDirection", "Ring", "DiagonalUpLeft", 0.034482758620689655 ], [ "addCurl", "Pinky", "FullCurl", 1 ], [ "addDirection", "Pinky", "VerticalUp", 0.875 ], [ "addDirection", "Pinky", "DiagonalUpRight", 1 ] ], "enabled": true}) handsfree.useGesture({ "name": "U", "algorithm": "fingerpose", "models": "hands", "confidence": "10", "description": [ [ "addCurl", "Thumb", "NoCurl", 1 ], [ "addDirection", "Thumb", "DiagonalUpRight", 1 ], [ "addDirection", "Thumb", "VerticalUp", 0.034482758620689655 ], [ "addCurl", "Index", "NoCurl", 1 ], [ "addDirection", "Index", "VerticalUp", 1 ], [ "addDirection", "Index", "DiagonalUpLeft", 0.07142857142857142 ], [ "addCurl", "Middle", "NoCurl", 1 ], [ "addDirection", "Middle", "VerticalUp", 1 ], [ "addCurl", "Ring", "FullCurl", 1 ], [ "addDirection", "Ring", "VerticalUp", 1 ], [ "addDirection", "Ring", "DiagonalUpRight", 0.15384615384615385 ], [ "addCurl", "Pinky", "FullCurl", 1 ], [ "addDirection", "Pinky", "DiagonalUpRight", 1 ], [ "addDirection", "Pinky", "VerticalUp", 0.25 ] ], "enabled": true}) handsfree.useGesture({ "name": "C", "algorithm": "fingerpose", "models": "hands", "confidence": "10", "description": [ [ "addCurl", "Thumb", "NoCurl", 1 ], [ "addDirection", "Thumb", "HorizontalLeft", 1 ], [ "addCurl", "Index", "NoCurl", 1 ], [ "addCurl", "Index", "HalfCurl", 1 ], [ "addDirection", "Index", "DiagonalUpLeft", 1 ], [ "addCurl", "Middle", "HalfCurl", 1 ], [ "addDirection", "Middle", "DiagonalUpLeft", 1 ], [ "addCurl", "Ring", "HalfCurl", 1 ], [ "addDirection", "Ring", "DiagonalUpLeft", 1 ], [ "addCurl", "Pinky", "HalfCurl", 1 ], [ "addCurl", "Pinky", "NoCurl", 0.25 ], [ "addDirection", "Pinky", "DiagonalUpLeft", 1 ] ], "enabled": true}) handsfree.useGesture({ "name": "K", "algorithm": "fingerpose", "models": "hands", "confidence": "10", "description": [ [ "addCurl", "Thumb", "NoCurl", 1 ], [ "addDirection", "Thumb", "VerticalUp", 1 ], [ "addDirection", "Thumb", "DiagonalUpRight", 0.07142857142857142 ], [ "addCurl", "Index", "NoCurl", 1 ], [ "addDirection", "Index", "VerticalUp", 0.5 ], [ "addDirection", "Index", "DiagonalUpLeft", 1 ], [ "addCurl", "Middle", "NoCurl", 1 ], [ "addDirection", "Middle", "VerticalUp", 1 ], [ "addCurl", "Ring", "FullCurl", 1 ], [ "addDirection", "Ring", "VerticalUp", 1 ], [ "addDirection", "Ring", "DiagonalUpRight", 0.2 ], [ "addCurl", "Pinky", "FullCurl", 1 ], [ "addDirection", "Pinky", "DiagonalUpRight", 1 ], [ "addDirection", "Pinky", "VerticalUp", 0.9333333333333333 ], [ "addDirection", "Pinky", "DiagonalUpLeft", 0.06666666666666667 ] ], "enabled": true}) handsfree.useGesture({ "name": "Y", "algorithm": "fingerpose", "models": "hands", "confidence": "10", "description": [ [ "addCurl", "Thumb", "NoCurl", 1 ], [ "addDirection", "Thumb", "DiagonalUpLeft", 1 ], [ "addDirection", "Thumb", "HorizontalLeft", 0.1111111111111111 ], [ "addCurl", "Index", "FullCurl", 1 ], [ "addDirection", "Index", "VerticalUp", 1 ], [ "addDirection", "Index", "DiagonalUpLeft", 0.15384615384615385 ], [ "addCurl", "Middle", "FullCurl", 1 ], [ "addDirection", "Middle", "VerticalUp", 1 ], [ "addDirection", "Middle", "DiagonalUpLeft", 0.36363636363636365 ], [ "addCurl", "Ring", "FullCurl", 1 ], [ "addDirection", "Ring", "VerticalUp", 1 ], [ "addCurl", "Pinky", "NoCurl", 1 ], [ "addDirection", "Pinky", "DiagonalUpRight", 1 ], [ "addDirection", "Pinky", "VerticalUp", 0.25 ] ], "enabled": true}) handsfree.useGesture({ "name": "E", "algorithm": "fingerpose", "models": "hands", "confidence": "10", "description": [ [ "addCurl", "Thumb", "HalfCurl", 1 ], [ "addDirection", "Thumb", "DiagonalUpRight", 1 ], [ "addDirection", "Thumb", "VerticalUp", 0.36363636363636365 ], [ "addCurl", "Index", "FullCurl", 1 ], [ "addDirection", "Index", "VerticalUp", 1 ], [ "addDirection", "Index", "DiagonalUpLeft", 0.25 ], [ "addCurl", "Middle", "FullCurl", 1 ], [ "addDirection", "Middle", "VerticalUp", 1 ], [ "addDirection", "Middle", "DiagonalUpLeft", 0.15384615384615385 ], [ "addCurl", "Ring", "FullCurl", 1 ], [ "addDirection", "Ring", "VerticalUp", 1 ], [ "addDirection", "Ring", "DiagonalUpLeft", 0.07142857142857142 ], [ "addCurl", "Pinky", "FullCurl", 1 ], [ "addDirection", "Pinky", "VerticalUp", 1 ] ], "enabled": true}) handsfree.useGesture({ "name": "N", "algorithm": "fingerpose", "models": "hands", "confidence": "2", "description": [ [ "addCurl", "Thumb", "NoCurl", 1 ], [ "addCurl", "Thumb", "HalfCurl", 0.1111111111111111 ], [ "addDirection", "Thumb", "DiagonalDownLeft", 1 ], [ "addDirection", "Thumb", "HorizontalLeft", 0.2 ], [ "addCurl", "Index", "NoCurl", 1 ], [ "addCurl", "Index", "HalfCurl", 0.7647058823529411 ], [ "addDirection", "Index", "HorizontalLeft", 1 ], [ "addDirection", "Index", "DiagonalDownLeft", 0.36363636363636365 ], [ "addCurl", "Middle", "NoCurl", 1 ], [ "addDirection", "Middle", "DiagonalDownLeft", 1 ], [ "addDirection", "Middle", "HorizontalLeft", 0.1111111111111111 ], [ "addCurl", "Ring", "FullCurl", 1 ], [ "addDirection", "Ring", "DiagonalDownLeft", 1 ], [ "addDirection", "Ring", "HorizontalLeft", 0.5789473684210527 ], [ "addCurl", "Pinky", "FullCurl", 1 ], [ "addDirection", "Pinky", "DiagonalDownLeft", 1 ] ], "enabled": true})} - v1.11.3
- v1.11.2
- v1.11.1
- v1.11.0
- v1.10.0
- v1.9.4
- v1.9.3
- v1.9.2
- v1.9.1
- v1.9.0
- v1.8.0
- v1.7.0
- v1.6.0
- v1.5.0
- v1.4.2
- v1.4.1
- v1.4.0
- v1.3.1
- v1.3.0
- v1.2.0
- v1.1.9
- v1.1.7
- v1.1.5
- v1.1.4
- v1.1.3
- v1.0.0
- v0.10.2
- v0.9.0
- v0.8.0
- v0.7.3
- v0.7.2
- v0.6.1
- v0.6.0
- v0.5.16
- v0.5.11
- v0.5.8
- v0.5.7
- v0.5.2
Select mode or a template
Centers sketch and matches the background color.
Prevents infinite loops that may freeze the sketch.
- handsfree.js
This will be the default layout for your sketches
Easy on the eyes
It will show up when there is an error or print() in code
Potential warnings will be displayed as you type
Closes parenthesis-like characters automatically as you type
Controls
Play
Ctrl+Enter
Code
Ctrl+Shift+Enter
Save
Ctrl+S
Interface
Fullscreen
Ctrl+Alt+F
Switch Layout
Ctrl+Alt+L
Settings
Ctrl+Alt+.
Editor
Tidy Code
Ctrl+B
Multiple Cursors
Ctrl+Click
Duplicate Line/Selection
Ctrl+Shift+D
Move Line
Alt+↑/↓
Select Multiple
Ctrl+D
Find in Code
Ctrl+F
Find Next
Ctrl+G
Find Previous
Ctrl+Shift+G