{"id":699,"date":"2022-04-30T17:25:35","date_gmt":"2022-04-30T21:25:35","guid":{"rendered":"https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/?p=699"},"modified":"2022-04-30T17:25:35","modified_gmt":"2022-04-30T21:25:35","slug":"realtime-light-paint-final-post","status":"publish","type":"post","link":"https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/kslokhandwala\/realtime-light-paint-final-post\/","title":{"rendered":"Realtime Light Paint &#8211; Final Post"},"content":{"rendered":"\n<p>Below is a video of the project working, or use the live <a rel=\"noreferrer noopener\" href=\"https:\/\/kslokhandwala2022.github.io\/LightPaint\/\" data-type=\"URL\" data-id=\"https:\/\/kslokhandwala2022.github.io\/LightPaint\/\" target=\"_blank\">link<\/a> to experience it using your own webcam.<\/p>\n\n\n\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=\"Light Paint\" width=\"1000\" height=\"563\" src=\"https:\/\/www.youtube.com\/embed\/-oEA5BPcbMM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><figcaption>The final iteration for Light Paint<\/figcaption><\/figure>\n\n\n\n<p>Reflecting back on the art-making process, I wanted an art piece that was interactive and inherently connected with the user. The final product is a responsive, dynamic art piece where the user uses a flashlight to draw forms on a digital canvas. The project uses WebGL, a video feedback effect and glsl shaders to create this effect. <\/p>\n\n\n\n<p>I used a simulation shader to add a residual effect of the previous frame and then discarded dark parts of the video input to isolate the bright areas. Then, I doubled up the render, offset it and added a different color to create two distinct trails left by the light. I was able to intercept the rendering in a fragment shader to create different color options. <\/p>\n\n\n\n<p>Each color palette has its own inspiration. The first was inspired by the synthwave color pallette, the second by 3D glasses and light, the third by ink on brown parchment, and the last by glowing algae in water.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"506\" data-id=\"703\" src=\"https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture-1-1024x506.png\" alt=\"\" class=\"wp-image-703\" srcset=\"https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture-1-1024x506.png 1024w, https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture-1-800x396.png 800w, https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture-1-768x380.png 768w, https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture-1-1536x759.png 1536w, https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture-1-600x297.png 600w, https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture-1.png 1709w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"481\" data-id=\"704\" src=\"https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture1-1024x481.png\" alt=\"\" class=\"wp-image-704\" srcset=\"https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture1-1024x481.png 1024w, https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture1-800x376.png 800w, https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture1-768x361.png 768w, https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture1-1536x722.png 1536w, https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture1-600x282.png 600w, https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture1.png 1904w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"467\" data-id=\"702\" src=\"https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture2-1024x467.png\" alt=\"\" class=\"wp-image-702\" srcset=\"https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture2-1024x467.png 1024w, https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture2-800x365.png 800w, https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture2-768x350.png 768w, https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture2-1536x700.png 1536w, https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture2-600x273.png 600w, https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture2.png 1913w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"476\" data-id=\"705\" src=\"https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture3-1024x476.png\" alt=\"\" class=\"wp-image-705\" srcset=\"https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture3-1024x476.png 1024w, https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture3-800x372.png 800w, https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture3-768x357.png 768w, https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture3-1536x713.png 1536w, https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture3-600x279.png 600w, https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture3.png 1910w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/figure>\n\n\n\n<p>The piece can be shared with everyone, and the art is created by those it is shared with. In a way, the piece grows larger as more people interact with it. I just built the canvas! I had alot of fun with this project and I&#8217;m surprisingly pleased how it works in both light and dark environments!<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Sources:<\/p>\n\n\n\n<p>Feedback effect starter code &#8211; Charlie Roberts<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Below is a video of the project working, or use the live link to experience it using your own webcam. Reflecting back on the art-making process, I wanted an art piece that was interactive and inherently connected with the user. The final product is a responsive, dynamic art piece where the user uses a flashlight&#8230; <\/p>\n<div class=\"link-more\"><a href=\"https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/kslokhandwala\/realtime-light-paint-final-post\/\">Read More<\/a><\/div>\n","protected":false},"author":147,"featured_media":700,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"cybocfi_hide_featured_image":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-699","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"jetpack_featured_media_url":"https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-content\/uploads\/sites\/23\/2022\/04\/Capture.png","_links":{"self":[{"href":"https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-json\/wp\/v2\/posts\/699","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-json\/wp\/v2\/users\/147"}],"replies":[{"embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-json\/wp\/v2\/comments?post=699"}],"version-history":[{"count":2,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-json\/wp\/v2\/posts\/699\/revisions"}],"predecessor-version":[{"id":706,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-json\/wp\/v2\/posts\/699\/revisions\/706"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-json\/wp\/v2\/media\/700"}],"wp:attachment":[{"href":"https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-json\/wp\/v2\/media?parent=699"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-json\/wp\/v2\/categories?post=699"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/lightart-d22\/wp-json\/wp\/v2\/tags?post=699"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}