{"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":2,"fork_count":1,"expires_at":null,"created_at":"2025-03-20T17:45:01.331243Z","updated_at":"2025-03-20T17:45:01.331248Z","user_id":359,"status":"PRIVATE","parent_id":5393,"id":6404,"user":{"username":"testuser4","id":359,"password_hash":"$2b$12$1bfbXAx/wNDtiX3B7pP00OoFloL6RnEtNDLYjtXDiFCYu.bwxiVSe","updated_at":"2025-03-02T04:54:01.926097Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":"uobdfu+8sr00o67mwooc@sharklasers.com","recess_id":null,"created_at":"2025-03-02T04:54:01.926092Z","reset_token":null,"stripe_customer_id":null,"seats":0},"code":{"Cage.js":"class 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}","Star.js":"class 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}","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\n\n\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 \n \n \n\n\n","TargetDisplay.js":"class 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}"},"chat_history":[{"project_id":6404,"message":"In order to use your new JavaScript files, add them to the index.html file with the following code:\n```html\n\n\t\n\t\n\n```","created_at":"2025-03-20T17:45:15.147311Z","output_tokens":null,"deleted":0,"code_id":218493,"sender":"server_script","input_tokens":null,"id":118898},{"project_id":6404,"message":"In order to use your new JavaScript files, add them to the index.html file with the following code:\n```html\n\n\t\n\t\n\t\n\n```","created_at":"2025-03-20T17:45:18.064561Z","output_tokens":null,"deleted":0,"code_id":218495,"sender":"server_script","input_tokens":null,"id":118899},{"project_id":6404,"message":"In order to use your new JavaScript files, add them to the index.html file with the following code:\n```html\n\n\t\n\t\n\t\n\t\n\n```","created_at":"2025-03-20T17:45:18.865755Z","output_tokens":null,"deleted":0,"code_id":218497,"sender":"server_script","input_tokens":null,"id":118900},{"project_id":6404,"message":"Errors:\n\n🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈\n🌟 Thank you for using ml5.js v1.2.1 🌟\n\nPlease read our community statement to ensure \nthat the use of this software reflects the values \nof the ml5.js community:\n↳ https://ml5js.org/about\n\nReporting: \n↳ https://github.com/ml5js/ml5-next-gen/issues\n↳ Email: info@ml5js.org \n🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈,Uncaught SyntaxError: Identifier 'captureWidth' has already been declared at 1:1 in script.js,\n🌸 p5.js says: \nSyntax Error - \"captureWidth\" is being redeclared. JavaScript doesn't allow declaring a variable more than once. Check the line number in error for redeclaration of the variable.\n\n+ More info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Redeclared_parameter#what_went_wrong,\n🌸 p5.js says: [a0bda9d4-603b-4f55-be90-126da9aebb7e, line 6] It seems that you may have accidentally written \"Cage\".\nYou may have meant one of the following: \n▶️ IMAGE (http://p5js.org/reference/p5/IMAGE)\n▶️ scale() (http://p5js.org/reference/p5/scale)\n▶️ image() (http://p5js.org/reference/p5/image)\n▶️ save() (http://p5js.org/reference/p5/save)\n▶️ cone() (http://p5js.org/reference/p5/cone)\n▶️ mag() (http://p5js.org/reference/p5/mag)\n Errors:\n\n🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈\n🌟 Thank you for using ml5.js v1.2.1 🌟\n\nPlease read our community statement to ensure \nthat the use of this software reflects the values \nof the ml5.js community:\n↳ https://ml5js.org/about\n\nReporting: \n↳ https://github.com/ml5js/ml5-next-gen/issues\n↳ Email: info@ml5js.org \n🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈\nUncaught SyntaxError: Identifier 'captureWidth' has already been declared at 1:1 in script.js\n\n🌸 p5.js says: \nSyntax Error - \"captureWidth\" is being redeclared. JavaScript doesn't allow declaring a variable more than once. Check the line number in error for redeclaration of the variable.\n\n+ More info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Redeclared_parameter#what_went_wrong\n\n🌸 p5.js says: [a0bda9d4-603b-4f55-be90-126da9aebb7e, line 6] It seems that you may have accidentally written \"Cage\".\nYou may have meant one of the following: \n▶️ IMAGE (http://p5js.org/reference/p5/IMAGE)\n▶️ scale() (http://p5js.org/reference/p5/scale)\n▶️ image() (http://p5js.org/reference/p5/image)\n▶️ save() (http://p5js.org/reference/p5/save)\n▶️ cone() (http://p5js.org/reference/p5/cone)\n▶️ mag() (http://p5js.org/reference/p5/mag)","created_at":"2025-03-20T17:45:43.758363Z","output_tokens":null,"deleted":0,"code_id":218505,"sender":"client_script","input_tokens":null,"id":118901},{"project_id":6404,"message":"The error message indicates that the variable `captureWidth` has been declared more than once in your `script.js` file. In JavaScript, you cannot declare the same variable twice using `let` or `const` without receiving an error.\n\nTo solve this issue:\n1. Click the 'Where does this code go?' button and look for the yellow 'i' icon in the code editor to locate the duplicate declaration of `captureWidth`.\n2. Once you find it, remove one of the duplicate declarations. If you only need to use `captureWidth` in one place, you should remove the extra duplicate line.\n\nHere's what the line might look like in your code:\n```javascript\nlet captureWidth = 640; // Example duplicate declaration\n```\n\nIf you find a similar line declared twice, remove one of these duplicate lines based on where it's located or if it's unnecessary.\n\nFollowing these steps will help you resolve the syntax error related to the redeclaration of the `captureWidth` variable.","created_at":"2025-03-20T17:45:43.854145Z","output_tokens":236,"deleted":0,"code_id":218505,"sender":"ai","input_tokens":4683,"id":118902}],"assets":[{"created_at":"2025-03-20T17:45:01.427685Z","name":"head_tracking_cover","resource_type":"image","tags":null,"project_id":6404,"creator":null,"cloudinary_id":"z3k6zpqev2nuika0sghm","deleted":false,"id":62103}],"messages_sent":0,"comments":[],"steps":[]}