{"id":3720,"date":"2026-05-14T22:56:18","date_gmt":"2026-05-14T14:56:18","guid":{"rendered":"http:\/\/www.magicandlove.com\/blog\/?p=3720"},"modified":"2026-05-14T23:23:00","modified_gmt":"2026-05-14T15:23:00","slug":"touchdesigner-tutorial-video","status":"publish","type":"post","link":"http:\/\/www.magicandlove.com\/blog\/2026\/05\/14\/touchdesigner-tutorial-video\/","title":{"rendered":"TouchDesigner Tutorial Video"},"content":{"rendered":"\n<p>It is a collection of the tutorial videos for the teaching of <a href=\"https:\/\/derivative.ca\/\">TouchDesigner<\/a> and Python usage in the media art\/design context.<\/p>\n\n\n<div class=\"wp-block-automatic-youtube-gallery-block\"><div class=\"automatic-youtube-gallery ayg\">\n        <ayg-theme-classic id=\"ayg-7c1e1a38caf0ac9b585dbe2ceccf4b8d\" class=\"ayg-theme ayg-theme-classic\" data-params=\"{&quot;uid&quot;:&quot;7c1e1a38caf0ac9b585dbe2ceccf4b8d&quot;,&quot;loop&quot;:0,&quot;autoadvance&quot;:1,&quot;player_title&quot;:1,&quot;player_description&quot;:1}\">\n        <div class=\"ayg-player\">\n            <div class=\"ayg-player-container\" style=\"max-width: 100%;\">\n                <ayg-player src=\"https:\/\/www.youtube.com\/embed\/0laWpgBfWOc?enablejsapi=1&#038;playsinline=1&#038;rel=0&#038;modestbranding=1&#038;iv_load_policy=3\" ratio=\"56.25\" title=\"Brief explanation of TouchDesigner AR\" poster=\"https:\/\/i.ytimg.com\/vi\/0laWpgBfWOc\/maxresdefault.jpg\"><\/ayg-player>           \n            <\/div>\n            <div class=\"ayg-player-caption\">\n                    \n                    <h2 class=\"ayg-player-title\">Brief explanation of TouchDesigner AR<\/h2>  \n                                  \n                    <ayg-description class=\"ayg-player-description\">It is a brief explanation of the approach to implement the plane_ar.py OpenCV sample in TouchDesigner as a markerless augmented reality application.<\/ayg-description>\n                            <\/div>\n        <\/div>\n        <div class=\"ayg-videos ayg-gallery ayg-row\">\n                            <div class=\"ayg-video ayg-video-0laWpgBfWOc ayg-col ayg-col-4 ayg-col-sm-3 ayg-col-xs-2 ayg-active\">\n                    <div class=\"ayg-thumbnail\" data-id=\"0laWpgBfWOc\" data-title=\"Brief explanation of TouchDesigner AR\" data-url=\"\">\n    <div class=\"ayg-thumbnail-media\" style=\"--ayg-image-ratio: 16 \/ 9\">\n        <img loading=\"lazy\" src=\"https:\/\/i.ytimg.com\/vi\/0laWpgBfWOc\/maxresdefault.jpg\" class=\"ayg-thumbnail-image\" width=\"1280\" height=\"720\" alt=\"Brief explanation of TouchDesigner AR\" decoding=\"async\"\/><div class=\"ayg-thumbnail-now-playing\" style=\"display: none;\">Now Playing<\/div><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"white\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" class=\"ayg-icon ayg-thumbnail-icon-play\" title=\"Play\" aria-label=\"Play\"><path fill-rule=\"evenodd\" d=\"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm14.024-.983a1.125 1.125 0 0 1 0 1.966l-5.603 3.113A1.125 1.125 0 0 1 9 15.113V8.887c0-.857.921-1.4 1.671-.983l5.603 3.113Z\" clip-rule=\"evenodd\" \/><\/svg>        \n    <\/div>\n    <div class=\"ayg-thumbnail-caption\">\n         \n            <div class=\"ayg-thumbnail-title\">Brief explanation of TouchDesigner AR<\/div>\n         \n                  \n            <div class=\"ayg-thumbnail-description\" style=\"display: none;\">It is a brief explanation of the approach to implement the plane_ar.py OpenCV sample in TouchDesigner as a markerless augmented reality application.<\/div>\n            <\/div>           \n<\/div>                <\/div>\n                            <div class=\"ayg-video ayg-video-MmEgoi7fYwo ayg-col ayg-col-4 ayg-col-sm-3 ayg-col-xs-2\">\n                    <div class=\"ayg-thumbnail\" data-id=\"MmEgoi7fYwo\" data-title=\"TouchDesigner implementation of markerless augmented reality\" data-url=\"\">\n    <div class=\"ayg-thumbnail-media\" style=\"--ayg-image-ratio: 16 \/ 9\">\n        <img loading=\"lazy\" src=\"https:\/\/i.ytimg.com\/vi\/MmEgoi7fYwo\/maxresdefault.jpg\" class=\"ayg-thumbnail-image\" width=\"1280\" height=\"720\" alt=\"TouchDesigner implementation of markerless augmented reality\" decoding=\"async\"\/><div class=\"ayg-thumbnail-now-playing\" style=\"display: none;\">Now Playing<\/div><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"white\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" class=\"ayg-icon ayg-thumbnail-icon-play\" title=\"Play\" aria-label=\"Play\"><path fill-rule=\"evenodd\" d=\"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm14.024-.983a1.125 1.125 0 0 1 0 1.966l-5.603 3.113A1.125 1.125 0 0 1 9 15.113V8.887c0-.857.921-1.4 1.671-.983l5.603 3.113Z\" clip-rule=\"evenodd\" \/><\/svg>        \n    <\/div>\n    <div class=\"ayg-thumbnail-caption\">\n         \n            <div class=\"ayg-thumbnail-title\">TouchDesigner implementation of markerless augmented reality<\/div>\n         \n                  \n            <div class=\"ayg-thumbnail-description\" style=\"display: none;\">It is a @TouchDesignerOfficial implementation of the OpenCV plane AR sample with custom Python code. <br \/>\n<br \/>\nModel and animation are from free3d.com.<\/div>\n            <\/div>           \n<\/div>                <\/div>\n                            <div class=\"ayg-video ayg-video-f3M-j8YxLIk ayg-col ayg-col-4 ayg-col-sm-3 ayg-col-xs-2\">\n                    <div class=\"ayg-thumbnail\" data-id=\"f3M-j8YxLIk\" data-title=\"Bullet Physics and MediaPipe finger interaction in TouchDesigner\" data-url=\"\">\n    <div class=\"ayg-thumbnail-media\" style=\"--ayg-image-ratio: 16 \/ 9\">\n        <img loading=\"lazy\" src=\"https:\/\/i.ytimg.com\/vi\/f3M-j8YxLIk\/maxresdefault.jpg\" class=\"ayg-thumbnail-image\" width=\"1280\" height=\"720\" alt=\"Bullet Physics and MediaPipe finger interaction in TouchDesigner\" decoding=\"async\"\/><div class=\"ayg-thumbnail-now-playing\" style=\"display: none;\">Now Playing<\/div><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"white\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" class=\"ayg-icon ayg-thumbnail-icon-play\" title=\"Play\" aria-label=\"Play\"><path fill-rule=\"evenodd\" d=\"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm14.024-.983a1.125 1.125 0 0 1 0 1.966l-5.603 3.113A1.125 1.125 0 0 1 9 15.113V8.887c0-.857.921-1.4 1.671-.983l5.603 3.113Z\" clip-rule=\"evenodd\" \/><\/svg>        \n    <\/div>\n    <div class=\"ayg-thumbnail-caption\">\n         \n            <div class=\"ayg-thumbnail-title\">Bullet Physics and MediaPipe finger interaction in TouchDesigner<\/div>\n         \n                  \n            <div class=\"ayg-thumbnail-description\" style=\"display: none;\"><span class=\"ayg-player-description-less\">The video is a brief demonstration of the implementation of MediaPipe finger tracking to interact with a number of virtual objects (balls) with Bullet Physics simulation. Details and project download <span class=\"ayg-player-description-dots\">&#8230;<\/span><\/span><span class=\"ayg-player-description-more\">can be found in my Patreon at <a href=\"https:\/\/patreon.com\/chungbwc\/\" rel=\"nofollow\">https:\/\/patreon.com\/chungbwc\/<\/a><\/span><a href=\"#\" class=\"ayg-player-description-toggle-btn\">Show More<\/a><\/div>\n            <\/div>           \n<\/div>                <\/div>\n                            <div class=\"ayg-video ayg-video-f3lkGR4VMIc ayg-col ayg-col-4 ayg-col-sm-3 ayg-col-xs-2\">\n                    <div class=\"ayg-thumbnail\" data-id=\"f3lkGR4VMIc\" data-title=\"TouchDesigner Render Pick CHOP with Optical Flow\" data-url=\"\">\n    <div class=\"ayg-thumbnail-media\" style=\"--ayg-image-ratio: 16 \/ 9\">\n        <img loading=\"lazy\" src=\"https:\/\/i.ytimg.com\/vi\/f3lkGR4VMIc\/maxresdefault.jpg\" class=\"ayg-thumbnail-image\" width=\"1280\" height=\"720\" alt=\"TouchDesigner Render Pick CHOP with Optical Flow\" decoding=\"async\"\/><div class=\"ayg-thumbnail-now-playing\" style=\"display: none;\">Now Playing<\/div><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"white\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" class=\"ayg-icon ayg-thumbnail-icon-play\" title=\"Play\" aria-label=\"Play\"><path fill-rule=\"evenodd\" d=\"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm14.024-.983a1.125 1.125 0 0 1 0 1.966l-5.603 3.113A1.125 1.125 0 0 1 9 15.113V8.887c0-.857.921-1.4 1.671-.983l5.603 3.113Z\" clip-rule=\"evenodd\" \/><\/svg>        \n    <\/div>\n    <div class=\"ayg-thumbnail-caption\">\n         \n            <div class=\"ayg-thumbnail-title\">TouchDesigner Render Pick CHOP with Optical Flow<\/div>\n         \n                  \n            <div class=\"ayg-thumbnail-description\" style=\"display: none;\"><span class=\"ayg-player-description-less\">This is a demonstration video to use optical flow as interaction mechanism to select an virtual object (3D sphere) from a Render TOP window. It changes the size of the <span class=\"ayg-player-description-dots\">&#8230;<\/span><\/span><span class=\"ayg-player-description-more\">selected sphere (geometry instance) upon interaction.<br \/>\n<br \/>\nDetails and download can be found in my Patreon at <a href=\"https:\/\/patreon.com\/BryanChung\" rel=\"nofollow\">https:\/\/patreon.com\/BryanChung<\/a><\/span><a href=\"#\" class=\"ayg-player-description-toggle-btn\">Show More<\/a><\/div>\n            <\/div>           \n<\/div>                <\/div>\n                            <div class=\"ayg-video ayg-video-5yjErVDmR2c ayg-col ayg-col-4 ayg-col-sm-3 ayg-col-xs-2\">\n                    <div class=\"ayg-thumbnail\" data-id=\"5yjErVDmR2c\" data-title=\"OpenCV Tracker in TouchDesigner, Part 2 (final implementation)\" data-url=\"\">\n    <div class=\"ayg-thumbnail-media\" style=\"--ayg-image-ratio: 16 \/ 9\">\n        <img loading=\"lazy\" src=\"https:\/\/i.ytimg.com\/vi\/5yjErVDmR2c\/maxresdefault.jpg\" class=\"ayg-thumbnail-image\" width=\"1280\" height=\"720\" alt=\"OpenCV Tracker in TouchDesigner, Part 2 (final implementation)\" decoding=\"async\"\/><div class=\"ayg-thumbnail-now-playing\" style=\"display: none;\">Now Playing<\/div><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"white\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" class=\"ayg-icon ayg-thumbnail-icon-play\" title=\"Play\" aria-label=\"Play\"><path fill-rule=\"evenodd\" d=\"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm14.024-.983a1.125 1.125 0 0 1 0 1.966l-5.603 3.113A1.125 1.125 0 0 1 9 15.113V8.887c0-.857.921-1.4 1.671-.983l5.603 3.113Z\" clip-rule=\"evenodd\" \/><\/svg>        \n    <\/div>\n    <div class=\"ayg-thumbnail-caption\">\n         \n            <div class=\"ayg-thumbnail-title\">OpenCV Tracker in TouchDesigner, Part 2 (final implementation)<\/div>\n         \n                  \n            <div class=\"ayg-thumbnail-description\" style=\"display: none;\"><span class=\"ayg-player-description-less\">This is the part 2 of implementing OpenCV Tracker in TouchDesigner, with the mouse interaction that developed in the part 1. More details and download are available in my Patreon <span class=\"ayg-player-description-dots\">&#8230;<\/span><\/span><span class=\"ayg-player-description-more\">at <a href=\"https:\/\/patreon.com\/BryanChung\" rel=\"nofollow\">https:\/\/patreon.com\/BryanChung<\/a><\/span><a href=\"#\" class=\"ayg-player-description-toggle-btn\">Show More<\/a><\/div>\n            <\/div>           \n<\/div>                <\/div>\n                            <div class=\"ayg-video ayg-video-cM5XzA8ZS9E ayg-col ayg-col-4 ayg-col-sm-3 ayg-col-xs-2\">\n                    <div class=\"ayg-thumbnail\" data-id=\"cM5XzA8ZS9E\" data-title=\"OpenCV Tracker in TouchDesigner, Part 1 (mouse pick implementation)\" data-url=\"\">\n    <div class=\"ayg-thumbnail-media\" style=\"--ayg-image-ratio: 16 \/ 9\">\n        <img loading=\"lazy\" src=\"https:\/\/i.ytimg.com\/vi\/cM5XzA8ZS9E\/mqdefault.jpg\" class=\"ayg-thumbnail-image\" width=\"320\" height=\"180\" alt=\"OpenCV Tracker in TouchDesigner, Part 1 (mouse pick implementation)\" decoding=\"async\"\/><div class=\"ayg-thumbnail-now-playing\" style=\"display: none;\">Now Playing<\/div><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"white\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" class=\"ayg-icon ayg-thumbnail-icon-play\" title=\"Play\" aria-label=\"Play\"><path fill-rule=\"evenodd\" d=\"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm14.024-.983a1.125 1.125 0 0 1 0 1.966l-5.603 3.113A1.125 1.125 0 0 1 9 15.113V8.887c0-.857.921-1.4 1.671-.983l5.603 3.113Z\" clip-rule=\"evenodd\" \/><\/svg>        \n    <\/div>\n    <div class=\"ayg-thumbnail-caption\">\n         \n            <div class=\"ayg-thumbnail-title\">OpenCV Tracker in TouchDesigner, Part 1 (mouse pick implementation)<\/div>\n         \n                  \n            <div class=\"ayg-thumbnail-description\" style=\"display: none;\"><span class=\"ayg-player-description-less\">This video is the part 1 of the tutorial to use OpenCV Tracker in TouchDesigner. It will illustrate how we can use the mouse to select\/crop a region from a <span class=\"ayg-player-description-dots\">&#8230;<\/span><\/span><span class=\"ayg-player-description-more\">screen image for subsequent tracking in part 2.<br \/>\n<br \/>\nDetails and project download are available in my Patreon at <a href=\"https:\/\/patreon.com\/BryanChung\" rel=\"nofollow\">https:\/\/patreon.com\/BryanChung<\/a><\/span><a href=\"#\" class=\"ayg-player-description-toggle-btn\">Show More<\/a><\/div>\n            <\/div>           \n<\/div>                <\/div>\n                            <div class=\"ayg-video ayg-video-XCWLSgq5_KM ayg-col ayg-col-4 ayg-col-sm-3 ayg-col-xs-2\">\n                    <div class=\"ayg-thumbnail\" data-id=\"XCWLSgq5_KM\" data-title=\"OpenCV Tracking in TouchDesigner tutorial preview\" data-url=\"\">\n    <div class=\"ayg-thumbnail-media\" style=\"--ayg-image-ratio: 16 \/ 9\">\n        <img loading=\"lazy\" src=\"https:\/\/i.ytimg.com\/vi\/XCWLSgq5_KM\/maxresdefault.jpg\" class=\"ayg-thumbnail-image\" width=\"1280\" height=\"720\" alt=\"OpenCV Tracking in TouchDesigner tutorial preview\" decoding=\"async\"\/><div class=\"ayg-thumbnail-now-playing\" style=\"display: none;\">Now Playing<\/div><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"white\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" class=\"ayg-icon ayg-thumbnail-icon-play\" title=\"Play\" aria-label=\"Play\"><path fill-rule=\"evenodd\" d=\"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm14.024-.983a1.125 1.125 0 0 1 0 1.966l-5.603 3.113A1.125 1.125 0 0 1 9 15.113V8.887c0-.857.921-1.4 1.671-.983l5.603 3.113Z\" clip-rule=\"evenodd\" \/><\/svg>        \n    <\/div>\n    <div class=\"ayg-thumbnail-caption\">\n         \n            <div class=\"ayg-thumbnail-title\">OpenCV Tracking in TouchDesigner tutorial preview<\/div>\n         \n                  \n            <div class=\"ayg-thumbnail-description\" style=\"display: none;\">This video is a short demonstration of using the OpenCV Tracker in TouchDesigner with an arbitrary 2D pattern captured by the mouse interaction.<\/div>\n            <\/div>           \n<\/div>                <\/div>\n                            <div class=\"ayg-video ayg-video-pGhkUzacBJs ayg-col ayg-col-4 ayg-col-sm-3 ayg-col-xs-2\">\n                    <div class=\"ayg-thumbnail\" data-id=\"pGhkUzacBJs\" data-title=\"Moving and rotating virtual object with optical flow in TouchDesigner\" data-url=\"\">\n    <div class=\"ayg-thumbnail-media\" style=\"--ayg-image-ratio: 16 \/ 9\">\n        <img loading=\"lazy\" src=\"https:\/\/i.ytimg.com\/vi\/pGhkUzacBJs\/mqdefault.jpg\" class=\"ayg-thumbnail-image\" width=\"320\" height=\"180\" alt=\"Moving and rotating virtual object with optical flow in TouchDesigner\" decoding=\"async\"\/><div class=\"ayg-thumbnail-now-playing\" style=\"display: none;\">Now Playing<\/div><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"white\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" class=\"ayg-icon ayg-thumbnail-icon-play\" title=\"Play\" aria-label=\"Play\"><path fill-rule=\"evenodd\" d=\"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm14.024-.983a1.125 1.125 0 0 1 0 1.966l-5.603 3.113A1.125 1.125 0 0 1 9 15.113V8.887c0-.857.921-1.4 1.671-.983l5.603 3.113Z\" clip-rule=\"evenodd\" \/><\/svg>        \n    <\/div>\n    <div class=\"ayg-thumbnail-caption\">\n         \n            <div class=\"ayg-thumbnail-title\">Moving and rotating virtual object with optical flow in TouchDesigner<\/div>\n         \n                  \n            <div class=\"ayg-thumbnail-description\" style=\"display: none;\"><span class=\"ayg-player-description-less\">It is a continuation of the last tutorial (<a href=\"https:\/\/www.youtube.com\/watch?v=GHTmr592-Cw\" rel=\"nofollow\">https:\/\/www.youtube.com\/watch?v=GHTmr592-Cw<\/a>) to add the rotational effect to manipulate a virtual object on screen, using optical flow in TouchDesigner. Details can be found <span class=\"ayg-player-description-dots\">&#8230;<\/span><\/span><span class=\"ayg-player-description-more\">in my Patreon at <a href=\"https:\/\/patreon.com\/BryanChung\" rel=\"nofollow\">https:\/\/patreon.com\/BryanChung<\/a><\/span><a href=\"#\" class=\"ayg-player-description-toggle-btn\">Show More<\/a><\/div>\n            <\/div>           \n<\/div>                <\/div>\n                            <div class=\"ayg-video ayg-video-GHTmr592-Cw ayg-col ayg-col-4 ayg-col-sm-3 ayg-col-xs-2\">\n                    <div class=\"ayg-thumbnail\" data-id=\"GHTmr592-Cw\" data-title=\"Optical Flow interaction in TouchDesigner tutorial\" data-url=\"\">\n    <div class=\"ayg-thumbnail-media\" style=\"--ayg-image-ratio: 16 \/ 9\">\n        <img loading=\"lazy\" src=\"https:\/\/i.ytimg.com\/vi\/GHTmr592-Cw\/maxresdefault.jpg\" class=\"ayg-thumbnail-image\" width=\"1280\" height=\"720\" alt=\"Optical Flow interaction in TouchDesigner tutorial\" decoding=\"async\"\/><div class=\"ayg-thumbnail-now-playing\" style=\"display: none;\">Now Playing<\/div><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"white\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" class=\"ayg-icon ayg-thumbnail-icon-play\" title=\"Play\" aria-label=\"Play\"><path fill-rule=\"evenodd\" d=\"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm14.024-.983a1.125 1.125 0 0 1 0 1.966l-5.603 3.113A1.125 1.125 0 0 1 9 15.113V8.887c0-.857.921-1.4 1.671-.983l5.603 3.113Z\" clip-rule=\"evenodd\" \/><\/svg>        \n    <\/div>\n    <div class=\"ayg-thumbnail-caption\">\n         \n            <div class=\"ayg-thumbnail-title\">Optical Flow interaction in TouchDesigner tutorial<\/div>\n         \n                  \n            <div class=\"ayg-thumbnail-description\" style=\"display: none;\">This video is a tutorial to demonstrate the use of optical flow as an interaction mechanism to move a virtual ball in the screen.<\/div>\n            <\/div>           \n<\/div>                <\/div>\n                            <div class=\"ayg-video ayg-video-6rjVagF9O8U ayg-col ayg-col-4 ayg-col-sm-3 ayg-col-xs-2\">\n                    <div class=\"ayg-thumbnail\" data-id=\"6rjVagF9O8U\" data-title=\"Movement in Time redone in TouchDesigner\" data-url=\"\">\n    <div class=\"ayg-thumbnail-media\" style=\"--ayg-image-ratio: 16 \/ 9\">\n        <img loading=\"lazy\" src=\"https:\/\/i.ytimg.com\/vi\/6rjVagF9O8U\/maxresdefault.jpg\" class=\"ayg-thumbnail-image\" width=\"1280\" height=\"720\" alt=\"Movement in Time redone in TouchDesigner\" decoding=\"async\"\/><div class=\"ayg-thumbnail-now-playing\" style=\"display: none;\">Now Playing<\/div><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"white\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" class=\"ayg-icon ayg-thumbnail-icon-play\" title=\"Play\" aria-label=\"Play\"><path fill-rule=\"evenodd\" d=\"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm14.024-.983a1.125 1.125 0 0 1 0 1.966l-5.603 3.113A1.125 1.125 0 0 1 9 15.113V8.887c0-.857.921-1.4 1.671-.983l5.603 3.113Z\" clip-rule=\"evenodd\" \/><\/svg>        \n    <\/div>\n    <div class=\"ayg-thumbnail-caption\">\n         \n            <div class=\"ayg-thumbnail-title\">Movement in Time redone in TouchDesigner<\/div>\n         \n                  \n            <div class=\"ayg-thumbnail-description\" style=\"display: none;\">Use of sparse optical flow in TouchDesigner to recreate my original Movement in Time artwork.<\/div>\n            <\/div>           \n<\/div>                <\/div>\n                            <div class=\"ayg-video ayg-video-wDhnA-cZmlA ayg-col ayg-col-4 ayg-col-sm-3 ayg-col-xs-2\">\n                    <div class=\"ayg-thumbnail\" data-id=\"wDhnA-cZmlA\" data-title=\"Optical flow interaction demo in TouchDesigner\" data-url=\"\">\n    <div class=\"ayg-thumbnail-media\" style=\"--ayg-image-ratio: 16 \/ 9\">\n        <img loading=\"lazy\" src=\"https:\/\/i.ytimg.com\/vi\/wDhnA-cZmlA\/maxresdefault.jpg\" class=\"ayg-thumbnail-image\" width=\"1280\" height=\"720\" alt=\"Optical flow interaction demo in TouchDesigner\" decoding=\"async\"\/><div class=\"ayg-thumbnail-now-playing\" style=\"display: none;\">Now Playing<\/div><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"white\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" class=\"ayg-icon ayg-thumbnail-icon-play\" title=\"Play\" aria-label=\"Play\"><path fill-rule=\"evenodd\" d=\"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm14.024-.983a1.125 1.125 0 0 1 0 1.966l-5.603 3.113A1.125 1.125 0 0 1 9 15.113V8.887c0-.857.921-1.4 1.671-.983l5.603 3.113Z\" clip-rule=\"evenodd\" \/><\/svg>        \n    <\/div>\n    <div class=\"ayg-thumbnail-caption\">\n         \n            <div class=\"ayg-thumbnail-title\">Optical flow interaction demo in TouchDesigner<\/div>\n         \n                  \n            <div class=\"ayg-thumbnail-description\" style=\"display: none;\"><span class=\"ayg-player-description-less\">It is a preview of the coming TouchDesigner tutorials on using optical flow as interaction vehicle.<br \/>\n<br \/>\nThe first one is a pong like game interaction. The second one is a virtual <span class=\"ayg-player-description-dots\">&#8230;<\/span><\/span><span class=\"ayg-player-description-more\">rotation dial.<\/span><a href=\"#\" class=\"ayg-player-description-toggle-btn\">Show More<\/a><\/div>\n            <\/div>           \n<\/div>                <\/div>\n                            <div class=\"ayg-video ayg-video-tQwh_0TXkoM ayg-col ayg-col-4 ayg-col-sm-3 ayg-col-xs-2\">\n                    <div class=\"ayg-thumbnail\" data-id=\"tQwh_0TXkoM\" data-title=\"Interactive mirror with optical flow in TouchDesigner\" data-url=\"\">\n    <div class=\"ayg-thumbnail-media\" style=\"--ayg-image-ratio: 16 \/ 9\">\n        <img loading=\"lazy\" src=\"https:\/\/i.ytimg.com\/vi\/tQwh_0TXkoM\/maxresdefault.jpg\" class=\"ayg-thumbnail-image\" width=\"1280\" height=\"720\" alt=\"Interactive mirror with optical flow in TouchDesigner\" decoding=\"async\"\/><div class=\"ayg-thumbnail-now-playing\" style=\"display: none;\">Now Playing<\/div><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"white\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" class=\"ayg-icon ayg-thumbnail-icon-play\" title=\"Play\" aria-label=\"Play\"><path fill-rule=\"evenodd\" d=\"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm14.024-.983a1.125 1.125 0 0 1 0 1.966l-5.603 3.113A1.125 1.125 0 0 1 9 15.113V8.887c0-.857.921-1.4 1.671-.983l5.603 3.113Z\" clip-rule=\"evenodd\" \/><\/svg>        \n    <\/div>\n    <div class=\"ayg-thumbnail-caption\">\n         \n            <div class=\"ayg-thumbnail-title\">Interactive mirror with optical flow in TouchDesigner<\/div>\n         \n                  \n            <div class=\"ayg-thumbnail-description\" style=\"display: none;\">This video is a tutorial to use optical flow as an interactive vehicle to create a responsive mirror composed of a number of spinning circles.<\/div>\n            <\/div>           \n<\/div>                <\/div>\n                    <\/div>\n        <ayg-pagination class=\"ayg-pagination\" data-params=\"{&quot;uid&quot;:&quot;7c1e1a38caf0ac9b585dbe2ceccf4b8d&quot;,&quot;post_id&quot;:3720,&quot;type&quot;:&quot;playlist&quot;,&quot;src&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/playlist?list=PLfW3ifLccmdQm9P-oKrfOvPpQEeNF8uPP&quot;,&quot;order&quot;:&quot;relevance&quot;,&quot;limit&quot;:500,&quot;per_page&quot;:12,&quot;cache&quot;:0,&quot;columns&quot;:4,&quot;thumb_ratio&quot;:56.25,&quot;thumb_title&quot;:1,&quot;thumb_title_length&quot;:0,&quot;thumb_excerpt&quot;:0,&quot;thumb_excerpt_length&quot;:75,&quot;player_description&quot;:1,&quot;total_pages&quot;:5,&quot;paged&quot;:1,&quot;next_page_token&quot;:&quot;EAAaHlBUOkNBd2lFRUZHTWtNNE9UbEVRelEyT1RNeFFqSQ&quot;,&quot;prev_page_token&quot;:&quot;&quot;}\">\n            <div class=\"ayg-pagination-next\">\n            <button type=\"button\" class=\"ayg-btn ayg-pagination-next-btn\" data-type=\"more\">Load More<\/button>\n        <\/div>\n    <\/ayg-pagination>    <\/ayg-theme-classic>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>It is a collection of the tutorial videos for the teaching of TouchDesigner and Python usage in the media art\/design context.<\/p>\n","protected":false},"author":1,"featured_media":3723,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"gallery","meta":{"footnotes":""},"categories":[191],"tags":[84],"class_list":["post-3720","post","type-post","status-publish","format-gallery","has-post-thumbnail","hentry","category-video","tag-touchdesigner","post_format-post-format-gallery"],"_links":{"self":[{"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/posts\/3720","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=3720"}],"version-history":[{"count":5,"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/posts\/3720\/revisions"}],"predecessor-version":[{"id":3732,"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/posts\/3720\/revisions\/3732"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/media\/3723"}],"wp:attachment":[{"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/media?parent=3720"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/categories?post=3720"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/tags?post=3720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}