{"id":1305,"date":"2022-05-04T05:27:35","date_gmt":"2022-05-04T09:27:35","guid":{"rendered":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/?p=1305"},"modified":"2022-05-04T05:27:35","modified_gmt":"2022-05-04T09:27:35","slug":"practice-intention-live-coding-in-ar","status":"publish","type":"post","link":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/yli21\/practice-intention-live-coding-in-ar\/","title":{"rendered":"Practice Intention &#8212; Live Coding in AR"},"content":{"rendered":"\n<p>For my practice intention, I implemented the system to enable live coding features in the AR environment. Coders can live code the visual effects with three.js and can assign different visual effects to different markers. The code can be parsed and executed in real-time by pressing \u201cctrl+enter\u201d on the keyboard. Here is the video:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/www.joshuarosenstock.com\/15e7a945-44ed-4e34-80ea-cfc0d5a8d768\"><\/video><\/figure>\n\n\n\n<p>The system is designed inspired by <a href=\"https:\/\/gibber.cc\/alpha\/playground\/\" data-type=\"URL\" data-id=\"https:\/\/gibber.cc\/alpha\/playground\/\" target=\"_blank\" rel=\"noreferrer noopener\">gibber<\/a>. The application is developed based on HTML and javascript. <a href=\"https:\/\/hiukim.github.io\/mind-ar-js-doc\/\" data-type=\"URL\" data-id=\"https:\/\/hiukim.github.io\/mind-ar-js-doc\/\" target=\"_blank\" rel=\"noreferrer noopener\">Mindar.js<\/a> library is used for the tracking in AR and the 3d objects are rendered based on <a href=\"https:\/\/threejs.org\/\" data-type=\"URL\" data-id=\"https:\/\/threejs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">three.js<\/a>. I also used the <a href=\"https:\/\/codemirror.net\/\" data-type=\"URL\" data-id=\"https:\/\/codemirror.net\/\" target=\"_blank\" rel=\"noreferrer noopener\">codemirror<\/a> to implement the code editor in the browser. Code can be found <a href=\"https:\/\/github.com\/yichenlilyc\/ARFashion\" data-type=\"URL\" data-id=\"https:\/\/github.com\/yichenlilyc\/ARFashion\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>For my practice intention, I implemented the system to enable live coding features in the AR environment. Coders can live code the visual effects with three.js and can assign different visual effects to different markers. The code can be parsed and executed in real-time by pressing \u201cctrl+enter\u201d on the keyboard. Here is the video: The&#8230; <\/p>\n<div class=\"link-more\"><a href=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/yli21\/practice-intention-live-coding-in-ar\/\">Read More<\/a><\/div>\n","protected":false},"author":257,"featured_media":1307,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"cybocfi_hide_featured_image":"","footnotes":""},"categories":[3],"tags":[],"class_list":["post-1305","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-practice-intention"],"jetpack_featured_media_url":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/05\/Screen-Shot-2022-05-04-at-3.20.37-AM.png","_links":{"self":[{"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/posts\/1305","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/users\/257"}],"replies":[{"embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/comments?post=1305"}],"version-history":[{"count":1,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/posts\/1305\/revisions"}],"predecessor-version":[{"id":1308,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/posts\/1305\/revisions\/1308"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/media\/1307"}],"wp:attachment":[{"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/media?parent=1305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/categories?post=1305"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/tags?post=1305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}