{"id":3738,"date":"2026-05-15T03:41:25","date_gmt":"2026-05-14T19:41:25","guid":{"rendered":"http:\/\/www.magicandlove.com\/blog\/?p=3738"},"modified":"2026-05-31T22:04:34","modified_gmt":"2026-05-31T14:04:34","slug":"creative-coding-video","status":"publish","type":"post","link":"http:\/\/www.magicandlove.com\/blog\/2026\/05\/15\/creative-coding-video\/","title":{"rendered":"Creative Coding Video"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">It is a collection of the short videos documenting the everyday experiments with creative coding, using TouchDesigner + Python, Processing, Pure Data, etc. <\/p>\n\n\n<div class=\"wp-block-automatic-youtube-gallery-block\"><div class=\"automatic-youtube-gallery ayg\">\n        <ayg-theme-classic id=\"ayg-c1fd9b588770c0badbcd7645ef4c4ebe\" class=\"ayg-theme ayg-theme-classic\" data-params=\"{&quot;uid&quot;:&quot;c1fd9b588770c0badbcd7645ef4c4ebe&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\/-1iCVZ18OQM?enablejsapi=1&#038;playsinline=1&#038;rel=0&#038;modestbranding=1&#038;iv_load_policy=3\" ratio=\"56.25\" title=\"First test of StreamDiffusion with video input\" poster=\"https:\/\/i.ytimg.com\/vi\/-1iCVZ18OQM\/maxresdefault.jpg\"><\/ayg-player>           \n            <\/div>\n            <div class=\"ayg-player-caption\">\n                    \n                    <h2 class=\"ayg-player-title\">First test of StreamDiffusion with video input<\/h2>  \n                                  \n                    <ayg-description class=\"ayg-player-description\"><span class=\"ayg-player-description-less\">It is a first trial run of the StreamDiffusion (<a href=\"https:\/\/github.com\/cumulo-autumn\/StreamDiffusion\" rel=\"nofollow\">https:\/\/github.com\/cumulo-autumn\/StreamDiffusion<\/a>) using video input (OpenCV VideoCapture) and a prompt, &#8220;A gray teddy bear wearing a pair of eyeglasses is working in <span class=\"ayg-player-description-dots\">&#8230;<\/span><\/span><span class=\"ayg-player-description-more\">the office.&#8221;.<\/span><a href=\"#\" class=\"ayg-player-description-toggle-btn\">Show More<\/a><\/ayg-description>\n                            <\/div>\n        <\/div>\n        <div class=\"ayg-videos ayg-gallery ayg-row\">\n                            <div class=\"ayg-video ayg-video--1iCVZ18OQM ayg-col ayg-col-4 ayg-col-sm-3 ayg-col-xs-2 ayg-active\">\n                    <div class=\"ayg-thumbnail\" data-id=\"-1iCVZ18OQM\" data-title=\"First test of StreamDiffusion with video input\" data-url=\"\">\n    <div class=\"ayg-thumbnail-media\" style=\"--ayg-image-ratio: 16 \/ 9\">\n        <img loading=\"lazy\" src=\"https:\/\/i.ytimg.com\/vi\/-1iCVZ18OQM\/maxresdefault.jpg\" class=\"ayg-thumbnail-image\" width=\"1280\" height=\"720\" alt=\"First test of StreamDiffusion with video input\" 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\">First test of StreamDiffusion with video input<\/div>\n         \n                  \n            <div class=\"ayg-thumbnail-description\" style=\"display: none;\"><span class=\"ayg-player-description-less\">It is a first trial run of the StreamDiffusion (<a href=\"https:\/\/github.com\/cumulo-autumn\/StreamDiffusion\" rel=\"nofollow\">https:\/\/github.com\/cumulo-autumn\/StreamDiffusion<\/a>) using video input (OpenCV VideoCapture) and a prompt, &#8220;A gray teddy bear wearing a pair of eyeglasses is working in <span class=\"ayg-player-description-dots\">&#8230;<\/span><\/span><span class=\"ayg-player-description-more\">the office.&#8221;.<\/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-VaEUAPkbkMM ayg-col ayg-col-4 ayg-col-sm-3 ayg-col-xs-2\">\n                    <div class=\"ayg-thumbnail\" data-id=\"VaEUAPkbkMM\" data-title=\"Old school augmented reality with OpenCV and Panda3D\" data-url=\"\">\n    <div class=\"ayg-thumbnail-media\" style=\"--ayg-image-ratio: 16 \/ 9\">\n        <img loading=\"lazy\" src=\"https:\/\/i.ytimg.com\/vi\/VaEUAPkbkMM\/maxresdefault.jpg\" class=\"ayg-thumbnail-image\" width=\"1280\" height=\"720\" alt=\"Old school augmented reality with OpenCV and Panda3D\" 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\">Old school augmented reality with OpenCV and Panda3D<\/div>\n         \n                  \n            <div class=\"ayg-thumbnail-description\" style=\"display: none;\">It is a revisit of augmented reality application written in Python using OpenCV features tracking and Panda3D for rendering.<br \/>\n<br \/>\nModel from Mixamo and image from Jellycat.<\/div>\n            <\/div>           \n<\/div>                <\/div>\n                            <div class=\"ayg-video ayg-video-AeLq6231rgM ayg-col ayg-col-4 ayg-col-sm-3 ayg-col-xs-2\">\n                    <div class=\"ayg-thumbnail\" data-id=\"AeLq6231rgM\" data-title=\"AR in Processing\" data-url=\"\">\n    <div class=\"ayg-thumbnail-media\" style=\"--ayg-image-ratio: 16 \/ 9\">\n        <img loading=\"lazy\" src=\"https:\/\/i.ytimg.com\/vi\/AeLq6231rgM\/mqdefault.jpg\" class=\"ayg-thumbnail-image\" width=\"320\" height=\"180\" alt=\"AR in Processing\" 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\">AR in Processing<\/div>\n         \n                  \n            <div class=\"ayg-thumbnail-description\" style=\"display: none;\">It is a testing of an augmented reality wrapper library for the Processing environment.<\/div>\n            <\/div>           \n<\/div>                <\/div>\n                            <div class=\"ayg-video ayg-video-WszoEo6GaTE ayg-col ayg-col-4 ayg-col-sm-3 ayg-col-xs-2\">\n                    <div class=\"ayg-thumbnail\" data-id=\"WszoEo6GaTE\" data-title=\"AR demonstration in Processing\" data-url=\"\">\n    <div class=\"ayg-thumbnail-media\" style=\"--ayg-image-ratio: 16 \/ 9\">\n        <img loading=\"lazy\" src=\"https:\/\/i.ytimg.com\/vi\/WszoEo6GaTE\/mqdefault.jpg\" class=\"ayg-thumbnail-image\" width=\"320\" height=\"180\" alt=\"AR demonstration in Processing\" 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\">AR demonstration in Processing<\/div>\n         \n                  \n            <div class=\"ayg-thumbnail-description\" style=\"display: none;\">It is another demonstration of an augmented reality wrapper library for the Processing environment.<\/div>\n            <\/div>           \n<\/div>                <\/div>\n                            <div class=\"ayg-video ayg-video-SdvaanQ2yYk ayg-col ayg-col-4 ayg-col-sm-3 ayg-col-xs-2\">\n                    <div class=\"ayg-thumbnail\" data-id=\"SdvaanQ2yYk\" data-title=\"Face detection in Processing\" data-url=\"\">\n    <div class=\"ayg-thumbnail-media\" style=\"--ayg-image-ratio: 16 \/ 9\">\n        <img loading=\"lazy\" src=\"https:\/\/i.ytimg.com\/vi\/SdvaanQ2yYk\/mqdefault.jpg\" class=\"ayg-thumbnail-image\" width=\"320\" height=\"180\" alt=\"Face detection in Processing\" 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\">Face detection in Processing<\/div>\n         \n                  \n            <div class=\"ayg-thumbnail-description\" style=\"display: none;\">This is a demonstration of a new Processing library for simple face detection in the Windows environment.<\/div>\n            <\/div>           \n<\/div>                <\/div>\n                            <div class=\"ayg-video ayg-video-5CGLao3xe6c ayg-col ayg-col-4 ayg-col-sm-3 ayg-col-xs-2\">\n                    <div class=\"ayg-thumbnail\" data-id=\"5CGLao3xe6c\" data-title=\"More Face Detection in Processing\" data-url=\"\">\n    <div class=\"ayg-thumbnail-media\" style=\"--ayg-image-ratio: 16 \/ 9\">\n        <img loading=\"lazy\" src=\"https:\/\/i.ytimg.com\/vi\/5CGLao3xe6c\/mqdefault.jpg\" class=\"ayg-thumbnail-image\" width=\"320\" height=\"180\" alt=\"More Face Detection in Processing\" 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\">More Face Detection in Processing<\/div>\n         \n                  \n            <div class=\"ayg-thumbnail-description\" style=\"display: none;\">It is a simple use of the face detection library with Processing.<\/div>\n            <\/div>           \n<\/div>                <\/div>\n                            <div class=\"ayg-video ayg-video-MJHUKiQCxvc ayg-col ayg-col-4 ayg-col-sm-3 ayg-col-xs-2\">\n                    <div class=\"ayg-thumbnail\" data-id=\"MJHUKiQCxvc\" data-title=\"Optical Flow Exercise 1\" data-url=\"\">\n    <div class=\"ayg-thumbnail-media\" style=\"--ayg-image-ratio: 16 \/ 9\">\n        <img loading=\"lazy\" src=\"https:\/\/i.ytimg.com\/vi\/MJHUKiQCxvc\/mqdefault.jpg\" class=\"ayg-thumbnail-image\" width=\"320\" height=\"180\" alt=\"Optical Flow Exercise 1\" 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 Exercise 1<\/div>\n         \n                  \n            <div class=\"ayg-thumbnail-description\" style=\"display: none;\">A simple Processing program to demonstrate the idea of optical flow.<\/div>\n            <\/div>           \n<\/div>                <\/div>\n                            <div class=\"ayg-video ayg-video-fnquZgz9aVc ayg-col ayg-col-4 ayg-col-sm-3 ayg-col-xs-2\">\n                    <div class=\"ayg-thumbnail\" data-id=\"fnquZgz9aVc\" data-title=\"Optical Flow Exercise 2\" data-url=\"\">\n    <div class=\"ayg-thumbnail-media\" style=\"--ayg-image-ratio: 16 \/ 9\">\n        <img loading=\"lazy\" src=\"https:\/\/i.ytimg.com\/vi\/fnquZgz9aVc\/mqdefault.jpg\" class=\"ayg-thumbnail-image\" width=\"320\" height=\"180\" alt=\"Optical Flow Exercise 2\" 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 Exercise 2<\/div>\n         \n                  \n            <div class=\"ayg-thumbnail-description\" style=\"display: none;\">Another simple Processing program to demonstrate the idea of optical flow.<\/div>\n            <\/div>           \n<\/div>                <\/div>\n                            <div class=\"ayg-video ayg-video-_2-U7O_CUgo ayg-col ayg-col-4 ayg-col-sm-3 ayg-col-xs-2\">\n                    <div class=\"ayg-thumbnail\" data-id=\"_2-U7O_CUgo\" data-title=\"Optical Flow Exercise 3\" data-url=\"\">\n    <div class=\"ayg-thumbnail-media\" style=\"--ayg-image-ratio: 16 \/ 9\">\n        <img loading=\"lazy\" src=\"https:\/\/i.ytimg.com\/vi\/_2-U7O_CUgo\/mqdefault.jpg\" class=\"ayg-thumbnail-image\" width=\"320\" height=\"180\" alt=\"Optical Flow Exercise 3\" 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 Exercise 3<\/div>\n         \n                  \n            <div class=\"ayg-thumbnail-description\" style=\"display: none;\">A simple Processing program to demonstrate the creative use of optical flow information to deform the live image.<\/div>\n            <\/div>           \n<\/div>                <\/div>\n                            <div class=\"ayg-video ayg-video--wsnXEqFVcA ayg-col ayg-col-4 ayg-col-sm-3 ayg-col-xs-2\">\n                    <div class=\"ayg-thumbnail\" data-id=\"-wsnXEqFVcA\" data-title=\"Optical Flow Exercise 4\" data-url=\"\">\n    <div class=\"ayg-thumbnail-media\" style=\"--ayg-image-ratio: 16 \/ 9\">\n        <img loading=\"lazy\" src=\"https:\/\/i.ytimg.com\/vi\/-wsnXEqFVcA\/mqdefault.jpg\" class=\"ayg-thumbnail-image\" width=\"320\" height=\"180\" alt=\"Optical Flow Exercise 4\" 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 Exercise 4<\/div>\n         \n                  \n            <div class=\"ayg-thumbnail-description\" style=\"display: none;\">Another simple Processing program to illustrate another creative use of optical flow information to enable 3D transformation of a 2D surface.<\/div>\n            <\/div>           \n<\/div>                <\/div>\n                            <div class=\"ayg-video ayg-video-_Ady9p_wqH4 ayg-col ayg-col-4 ayg-col-sm-3 ayg-col-xs-2\">\n                    <div class=\"ayg-thumbnail\" data-id=\"_Ady9p_wqH4\" data-title=\"Optical Flow Exercise 5\" data-url=\"\">\n    <div class=\"ayg-thumbnail-media\" style=\"--ayg-image-ratio: 16 \/ 9\">\n        <img loading=\"lazy\" src=\"https:\/\/i.ytimg.com\/vi\/_Ady9p_wqH4\/mqdefault.jpg\" class=\"ayg-thumbnail-image\" width=\"320\" height=\"180\" alt=\"Optical Flow Exercise 5\" 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 Exercise 5<\/div>\n         \n                  \n            <div class=\"ayg-thumbnail-description\" style=\"display: none;\"><span class=\"ayg-player-description-less\">This is a simple Processing program to make use of optical flow information as interface element. I use body movement to control the motion of a virtual object on the <span class=\"ayg-player-description-dots\">&#8230;<\/span><\/span><span class=\"ayg-player-description-more\">screen.<\/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-WCdQ8KQ_Wyo ayg-col ayg-col-4 ayg-col-sm-3 ayg-col-xs-2\">\n                    <div class=\"ayg-thumbnail\" data-id=\"WCdQ8KQ_Wyo\" data-title=\"Optical Flow Exercise 6\" data-url=\"\">\n    <div class=\"ayg-thumbnail-media\" style=\"--ayg-image-ratio: 16 \/ 9\">\n        <img loading=\"lazy\" src=\"https:\/\/i.ytimg.com\/vi\/WCdQ8KQ_Wyo\/mqdefault.jpg\" class=\"ayg-thumbnail-image\" width=\"320\" height=\"180\" alt=\"Optical Flow Exercise 6\" 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 Exercise 6<\/div>\n         \n                  \n            <div class=\"ayg-thumbnail-description\" style=\"display: none;\">Another simple Processing program to try out rotating a virtual object by using the optical flow information.<\/div>\n            <\/div>           \n<\/div>                <\/div>\n                    <\/div>\n        <ayg-pagination class=\"ayg-pagination\" data-params=\"{&quot;uid&quot;:&quot;c1fd9b588770c0badbcd7645ef4c4ebe&quot;,&quot;post_id&quot;:3738,&quot;type&quot;:&quot;playlist&quot;,&quot;src&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/playlist?list=PLfW3ifLccmdTD7hk_byH3RNOgWOFmEIYk&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;:4,&quot;paged&quot;:1,&quot;next_page_token&quot;:&quot;EAAaHlBUOkNBd2lFRGs0TkVNMU9EUkNNRGcyUVVFMlJESQ&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 short videos documenting the everyday experiments with creative coding, using TouchDesigner + Python, Processing, Pure Data, etc.<\/p>\n","protected":false},"author":1,"featured_media":3739,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"gallery","meta":{"footnotes":""},"categories":[195],"tags":[192],"class_list":["post-3738","post","type-post","status-publish","format-gallery","has-post-thumbnail","hentry","category-demo-video","tag-creative-coding","post_format-post-format-gallery"],"_links":{"self":[{"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/posts\/3738","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=3738"}],"version-history":[{"count":2,"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/posts\/3738\/revisions"}],"predecessor-version":[{"id":3795,"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/posts\/3738\/revisions\/3795"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/media\/3739"}],"wp:attachment":[{"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/media?parent=3738"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/categories?post=3738"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/tags?post=3738"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}