p5LiveHydraHandPose.js

/*	
	_hydra_texture // cc ojack.xyz + teddavis.org 2021
	edit hydra code within // hydraSandbox tags for changes w/o recompiling p5!
	cheatsheets: https://ojack.xyz/hydra-functions/ + https://hydra-book.naotohieda.com/
*/

let libs = ['https://unpkg.com/hydra-synth', 'includes/libs/hydra-synth.js',
	"https://unpkg.com/ml5@1/dist/ml5.min.js"]


let handPose;
let video;
let hands = [];
let index;
let c;

// hydra canvas + init
let hc = document.createElement('canvas') // hydra canvas + custom size
hc.width = 640
hc.height = 360
let hydra = new Hydra({detectAudio: false,canvas: hc})

let pg // store hydra texture


// sandbox - start
osc(35, .2, ()=>c)
	.out()
// sandbox - stop

function preload() {
  // Load the handPose model
  handPose = ml5.handPose({flipped : true});
}

function setup() {
	createCanvas(windowWidth, windowHeight, WEBGL)
	background(0)
	pg = createGraphics(hc.width, hc.height)
	  // Create the webcam video and hide it
  video = createCapture(VIDEO, {flipped : true});
  video.size(640, 480);
  video.hide();
  // start detecting hands from the webcam video
  handPose.detectStart(video, gotHands);
noStroke()
}


function draw() {
	// grab + apply hydra texture
	
	  if(hands.length>0){
      index= hands[0].keypoints[8];
   let thumb = hands[0].keypoints[4];
   console.log(index.x)
   c= map(index.x,-20,600,0,10);
	  }
	
	pg.clear()
	pg.drawingContext.drawImage(hc, 0, 0, pg.width, pg.height)
	push();
	texture(pg)
	plane(width, height) // fill screen w/ texture

	rotateX(radians(frameCount / 8))
	rotateY(radians(frameCount / 4))
	torus(height/4, height/8, 50)
	pop();
	
	push();
	texture(video)
	plane(100,100)
	pop();
	
}

// Callback function for when handPose outputs data
function gotHands(results) {
  // save the output to the hands variable
  hands = results;
}