{"id":1127,"date":"2013-04-08T17:48:43","date_gmt":"2013-04-08T09:48:43","guid":{"rendered":"http:\/\/www.magicandlove.com\/blog\/?page_id=1127"},"modified":"2025-08-18T05:15:27","modified_gmt":"2025-08-17T21:15:27","slug":"selected-works","status":"publish","type":"page","link":"http:\/\/www.magicandlove.com\/blog\/services\/selected-works\/","title":{"rendered":"Selected works"},"content":{"rendered":"\n<p>Here is a list of my former works on interactive media design.<\/p>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Pure Data Fiducial Marker 003\" width=\"980\" height=\"551\" src=\"https:\/\/www.youtube.com\/embed\/w7lJcRMFZtM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">2D augmented reality<\/h3>\n\n\n\n<figure class=\"wp-block-embed alignleft is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Pure Data Fiducial Marker 003\" width=\"980\" height=\"551\" src=\"https:\/\/www.youtube.com\/embed\/w7lJcRMFZtM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>It is a teaching material for students to use the 2D marker for augmented reality tracking. A piece of video will follow the marker in the two dimensional screen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-left\"><br>3D augmented reality<br><\/h3>\n\n\n\n<figure class=\"wp-block-embed alignleft is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Augmented Reality Library Test in Processing\" width=\"980\" height=\"735\" src=\"https:\/\/www.youtube.com\/embed\/FeTYvbcU2zQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>It is another teaching material for 3D augmented reality application. Four pieces of digital videos will follow the movement and orientation of a marker in three dimensional space.<br><br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><br>Brainwave controlled painting<\/h3>\n\n\n\n<figure class=\"wp-block-embed alignleft is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Neurosky MindWave in Processing - Fluid Simulation\" width=\"980\" height=\"735\" src=\"https:\/\/www.youtube.com\/embed\/9PUySOD24Vk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>It is a working prototype to use a brainwave sensor to detect my brain activities and use them for abstract painting.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><br>Body tracking demonstration<\/h3>\n\n\n\n<figure class=\"wp-block-embed alignleft is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Kinect for Windows for Processing - alpha\" width=\"980\" height=\"551\" src=\"https:\/\/www.youtube.com\/embed\/xvrvX6LVUgQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>It is a piece of software library I develop to track the live movement of a human subject in front of the Microsoft Kinect camera.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><br>Face recognition installation (testing)<\/h3>\n\n\n\n<figure class=\"wp-block-embed alignleft is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"I Second that e-Motion (testing)\" width=\"980\" height=\"735\" src=\"https:\/\/www.youtube.com\/embed\/jCe5VhwKIKo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>It is an interactive artwork shown in the Museum of Art, Hong Kong in 2008. I developed this face recognition software to drive a moving camera to chase after the audience standing in front of the installation work. It worked with the electronics to drive a motor in the ceiling and the flashing LED lights whenever a face was recognised on the spot.<\/p>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><br>Works done with DBIS Interactive<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><br><em>Coca Cola interactive marketing campaign<\/em><br><\/h4>\n\n\n\n<figure class=\"wp-block-embed alignleft is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Coca Cola outdoor interactive advertising campaign\" width=\"980\" height=\"735\" src=\"https:\/\/www.youtube.com\/embed\/RoN_xxGcXzk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>It was an interactive advertising campaign together with McCann. Audience&#8217;s faces were captured and mapped with the animated characters to sing along with Joey Yung in the music video.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><br><em>Gestural interface prototype<\/em><\/h4>\n\n\n\n<figure class=\"wp-block-embed alignleft is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Gesture Recognition Interface 2\" width=\"980\" height=\"735\" src=\"https:\/\/www.youtube.com\/embed\/II5ozMz63_A?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>It was a working prototype to use hand gestures to control an interactive display of a housing project.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><br><em>Interactive display with smart card (RFID)<\/em><\/h4>\n\n\n\n<figure class=\"wp-block-embed alignleft is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Interactive kiosk with integrated RFID\" width=\"980\" height=\"735\" src=\"https:\/\/www.youtube.com\/embed\/fziV7YQ_yog?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>It was an interactive display in Hong Kong Ecopark with an RFID card as interacting device for the audience.<\/p>\n\n\n\n<p><br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here is a list of my former works on interactive media design. 2D augmented reality It is a teaching material for students to use the 2D marker for augmented reality tracking. A piece of video will follow the marker in the two dimensional screen. 3D augmented reality It is another teaching material for 3D augmented [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":74,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1127","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/pages\/1127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"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=1127"}],"version-history":[{"count":31,"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/pages\/1127\/revisions"}],"predecessor-version":[{"id":3629,"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/pages\/1127\/revisions\/3629"}],"up":[{"embeddable":true,"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/pages\/74"}],"wp:attachment":[{"href":"http:\/\/www.magicandlove.com\/blog\/wp-json\/wp\/v2\/media?parent=1127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}