Created
July 16, 2022 02:17
-
-
Save harmoniemand/7d83f4ec8b0ecfb75f9cd7bc3e989a5f to your computer and use it in GitHub Desktop.
be a star
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>PoseNet Detection</title> | |
| <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script> | |
| <script src="sketch2.js"></script> <!--js file--> | |
| <style> | |
| /* video { | |
| width: 100vw; | |
| height: 100vh; | |
| } */ | |
| </style> | |
| </head> | |
| <body style="padding: 0; margin: 0;"> | |
| <div class="container"> | |
| </div> | |
| <div class="console"></div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let capture; | |
| let posenet; | |
| let noseX, noseY; | |
| let reyeX, reyeY; | |
| let leyeX, leyeY; | |
| let poses = []; | |
| let actor_img; | |
| let specs, smoke; | |
| let faktor_x = 1; | |
| let faktor_y = 1; | |
| let particels = []; | |
| function setup() { | |
| createCanvas(window.innerWidth, window.innerHeight); | |
| let constraints = { | |
| video: { | |
| mandatory: { | |
| minWidth: window.innerWidth, | |
| minHeight: window.innerHeight | |
| }, | |
| optional: [{ maxFrameRate: 30 }] | |
| }, | |
| audio: false | |
| }; | |
| capture = createCapture(constraints); | |
| capture.hide(); | |
| posenet = ml5.poseNet(capture, modelLOADED); | |
| posenet.on('pose', recievedPoses); | |
| faktor_x = window.innerWidth / capture.width; | |
| faktor_y = window.innerHeight / capture.height; | |
| } | |
| function windowResized() { | |
| resizeCanvas(windowWidth, windowHeight); | |
| } | |
| function recievedPoses(p) { | |
| poses = p; | |
| } | |
| function modelLOADED() { | |
| console.log("model has loaded"); | |
| } | |
| function draw() { | |
| for (let i = 0; i < 5; i++) { | |
| particels.push({ | |
| position: { | |
| x: Math.floor(Math.random() * window.innerWidth), | |
| y: Math.floor(Math.random() * window.innerHeight) | |
| }, | |
| color: { | |
| r: Math.floor(Math.random() * 255), | |
| g: Math.floor(Math.random() * 255), | |
| b: Math.floor(Math.random() * 255) | |
| }, | |
| opacity: 255 | |
| }); | |
| } | |
| background(0, 0, 0) | |
| for (pi = 0; pi < poses.length; pi++) { | |
| let singlePose = poses[pi].pose; | |
| let skeleton = poses[pi].skeleton; | |
| for (let i = 0; i < singlePose.keypoints.length; i++) { | |
| particels.push({ | |
| position: { | |
| x: singlePose.keypoints[i].position.x * faktor_x, | |
| y: singlePose.keypoints[i].position.y * faktor_y | |
| }, | |
| color: { | |
| r: Math.floor(Math.random() * 255), | |
| g: Math.floor(Math.random() * 255), | |
| b: Math.floor(Math.random() * 255) | |
| }, | |
| opacity: 255 | |
| }); | |
| } | |
| stroke(255, 255, 255, 100); | |
| strokeWeight(5); | |
| for (let j = 0; j < skeleton.length; j++) { | |
| line(skeleton[j][0].position.x * faktor_x, skeleton[j][0].position.y * faktor_y, skeleton[j][1].position.x * faktor_x, skeleton[j][1].position.y * faktor_y); | |
| } | |
| stroke(0, 0, 0); | |
| } | |
| particels.forEach(particle => { | |
| fill(particle.color.r, particle.color.g, particle.color.b, particle.opacity); | |
| ellipse(particle.position.x, particle.position.y, 15); | |
| particle.opacity = particle.opacity - 5; | |
| }); | |
| particels = particels.filter(m => m.opacity > 0); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment