{"id":357,"date":"2022-09-20T02:46:30","date_gmt":"2022-09-20T02:46:30","guid":{"rendered":"https:\/\/www.courses.tegabrain.com\/printcode\/?p=357"},"modified":"2022-09-20T03:24:50","modified_gmt":"2022-09-20T03:24:50","slug":"assignment-1-shengli","status":"publish","type":"post","link":"https:\/\/www.courses.tegabrain.com\/printcode\/assignment-1-shengli\/","title":{"rendered":"Assignment 1 &#8211; shengli"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video height=\"1080\" style=\"aspect-ratio: 1080 \/ 1080;\" width=\"1080\" controls src=\"https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/huxi1.mp4\"><\/video><figcaption>initial concept for <em>\u547c\u6c23 \u5438\u6c23 (breathe out, tune in)<\/em> <\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><em>\u547c\u6c23 \u5438\u6c23 (breathe out, tune in)<\/em> is an exploration of movement and experimental typography, and pays homage to the moody feeling I associate with California. The background video is my friend sticking her hand out of the car window on the way home from watching a sunset in Oakland. The text is generated with WebGL in p5 &#8211; I used rotation and sin() to generate the twisting effect. Unfortunately I didn&#8217;t save the version of the code I ended up using before changing the parameters, but you can see a similar iteration <a rel=\"noreferrer noopener\" href=\"https:\/\/editor.p5js.org\/rw2423\/sketches\/vZSE4zu4S\" target=\"_blank\">here<\/a>. I then overlaid a screen recording of the p5 sketch onto the background video in premiere and exported it as a gif.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To prepare the gif for print, I exported the gif layers as files in photoshop and then used the function to generate contact sheets. This step caused me a lot of issues in Kelli&#8217;s workshop, as the contact sheets would render blank and I couldn&#8217;t figure out why. I ended up realizing the contact sheet would only render if the source files were .psd, rather than .jpg.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/WechatIMG434-768x1024.jpeg\" alt=\"\" class=\"wp-image-381\" width=\"244\" height=\"325\" srcset=\"https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/WechatIMG434-768x1024.jpeg 768w, https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/WechatIMG434-225x300.jpeg 225w, https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/WechatIMG434-1152x1536.jpeg 1152w, https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/WechatIMG434-1536x2048.jpeg 1536w, https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/WechatIMG434-1568x2091.jpeg 1568w, https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/WechatIMG434-scaled.jpeg 1920w\" sizes=\"auto, (max-width: 244px) 100vw, 244px\" \/><figcaption>preparing the contact sheets<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">After the contact sheets were ready, I then prepared the sheets for the two-color print. Since my source footage is has lots of yellow and black, I wanted to keep the contrast up &#8211; so my final files were 1) cyan and black channels layered on top of each other, which was printed as black, and 2) the yellow channel, which was printed as pink.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"960\" style=\"aspect-ratio: 720 \/ 960;\" width=\"720\" controls src=\"https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/shengli-\u80dc\u5229-2022-09-09-21.00.10-1.mp4\"><\/video><figcaption>printing the first layer<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/WechatIMG433-768x1024.jpeg\" alt=\"\" class=\"wp-image-394\" width=\"367\" height=\"489\" srcset=\"https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/WechatIMG433-768x1024.jpeg 768w, https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/WechatIMG433-225x300.jpeg 225w, https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/WechatIMG433-1152x1536.jpeg 1152w, https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/WechatIMG433-1536x2048.jpeg 1536w, https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/WechatIMG433-1568x2091.jpeg 1568w, https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/WechatIMG433-scaled.jpeg 1920w\" sizes=\"auto, (max-width: 367px) 100vw, 367px\" \/><figcaption>first layer drying<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1280\" style=\"aspect-ratio: 720 \/ 1280;\" width=\"720\" controls src=\"https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/shengli-\u80dc\u5229-2022-09-09-21.01.00-2.mp4\"><\/video><figcaption>printing the second layer<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/WechatIMG428-768x1024.jpeg\" alt=\"\" class=\"wp-image-393\" width=\"373\" height=\"497\" srcset=\"https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/WechatIMG428-768x1024.jpeg 768w, https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/WechatIMG428-225x300.jpeg 225w, https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/WechatIMG428-1152x1536.jpeg 1152w, https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/WechatIMG428-1536x2048.jpeg 1536w, https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/WechatIMG428-1568x2091.jpeg 1568w, https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/WechatIMG428-scaled.jpeg 1920w\" sizes=\"auto, (max-width: 373px) 100vw, 373px\" \/><figcaption>second layer drying<\/figcaption><\/figure>\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\"><img loading=\"lazy\" decoding=\"async\" width=\"627\" height=\"1024\" data-id=\"415\" src=\"https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/huxi1_final-627x1024.jpg\" alt=\"\" class=\"wp-image-415\" srcset=\"https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/huxi1_final-627x1024.jpg 627w, https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/huxi1_final-184x300.jpg 184w, https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/huxi1_final-768x1255.jpg 768w, https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/huxi1_final-940x1536.jpg 940w, https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/huxi1_final-1254x2048.jpg 1254w, https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/huxi1_final-1568x2561.jpg 1568w, https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/huxi1_final-scaled.jpg 1567w\" sizes=\"auto, (max-width: 627px) 100vw, 627px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"626\" height=\"1024\" data-id=\"416\" src=\"https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/huxi2_final-626x1024.jpg\" alt=\"\" class=\"wp-image-416\" srcset=\"https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/huxi2_final-626x1024.jpg 626w, https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/huxi2_final-183x300.jpg 183w, https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/huxi2_final-768x1257.jpg 768w, https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/huxi2_final-939x1536.jpg 939w, https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/huxi2_final-1252x2048.jpg 1252w, https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/huxi2_final-1568x2566.jpg 1568w, https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/huxi2_final-scaled.jpg 1565w\" sizes=\"auto, (max-width: 626px) 100vw, 626px\" \/><\/figure>\n<\/figure>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">contact sheets<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The final result was made using the in-class animation code in p5. <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"784\" style=\"aspect-ratio: 780 \/ 784;\" width=\"780\" controls src=\"https:\/\/www.courses.tegabrain.com\/printcode\/wp-content\/uploads\/2022\/09\/huxifinal_1-1.mp4\"><\/video><figcaption><em>\u547c\u6c23 \u5438\u6c23 (breathe out, tune in)<\/em> <\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Key Takeaways:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>I generated the WebGL text in the p5 web editor, which in retrospect was a mistake, as I was constrained to font families that were smaller than 5MB. If I could re-do this assignment, I would work in a text editor so I could use a font that was a bit bolder, as the thinness of this font makes the color bleeding rather noticeable. <\/li><li>I really like the result of the pink and black color combination. I was really worried that I would have major alignment issues. While there are some parts where there is a clear separation between the two layers, I am pleasantly surprised with how the text turned out.<\/li><li>Too much contrast? I increased the contrast in my initial animation before printing, and then only picked the yellow channel to output in the pink layer. This leads me to want to learn more about color balances\/curves in photoshop, as even though I like the outcome, I think there is room for improvement in how I set up the layers.<\/li><li>Due to the time constraints of this course, my final output is a screen recording of the p5 animation. In the future, I would really like to explore the other code-based animation methods in order to produce the highest quality video file. <\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u547c\u6c23 \u5438\u6c23 (breathe out, tune in) is an exploration of movement and experimental typography, and pays homage to the moody feeling I associate with California. The background video is my friend sticking her hand out of the car window on the way home from watching a sunset in Oakland. The text is generated with WebGL&hellip; <a class=\"more-link\" href=\"https:\/\/www.courses.tegabrain.com\/printcode\/assignment-1-shengli\/\">Continue reading <span class=\"screen-reader-text\">Assignment 1 &#8211; shengli<\/span><\/a><\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-357","post","type-post","status-publish","format-standard","hentry","category-assignment1","entry"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.courses.tegabrain.com\/printcode\/wp-json\/wp\/v2\/posts\/357","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.courses.tegabrain.com\/printcode\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.courses.tegabrain.com\/printcode\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.courses.tegabrain.com\/printcode\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/www.courses.tegabrain.com\/printcode\/wp-json\/wp\/v2\/comments?post=357"}],"version-history":[{"count":9,"href":"https:\/\/www.courses.tegabrain.com\/printcode\/wp-json\/wp\/v2\/posts\/357\/revisions"}],"predecessor-version":[{"id":419,"href":"https:\/\/www.courses.tegabrain.com\/printcode\/wp-json\/wp\/v2\/posts\/357\/revisions\/419"}],"wp:attachment":[{"href":"https:\/\/www.courses.tegabrain.com\/printcode\/wp-json\/wp\/v2\/media?parent=357"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.courses.tegabrain.com\/printcode\/wp-json\/wp\/v2\/categories?post=357"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.courses.tegabrain.com\/printcode\/wp-json\/wp\/v2\/tags?post=357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}