{"id":3265,"date":"2021-05-24T19:37:04","date_gmt":"2021-05-24T11:37:04","guid":{"rendered":"http:\/\/www.magicandlove.com\/blog\/?p=3265"},"modified":"2021-05-24T21:53:18","modified_gmt":"2021-05-24T13:53:18","slug":"mediapipe-in-touchdesigner-3","status":"publish","type":"post","link":"http:\/\/www.magicandlove.com\/blog\/2021\/05\/24\/mediapipe-in-touchdesigner-3\/","title":{"rendered":"MediaPipe in TouchDesigner 3"},"content":{"rendered":"\n<p>The last post demonstrated the use of the face detection function in MediaPipe with TouchDesigner. Nevertheless, it only produced an image with the detected results. It is not very useful if we want to manipulate the graphics according to the detected faces. In this example, we switch to the use of Script CHOP to output the detected face data in numeric form.<\/p>\n\n\n\n<p>As mentioned in the last post, the MediaPipe face detection expects a vertically flipped image as compared with the TouchDesigner texture, this example will flip the image with a TouchDesigner TOP to make the Python code simpler. Instead of showing all the detected faces, the code just pick the largest face and output its bounding box and the position of the left and right eyes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"578\" src=\"http:\/\/www.magicandlove.com\/blog\/wp-content\/uploads\/2021\/05\/FaceDetection3-1024x578.png\" alt=\"\" class=\"wp-image-3266\" srcset=\"http:\/\/www.magicandlove.com\/blog\/wp-content\/uploads\/2021\/05\/FaceDetection3-1024x578.png 1024w, http:\/\/www.magicandlove.com\/blog\/wp-content\/uploads\/2021\/05\/FaceDetection3-300x169.png 300w, http:\/\/www.magicandlove.com\/blog\/wp-content\/uploads\/2021\/05\/FaceDetection3-768x433.png 768w, http:\/\/www.magicandlove.com\/blog\/wp-content\/uploads\/2021\/05\/FaceDetection3-1536x867.png 1536w, http:\/\/www.magicandlove.com\/blog\/wp-content\/uploads\/2021\/05\/FaceDetection3-2048x1156.png 2048w, http:\/\/www.magicandlove.com\/blog\/wp-content\/uploads\/2021\/05\/FaceDetection3-690x389.png 690w, http:\/\/www.magicandlove.com\/blog\/wp-content\/uploads\/2021\/05\/FaceDetection3-980x553.png 980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Since we are working on a Script CHOP, it is not possible to connect directly the flipped TOP to it. In this case, we use the <strong>onSetupParameters<\/strong> function to define the <strong>Face<\/strong> TOP input in the <strong>Custom<\/strong> tab.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">def onSetupParameters(scriptOp):\n     page = scriptOp.appendCustomPage('Custom')\n     topPar = page.appendTOP('Face', label='Image with face')\n     return<\/pre>\n\n\n\n<p>And in the <strong>onCook<\/strong> function, we use the following statement to retrieve the image from the TOP that we dragged into the <strong>Face<\/strong> parameter.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">topRef = scriptOp.par.Face.eval()<\/pre>\n\n\n\n<p>After we found out the largest face from the image, we <a href=\"https:\/\/docs.derivative.ca\/ScriptCHOP_Class\" target=\"_blank\" rel=\"noreferrer noopener\">append a number channels<\/a> to the Script CHOP such that the TouchDesigner project can use them for custom visualisation. The new channels are,<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>face (number of faces detected)<\/li><li>width, height (size of the bounding box)<\/li><li>tx, ty (centre of the bounding box)<\/li><li>left_eye_x, left_eye_y (position of the left eye)<\/li><li>right_eye_x, right_eye_y (position of the right eye)<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"579\" src=\"http:\/\/www.magicandlove.com\/blog\/wp-content\/uploads\/2021\/05\/FaceDetection4-1024x579.png\" alt=\"\" class=\"wp-image-3279\" srcset=\"http:\/\/www.magicandlove.com\/blog\/wp-content\/uploads\/2021\/05\/FaceDetection4-1024x579.png 1024w, http:\/\/www.magicandlove.com\/blog\/wp-content\/uploads\/2021\/05\/FaceDetection4-300x170.png 300w, http:\/\/www.magicandlove.com\/blog\/wp-content\/uploads\/2021\/05\/FaceDetection4-768x434.png 768w, http:\/\/www.magicandlove.com\/blog\/wp-content\/uploads\/2021\/05\/FaceDetection4-1536x868.png 1536w, http:\/\/www.magicandlove.com\/blog\/wp-content\/uploads\/2021\/05\/FaceDetection4-2048x1157.png 2048w, http:\/\/www.magicandlove.com\/blog\/wp-content\/uploads\/2021\/05\/FaceDetection4-690x390.png 690w, http:\/\/www.magicandlove.com\/blog\/wp-content\/uploads\/2021\/05\/FaceDetection4-980x554.png 980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>The complete project file can be downloaded from this <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/chungbwc\/TouchDesigner\/tree\/main\/FaceDetectionScriptCHOP\" target=\"_blank\">GitHub repository<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The last post demonstrated the use of the face detection function in MediaPipe with TouchDesigner. Nevertheless, it only produced an image with the detected results. It is not very useful if we want to manipulate the graphics according to the detected faces. In this example, we switch to the use of Script CHOP to output [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[179],"tags":[43,180,182,84],"class_list":["post-3265","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-face-detection","tag-mediapipe","tag-python","tag-touchdesigner"],"_links":{"self":[{"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/posts\/3265","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/comments?post=3265"}],"version-history":[{"count":20,"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/posts\/3265\/revisions"}],"predecessor-version":[{"id":3290,"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/posts\/3265\/revisions\/3290"}],"wp:attachment":[{"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/media?parent=3265"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/categories?post=3265"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/tags?post=3265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}