{"name":"Ml5js head tracking demo","description":"head tracking demo in ml5js, recreated in jippity","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/z3k6zpqev2nuika0sghm","view_count":8,"fork_count":1,"expires_at":null,"created_at":"2025-01-07T18:15:59.995652Z","updated_at":"2025-01-07T18:15:59.995654Z","user_id":70,"status":"PUBLIC","parent_id":null,"id":5393,"user":{"photo":null,"email":"kristen@jippity.pro","recess_id":"0c22a63e-e8fa-453f-a493-d113532a13c2","created_at":"2024-03-23T19:20:56.974481Z","reset_token":"GD2dODEjNUbAH88Yx-1HMTa4uc_OUtvTa0c5D-VKUhw","stripe_customer_id":"cus_RPbovGjLueUufv","seats":100,"username":"kris10","id":70,"password_hash":"$2b$12$abwA8Crfrc22ANEFpZErHeQDLvhr9RJOD0lMNLh7PJGrAn7M//qEC","updated_at":"2024-03-23T19:20:56.974485Z","reset_token_expiry":"2025-01-14T23:32:05.455609","subscription_status":"active"},"code":{"script.js":"/*\n original: https://openprocessing.org/sketch/2425185\n*/\n\nlet captureWidth = 640;\n\nlet captureHeight = 480;\n\nlet targetDisplay;\n\nlet viewDepth;\n\nlet faceMesh;\n\nlet video;\n\nlet faces = [];\n\nlet options = { maxFaces: 1, refineLandmarks: false, flipHorizontal: true };\n\nfunction preload() {\n faceMesh = ml5.faceMesh(options);\n}\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n\n video = createCapture(VIDEO, { flipped: true });\n video.size(captureWidth, captureHeight);\n video.hide();\n\n targetDisplay = new TargetDisplay();\n viewDepth = 0;\n\n faceMesh.detectStart(video, gotFaces);\n}\n\nfunction draw() {\n background(0);\n\n if (faces.length > 0) {\n let face = faces[0];\n\n let headCenterX = map(face.faceOval.centerX, 0, captureWidth, 0, windowWidth);\n let avgEyeHeight = (face.leftEye.centerY + face.rightEye.centerY) / 2;\n let headCenterY = map(avgEyeHeight, 0, captureHeight, 0, windowHeight)\n\n let faceWidthFraction = round(face.box.width / windowWidth, 5);\n\n // non-linear expression for head depth\n // based on a bunch of tinkering and testing and a regression from desmos\n let headDepth = -3801 - 1755 * log(faceWidthFraction);\n\n targetDisplay.go(headCenterX, headCenterY, headDepth);\n }\n}\n\nclass TargetDisplay {\n constructor() {\n this.defaultEyeZ = (width / 2) / tan(PI / 6);\n this.cageDepth = 2400;\n\n this.cage = new Cage(this.cageDepth, this.defaultEyeZ);\n\n this.targets = [];\n this.stars = [];\n\n this.initializeTargets();\n this.initializeStars(); // Initialize stars\n }\n\n initializeTargets() {\n for (let d = -500; d < 2200; d += 300) {\n let xpos = random(width * 0.2, width * 0.8);\n let ypos = random(height * 0.2, height * 0.8);\n this.targets.push(new Target(xpos, ypos, d, this.cageDepth, this.defaultEyeZ));\n }\n this.targets.sort((t1, t2) => t2.depth - t1.depth);\n }\n\n initializeStars() {\n for (let d = -500; d < 2200; d += 300) {\n let xpos = random(width * 0.2, width * 0.8);\n let ypos = random(height * 0.2, height * 0.8);\n this.stars.push(new Star(xpos, ypos, d, this.cageDepth, this.defaultEyeZ));\n }\n this.stars.sort((s1, s2) => s2.depth - s1.depth);\n }\n\n go(viewX, viewY, viewDepth) {\n this.cage.update(viewX, viewY);\n this.cage.display();\n\n this.targets.forEach(t => t.update(viewX, viewY, viewDepth));\n this.stars.forEach(s => s.update(viewX, viewY, viewDepth));\n\n for (let t of this.targets) {\n t.displayStick();\n t.displayTarget();\n }\n\n for (let s of this.stars) {\n s.displayStick();\n s.displayStar();\n }\n }\n}\n\nclass Star {\n constructor(initialX, initialY, depth, cageDepth, defaultEyeZ) {\n this.initialX = initialX;\n this.initialY = initialY;\n this.depth = depth;\n this.cageDepth = cageDepth;\n this.defaultEyeZ = defaultEyeZ;\n\n this.defaultRadius = 100; // Smaller than targets\n\n this.stick = new DepthLine(initialX + 50, initialY - 50, depth - 50, cageDepth, defaultEyeZ, [255, 215, 0], 150); // Yellow\n this.adjustedRadius = this.calculateRadius();\n }\n\n update(viewX, viewY, viewDepth) {\n this.currentDepth = this.depth + viewDepth;\n\n this.adjustedRadius = this.calculateRadius();\n\n let adjustedViewX = viewX - this.initialX;\n let starXFromView = -1 * (this.defaultEyeZ * adjustedViewX) / (this.defaultEyeZ + this.currentDepth);\n this.screenX = viewX + starXFromView;\n\n let adjustedViewY = viewY - this.initialY;\n let starYFromView = -1 * (this.defaultEyeZ * adjustedViewY) / (this.defaultEyeZ + this.currentDepth);\n this.screenY = viewY + starYFromView;\n\n this.stick.update(viewX, viewY, viewDepth);\n }\n\n displayStick() {\n if (this.currentDepth > -1 * this.defaultEyeZ) {\n this.stick.display();\n }\n }\n\n displayStar() {\n if (this.currentDepth > -1 * this.defaultEyeZ) {\n let x = this.screenX;\n let y = this.screenY;\n\n noStroke();\n fill(255, 215, 0); // Gold color for stars\n textSize(this.adjustedRadius);\n text('⭐', x, y);\n }\n }\n\n calculateRadius() {\n return (this.defaultRadius * this.defaultEyeZ) / (this.currentDepth + this.defaultEyeZ);\n }\n}\n\nclass Cage {\n constructor(cageDepth, defaultEyeZ) {\n this.cageDepth = cageDepth;\n this.defaultEyeZ = defaultEyeZ;\n\n this.cageRects = [];\n this.cageLines = [];\n\n this.cageTop = 0;\n\n this.createCage();\n }\n\n update(viewX, viewY) {\n this.cageRects.forEach((r, index) => r.update(viewX, viewY));\n this.cageLines.forEach((ln, index) => ln.update(viewX, viewY, this.cageTop));\n }\n\n display() {\n this.cageRects.forEach((r, index) => r.display(index));\n this.cageLines.forEach((ln, index) => ln.display(index));\n }\n\n createCage() {\n for (let n = 0; n < this.cageDepth; n += 300) {\n this.cageRects.push(new CageRect(n, this.defaultEyeZ));\n }\n\n for (let x = 0; x <= width; x += width / 10) {\n let color = x % (width / 5) === 0 ? [0, 255, 255] : [255, 0, 255]; // Alternate Cyan and Magenta\n this.cageLines.push(new DepthLine(x, 0, this.cageTop, this.cageDepth, this.defaultEyeZ, color));\n this.cageLines.push(new DepthLine(x, height, this.cageTop, this.cageDepth, this.defaultEyeZ, color));\n }\n for (let y = height / 10; y < height; y += height / 10) {\n let color = y % (height / 5) === 0 ? [0, 255, 255] : [255, 0, 255]; // Alternate Cyan and Magenta\n this.cageLines.push(new DepthLine(0, y, this.cageTop, this.cageDepth, this.defaultEyeZ, color));\n this.cageLines.push(new DepthLine(width, y, this.cageTop, this.cageDepth, this.defaultEyeZ, color));\n }\n }\n}\n\nclass CageRect {\n constructor(depth, defaultEyeZ) {\n this.depth = depth;\n this.defaultEyeZ = defaultEyeZ;\n\n this.screenWidth = (this.defaultEyeZ * width) / (this.defaultEyeZ + this.depth);\n this.screenHeight = (this.defaultEyeZ * height) / (this.defaultEyeZ + this.depth);\n\n this.initialX = width / 2;\n this.initialY = height / 2;\n this.deltaX = 0;\n this.deltaY = 0;\n }\n\n update(viewX, viewY) {\n this.deltaX = (viewX - this.initialX) * (this.depth / (this.defaultEyeZ + this.depth));\n this.deltaY = (viewY - this.initialY) * (this.depth / (this.defaultEyeZ + this.depth));\n }\n\n display(index) {\n rectMode(CENTER);\n if (index % 2 === 0) {\n stroke(0, 255, 255, 150); // Brighter Cyan\n } else {\n stroke(255, 0, 255, 150); // Brighter Magenta\n }\n strokeWeight(2);\n noFill();\n\n rect(this.initialX + this.deltaX, this.initialY + this.deltaY, this.screenWidth, this.screenHeight);\n }\n}\n\nclass DepthLine {\n constructor(x, y, topDepth, bottomDepth, defaultEyeZ, color, alph = 150) {\n this.x = x;\n this.y = y;\n this.topDepth = topDepth;\n this.bottomDepth = bottomDepth;\n this.defaultEyeZ = defaultEyeZ;\n this.color = color;\n this.alph = alph;\n\n this.initialDepth = topDepth;\n\n this.update(width / 2, height / 2);\n }\n\n update(viewX, viewY, viewDepth) {\n this.topDepth = this.initialDepth + viewDepth;\n\n let adjustedViewX = viewX - this.x;\n let topXFromView = -1 * (this.defaultEyeZ * adjustedViewX) / (this.defaultEyeZ + this.topDepth);\n let bottomXFromView = -1 * (this.defaultEyeZ * adjustedViewX) / (this.defaultEyeZ + this.bottomDepth);\n this.topX = viewX + topXFromView;\n this.bottomX = viewX + bottomXFromView;\n\n let adjustedViewY = viewY - this.y;\n let topYFromView = -1 * (this.defaultEyeZ * adjustedViewY) / (this.defaultEyeZ + this.topDepth);\n let bottomYFromView = -1 * (this.defaultEyeZ * adjustedViewY) / (this.defaultEyeZ + this.bottomDepth);\n this.topY = viewY + topYFromView;\n this.bottomY = viewY + bottomYFromView;\n }\n\n display() {\n if (this.bottomDepth > this.topDepth) {\n stroke(this.color[0], this.color[1], this.color[2], this.alph);\n strokeWeight(2);\n\n line(this.topX, this.topY, this.bottomX, this.bottomY);\n }\n }\n}\n\nclass Target {\n constructor(initialX, initialY, depth, cageDepth, defaultEyeZ) {\n this.initialX = initialX;\n this.initialY = initialY;\n this.depth = depth;\n this.cageDepth = cageDepth;\n this.defaultEyeZ = defaultEyeZ;\n\n this.defaultRadius = 250;\n\n this.stick = new DepthLine(initialX, initialY, depth, cageDepth, defaultEyeZ, [255, 255, 255], 150); // White\n this.adjustedRadius = this.calculateRadius();\n }\n\n update(viewX, viewY, viewDepth) {\n this.currentDepth = this.depth + viewDepth;\n\n this.adjustedRadius = this.calculateRadius();\n\n // update the position of the target (and the top of the stick)\n let adjustedViewX = viewX - this.initialX;\n let targetXFromView = -1 * (this.defaultEyeZ * adjustedViewX) / (this.defaultEyeZ + this.currentDepth);\n this.screenX = viewX + targetXFromView;\n\n let adjustedViewY = viewY - this.initialY;\n let targetYFromView = -1 * (this.defaultEyeZ * adjustedViewY) / (this.defaultEyeZ + this.currentDepth);\n this.screenY = viewY + targetYFromView;\n\n // update the bottom of the stick\n this.stick.update(viewX, viewY, viewDepth);\n }\n\n displayStick() {\n if (this.currentDepth > -1 * this.defaultEyeZ) {\n this.stick.display();\n }\n }\n\n displayTarget() {\n if (this.currentDepth > -1 * this.defaultEyeZ) {\n let x = this.screenX;\n let y = this.screenY;\n\n noStroke();\n fill(200, 0, 0);\n ellipse(x, y, this.adjustedRadius, this.adjustedRadius);\n fill(230);\n ellipse(x, y, this.adjustedRadius * 0.85, this.adjustedRadius * 0.85);\n fill(200, 0, 0);\n ellipse(x, y, this.adjustedRadius * 0.6, this.adjustedRadius * 0.6);\n fill(230);\n ellipse(x, y, this.adjustedRadius * 0.5, this.adjustedRadius * 0.5);\n fill(200, 0, 0);\n ellipse(x, y, this.adjustedRadius * 0.2, this.adjustedRadius * 0.2);\n }\n }\n\n calculateRadius() {\n return (this.defaultRadius * this.defaultEyeZ) / (this.currentDepth + this.defaultEyeZ);\n }\n}\n\nfunction gotFaces(results) {\n faces = results;\n}\n\nfunction mousePressed() {\n targetDisplay = new TargetDisplay();\n}\n\n","style.css":"html,\nbody {\n\tmargin: 0;\n\tpadding: 0;\n}","index.html":"\n\n\n\n \n \n \n \n \n \n \n \n\n\n"},"chat_history":[],"assets":[{"cloudinary_id":"z3k6zpqev2nuika0sghm","name":"head_tracking_cover","deleted":false,"id":56809,"created_at":"2025-01-07T18:04:17.767350Z","project_id":5393,"resource_type":"image"}],"messages_sent":10,"comments":[],"steps":[]}