{"id":4810,"date":"2020-09-09T14:12:07","date_gmt":"2020-09-09T18:12:07","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/?p=4810"},"modified":"2020-09-09T14:19:32","modified_gmt":"2020-09-09T18:19:32","slug":"gregariosa-livingwallpaper","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/yoonjuhandrew-cmu-edu\/09\/09\/gregariosa-livingwallpaper\/","title":{"rendered":"gregariosa-LivingWallpaper"},"content":{"rendered":"

\"\"<\/p>\n

Graphic design meets Code<\/a><\/strong><\/h6>\n

I’ve always liked making clever graphic design pieces out of simple shapes. The living wallpaper project was a good opportunity to dive deeper into visual illusions by adding in motion to the mix. (I tried a variety of different ease functions in the process of my project \u2013 I chose the cubicBezierThrough2Points function for the rotating circles, to give the satisfying pause when the circles join in the middle. I also used the cubicIn function to make the endpoints of the lines rotate with ease along the circumference of the circle.)<\/p>\n

Overall, I’m happy with the visual illusion I was able to achieve with this project. I’m especially happy with the gestalt circle that form with every loop \u2013 revisiting trigonometry was painful but worth it in the end.<\/p>\n

While the motion and precision of this piece is good, I wish that I had developed a more sophisticated layout for this piece. I followed the circle packing tutorial from Coding Train to apply to this project, but I ended up abandoning it due to technical constraints. I hope to revisit the algorithm again in the future and understand the actual problem I was tackling, and hopefully make my projects more tasteful.<\/p>\n

Process<\/h4>\n

I was initially quite lost when starting this project. I sketched out different ideas but had little idea as to how to make each piece feel interesting.<\/p>\n

\"\"
Initial sketches – little direction<\/figcaption><\/figure>\n

To get myself out of the rut, I reviewed the example code carefully and learned more about looping animations to feel more equipped in starting the project. In doing so, I was able to develop a more concrete idea and methods of execution, like the sketches below:<\/p>\n

\"\"\"\"<\/p>\n

I went through a lot of iterations to test out different visual forms. Below are some interesting results that came out of the bag.<\/p>\n

\"\"<\/p>\n

\"\"<\/p>\n

\"\"<\/p>\n

\"\"\"\"<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Graphic design meets Code I’ve always liked making clever graphic design pieces out of simple shapes. The living wallpaper project was a good opportunity to dive deeper into visual illusions by adding in motion to the mix. (I tried a variety of different ease functions in the process of my project \u2013 I chose the … Continue reading “gregariosa-LivingWallpaper”<\/span><\/a><\/p>\n","protected":false},"author":47,"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\/4810"}],"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\/47"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/comments?post=4810"}],"version-history":[{"count":5,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/posts\/4810\/revisions"}],"predecessor-version":[{"id":4862,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/posts\/4810\/revisions\/4862"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/media?parent=4810"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/categories?post=4810"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/tags?post=4810"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}