{"id":4765,"date":"2020-09-09T11:04:09","date_gmt":"2020-09-09T15:04:09","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/?p=4765"},"modified":"2020-09-09T12:16:18","modified_gmt":"2020-09-09T16:16:18","slug":"sweetcorn-livingwallpaper","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/bkrummenandrew-cmu-edu\/09\/09\/sweetcorn-livingwallpaper\/","title":{"rendered":"sweetcorn-LivingWallpaper"},"content":{"rendered":"<h3 style=\"text-align: center\"><a href=\"https:\/\/editor.p5js.org\/sweetcorn\/full\/3GgrANTrI\">Zoom Background for Lovely Friendships<\/a><\/h3>\n<p><img loading=\"lazy\" class=\"size-full wp-image-4766 aligncenter\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/iLoveMyFriends.gif\" alt=\"\" width=\"1200\" height=\"675\" \/>I miss building lovely friendships with lovely people in classes as I did last year. Accordingly, I wanted to make a background that invited friendship over zoom classes. I&#8217;ve been watching a little bit of <em>Blue&#8217;s Clues<\/em> recently and really enjoy its graphics.<\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-4768 aligncenter\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-09-at-9.32.28-AM.png\" alt=\"\" width=\"635\" height=\"418\" \/><\/p>\n<p>I wanted to recreate the playful and goofy and welcoming aspects seen in children&#8217;s shows like this (excuse my poor documentation), using the <em>circular in out <\/em>easing function from <a href=\"https:\/\/idmnyu.github.io\/p5.js-func\/\">p5.func<\/a> as well as a simple linear function for the curly frame.<\/p>\n<p>I would have liked to include elements that were customizable by the user, perhaps a list of current friends that cycles on the screen or a phone number where they may be reached to build these friendships. I experimented with this a bit early on, but it was going poorly :~(. Here&#8217;s a screenshot from that stage, showing the name of my best friend and partner ;~).<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-4781 size-medium\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-09-at-10.55.16-AM-640x360.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-09-at-10.55.16-AM-640x360.png 640w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-09-at-10.55.16-AM-1024x576.png 1024w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-09-at-10.55.16-AM-768x432.png 768w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-09-at-10.55.16-AM.png 1146w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/p>\n<p>The curls were hard to get right using <em>curveTightness()<\/em> alone, as I had originally planned. You can see above one of the many experiments I had in making these curves before settling on manually creating a loop with <em>curveVertex()<\/em> and repeating it across the screen. The sideways motion I ended up with was easier to create with this method as well. Once I had that figured out, the main difficulty I had was not knowing how much space someone is going to take up in the frame and having to arrange visual elements accordingly. More technically, my heart shapes (lifted from previous projects) seem to be anchored at their left side and scale oddly because of that. Some of my technical notes are evident below ;~) (Excuse the unrelated notes + drawings)<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-4771 size-large\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Scan-1024x727.jpeg\" alt=\"\" width=\"840\" height=\"596\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Scan-1024x727.jpeg 1024w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Scan-640x454.jpeg 640w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Scan-768x545.jpeg 768w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Scan-1536x1091.jpeg 1536w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Scan-2048x1454.jpeg 2048w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Scan-1200x852.jpeg 1200w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/> <img loading=\"lazy\" class=\"aligncenter wp-image-4770 size-large\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Scan-1-1024x727.jpeg\" alt=\"\" width=\"840\" height=\"596\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Scan-1-1024x727.jpeg 1024w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Scan-1-640x454.jpeg 640w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Scan-1-768x545.jpeg 768w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Scan-1-1536x1091.jpeg 1536w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Scan-1-2048x1454.jpeg 2048w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Scan-1-1200x852.jpeg 1200w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/p>\n<p>If you would like to build lovely friendships by using this as your Zoom background, please be my guest :~) Zoom only accepts videos as backgrounds so you&#8217;ll have to download below.<\/p>\n<p><a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/LoveMyFriendsVid.mp4\">Download video here &lt;3<\/a><\/p>\n<p style=\"text-align: right\"><em>xoxoxo<\/em><\/p>\n<p style=\"text-align: right\"><em>~sweetcorn<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Zoom Background for Lovely Friendships I miss building lovely friendships with lovely people in classes as I did last year. Accordingly, I wanted to make a background that invited friendship over zoom classes. I&#8217;ve been watching a little bit of Blue&#8217;s Clues recently and really enjoy its graphics. I wanted to recreate the playful and &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/bkrummenandrew-cmu-edu\/09\/09\/sweetcorn-livingwallpaper\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;sweetcorn-LivingWallpaper&#8221;<\/span><\/a><\/p>\n","protected":false},"author":46,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[43],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/posts\/4765"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/users\/46"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/comments?post=4765"}],"version-history":[{"count":8,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/posts\/4765\/revisions"}],"predecessor-version":[{"id":4789,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/posts\/4765\/revisions\/4789"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/media?parent=4765"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/categories?post=4765"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/tags?post=4765"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}