Last active
September 28, 2017 18:24
-
-
Save lmccart/4a6cf3d92a7f00d32316 to your computer and use it in GitHub Desktop.
face detection with processing and js
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
| //////////////////////////////////////////////////////////////////// | |
| //// LIVE VIDEO | |
| // Now we need the video library | |
| import processing.video.*; | |
| // Capture object | |
| Capture img; | |
| // New images from camera | |
| void captureEvent(Capture img) { | |
| img.read(); | |
| } | |
| // Move to draw | |
| opencv.loadImage(img); | |
| faces = opencv.detect(); | |
| //////////////////////////////////////////////////////////////////// | |
| //// SCALE DOWN | |
| // Scaled down image | |
| PImage smaller; | |
| int scale = 4; | |
| cam = new Capture(this, 640, 480); // bigger | |
| opencv = new OpenCV(this, cam.width/scale, cam.height/scale); | |
| smaller = createImage(opencv.width,opencv.height,RGB); | |
| // Add to capture event | |
| // Make smaller image | |
| smaller.copy(cam,0,0,cam.width,cam.height,0,0,smaller.width,smaller.height); | |
| smaller.updatePixels(); | |
| // Draw | |
| opencv.loadImage(smaller); | |
| rect(faces[i].x, faces[i].y, faces[i].width, faces[i].height); | |
| //////////////////////////////////////////////////////////////////// | |
| //// SAVE FACES | |
| void mousePressed() { | |
| if (faces != null) { | |
| for (int i = 0; i < faces.length; i++) { | |
| PImage cropped = createImage(faces[i].width*scale, faces[i].height*scale, RGB); | |
| cropped.copy(cam, faces[i].x*scale, faces[i].y*scale, faces[i].width*scale, faces[i].height*scale, 0, 0, faces[i].width*scale, faces[i].height*scale); | |
| cropped.updatePixels(); | |
| cropped.save("faces/face-"+i+".jpg"); | |
| } | |
| } | |
| } | |
| //////////////////////////////////////////////////////////////////// | |
| //// FACE DETECTION JS | |
| <!DOCTYPE html> | |
| <head> | |
| <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> | |
| <script src="jquery.facedetection.js"></script> | |
| <script src="p5.js"></script> | |
| <script src="p5.dom.js"></script> | |
| <script> | |
| var img; | |
| function setup() { | |
| img = createImg('assets/rect.jpg'); | |
| img.id('picture'); | |
| img.position(0, 0); | |
| var c = createCanvas(800, 600); | |
| c.position(0, 0); | |
| c.drop(gotFile); | |
| } | |
| function gotFile(file) { | |
| img.attribute('src', file.data); | |
| clear(); | |
| detect(); | |
| } | |
| function detect() { | |
| $('#picture').faceDetection({ | |
| complete: function (faces) { | |
| for (var i = 0; i < faces.length; i++) { | |
| var d = createDiv(''); | |
| var x = faces[i].x * faces[i].scaleX; | |
| var y = faces[i].y * faces[i].scaleY; | |
| var w = faces[i].width * faces[i].scaleX; | |
| var h = faces[i].height * faces[i].scaleY; | |
| rect(x, y, w, h); | |
| } | |
| } | |
| }); | |
| } | |
| </script> | |
| <style> img {width: 800px;} </style> | |
| </head> | |
| <body> | |
| </body> | |
| </html> | |
| //////////////////////////////////////////////////////////////////// | |
| //// VIDEO | |
| vid = createVideo('assets/video.mp4'); | |
| vid.id('vid'); | |
| vid.position(0, 0); | |
| vid.loop(); | |
| function mousePressed() { | |
| vid.pause(); | |
| detect(); | |
| } | |
| function mouseReleased() { | |
| vid.play(); | |
| clear(); | |
| } | |
| //////////////////////////////////////////////////////////////////// | |
| //// VIDEO CTS | |
| function draw() { | |
| detect(); | |
| } | |
| // better to use diff lib |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment