{"id":3232,"date":"2021-05-24T13:03:46","date_gmt":"2021-05-24T05:03:46","guid":{"rendered":"http:\/\/www.magicandlove.com\/blog\/?p=3232"},"modified":"2021-05-24T21:56:12","modified_gmt":"2021-05-24T13:56:12","slug":"script-top-in-touchdesigner-canny","status":"publish","type":"post","link":"http:\/\/www.magicandlove.com\/blog\/2021\/05\/24\/script-top-in-touchdesigner-canny\/","title":{"rendered":"Script TOP in TouchDesigner – Canny Edge Detector"},"content":{"rendered":"\n

After the first introduction of the Script TOP, the coming example will implement the Canny Edge Detector<\/a> with OpenCV in TouchDesigner as a demonstration. TouchDesigner already includes its own Edge TOP<\/a> for edge detection and visualisation.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

We also implement a slider parameter Threshold<\/em> in the Script TOP to control the variation of edge detection. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Here is the source code of the Script TOP. Note that we have made a lot of changes in the default function, onSetupParameters to include a custom parameter, Threshold<\/em> as an integer slider. It will generate a value between 5 and 60, to be used in the onCook<\/em> function as a threshold value for the Canny edge detection.<\/p>\n\n\n\n

# me - this DAT\n# scriptOp - the OP which is cooking\nimport numpy as np\nimport cv2\n# press 'Setup Parameters' in the OP to call this function to re-create the parameters.\ndef onSetupParameters(scriptOp):\n    page = scriptOp.appendCustomPage('Custom')\n    p = page.appendInt('Threshold', label='Threshold')\n    t = p[0]\n    t.normMin = 5\n    t.normMax = 60\n    t.default = 10\n    t.min = 5\n    t.max = 60\n    t.clampMin = True\n    t.clampMax = True\n    return\n\n# called whenever custom pulse parameter is pushed\ndef onPulse(par):\n    return\n\ndef onCook(scriptOp):\n    thresh = scriptOp.par.Threshold.eval()\n    image = scriptOp.inputs[0].numpyArray(delayed=True, writable=True)\n    if image is None:\n        return\n\n    image *= 255\n    image = image.astype('uint8')\n    gray = cv2.cvtColor(image, cv2.COLOR_RGBA2GRAY)\n    gray = cv2.blur(gray, (3, 3))\n    edges = cv2.Canny(gray, thresh, 3*thresh, 3)\n    output = cv2.cvtColor(edges, cv2.COLOR_GRAY2RGBA)\n    scriptOp.copyNumpyArray(output)\n    return\n<\/pre>\n\n\n\n
The first line in the onCook<\/em> function is to retrieve the integer value from the parameter, Threshold<\/em>. We also exit the function when there is not valid video image coming in. For the edge detection, we convert the RGBA image into grayscale and then perform a blur function. the cv2.Canny<\/em> function returns the detected edges in a grayscale image, edges<\/em>. Finally, we convert the edges<\/em> into a regular RGBA image, output,<\/em> for subsequent output as before.<\/p>\n\n\n\n
The final TouchDesign project is available in this GitHub repository<\/a>.<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
After the first introduction of the Script TOP, the coming example will implement the Canny Edge Detector with OpenCV in TouchDesigner as a demonstration. TouchDesigner already includes its own Edge TOP for edge detection and visualisation. We also implement a slider parameter Threshold in the Script TOP to control the variation of edge detection. Here […]<\/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":[3,182,84],"class_list":["post-3232","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-opencv","tag-python","tag-touchdesigner"],"_links":{"self":[{"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/posts\/3232","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=3232"}],"version-history":[{"count":9,"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/posts\/3232\/revisions"}],"predecessor-version":[{"id":3291,"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/posts\/3232\/revisions\/3291"}],"wp:attachment":[{"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/media?parent=3232"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/categories?post=3232"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/tags?post=3232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}