{"id":4703,"date":"2024-03-03T17:57:39","date_gmt":"2024-03-03T22:57:39","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/?p=4703"},"modified":"2024-04-30T17:25:15","modified_gmt":"2024-04-30T21:25:15","slug":"interactive-design-5","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/2024\/03\/03\/interactive-design-5\/","title":{"rendered":"Interactive Design: &#8220;ShapeShifter&#8221;"},"content":{"rendered":"\n<p>By Jour Morton<\/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\"><img loading=\"lazy\" decoding=\"async\" width=\"948\" height=\"952\" data-id=\"4704\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-content\/uploads\/sites\/3601\/2024\/03\/1animation-at-rest.png\" alt=\"\" class=\"wp-image-4704\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-content\/uploads\/sites\/3601\/2024\/03\/1animation-at-rest.png 948w, https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-content\/uploads\/sites\/3601\/2024\/03\/1animation-at-rest-300x300.png 300w, https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-content\/uploads\/sites\/3601\/2024\/03\/1animation-at-rest-150x150.png 150w, https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-content\/uploads\/sites\/3601\/2024\/03\/1animation-at-rest-768x771.png 768w\" sizes=\"auto, (max-width: 948px) 100vw, 948px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"942\" height=\"934\" data-id=\"4705\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-content\/uploads\/sites\/3601\/2024\/03\/2animation-mouse-scrolled-to-bottom-of-page2024-03-03-at-5.20.02\u202fPM.png\" alt=\"\" class=\"wp-image-4705\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-content\/uploads\/sites\/3601\/2024\/03\/2animation-mouse-scrolled-to-bottom-of-page2024-03-03-at-5.20.02\u202fPM.png 942w, https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-content\/uploads\/sites\/3601\/2024\/03\/2animation-mouse-scrolled-to-bottom-of-page2024-03-03-at-5.20.02\u202fPM-300x297.png 300w, https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-content\/uploads\/sites\/3601\/2024\/03\/2animation-mouse-scrolled-to-bottom-of-page2024-03-03-at-5.20.02\u202fPM-150x150.png 150w, https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-content\/uploads\/sites\/3601\/2024\/03\/2animation-mouse-scrolled-to-bottom-of-page2024-03-03-at-5.20.02\u202fPM-768x761.png 768w\" sizes=\"auto, (max-width: 942px) 100vw, 942px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"948\" height=\"950\" data-id=\"4706\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-content\/uploads\/sites\/3601\/2024\/03\/3animation-mouse-scrolled-to-left-bottom-of-page.png\" alt=\"\" class=\"wp-image-4706\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-content\/uploads\/sites\/3601\/2024\/03\/3animation-mouse-scrolled-to-left-bottom-of-page.png 948w, https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-content\/uploads\/sites\/3601\/2024\/03\/3animation-mouse-scrolled-to-left-bottom-of-page-300x300.png 300w, https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-content\/uploads\/sites\/3601\/2024\/03\/3animation-mouse-scrolled-to-left-bottom-of-page-150x150.png 150w, https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-content\/uploads\/sites\/3601\/2024\/03\/3animation-mouse-scrolled-to-left-bottom-of-page-768x770.png 768w\" sizes=\"auto, (max-width: 948px) 100vw, 948px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"964\" height=\"920\" data-id=\"4707\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-content\/uploads\/sites\/3601\/2024\/03\/4animation-colorchangedtoorange-scrolltoright.png\" alt=\"\" class=\"wp-image-4707\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-content\/uploads\/sites\/3601\/2024\/03\/4animation-colorchangedtoorange-scrolltoright.png 964w, https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-content\/uploads\/sites\/3601\/2024\/03\/4animation-colorchangedtoorange-scrolltoright-300x286.png 300w, https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-content\/uploads\/sites\/3601\/2024\/03\/4animation-colorchangedtoorange-scrolltoright-768x733.png 768w\" sizes=\"auto, (max-width: 964px) 100vw, 964px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"924\" height=\"946\" data-id=\"4708\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-content\/uploads\/sites\/3601\/2024\/03\/5animationwheelsarebigger.png\" alt=\"\" class=\"wp-image-4708\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-content\/uploads\/sites\/3601\/2024\/03\/5animationwheelsarebigger.png 924w, https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-content\/uploads\/sites\/3601\/2024\/03\/5animationwheelsarebigger-293x300.png 293w, https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-content\/uploads\/sites\/3601\/2024\/03\/5animationwheelsarebigger-768x786.png 768w\" sizes=\"auto, (max-width: 924px) 100vw, 924px\" \/><\/figure>\n<\/figure>\n\n\n\n<p>The animation I&#8217;ve designed includes a functionality that enables it to alter its color and expression in response to a finger sweep on a mousepad.<\/p>\n\n\n\n<p>The animation undergoes the following changes as the mouse is moved in different directions (left to right)<\/p>\n\n\n\n<p>1. When the mouse is stable, the image remains fixed. <\/p>\n\n\n\n<p>2. The eyes and wheels become larger When the mouse is moved straight down the middle to the bottom. <\/p>\n\n\n\n<p>3. When the mouse is moved to the bottom left, the color changes from olive to green, and the eyes and lips move left. <\/p>\n\n\n\n<p>4. When the mouse is moved to the right, the eyes and wheels become smaller, and the color changes to orange. <\/p>\n\n\n\n<p>5. When the mouse is moved to the bottom-right, the eyes and wheels become larger again.<\/p>\n\n\n\n<p><a href=\"https:\/\/editor.p5js.org\/ruoj\/sketches\/dqhEs0geT\">Select link to view code<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>By Jour Morton The animation I&#8217;ve designed includes a functionality that enables it to alter its color and expression in response to a finger sweep on a mousepad. The animation undergoes the following changes as the mouse is moved in different directions (left to right) 1. When the mouse is stable, the image remains fixed.&hellip; <a class=\"more-link\" href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/2024\/03\/03\/interactive-design-5\/\">Continue reading <span class=\"screen-reader-text\">Interactive Design: &#8220;ShapeShifter&#8221;<\/span><\/a><\/p>\n","protected":false},"author":4525,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"gallery","meta":{"portfolio_post_id":822,"portfolio_citation":"","portfolio_annotation":"","openlab_post_visibility":"","footnotes":""},"categories":[116],"tags":[],"coauthors":[170],"class_list":["post-4703","post","type-post","status-publish","format-gallery","hentry","category-assignment-4","post_format-post-format-gallery","entry"],"_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-json\/wp\/v2\/posts\/4703","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-json\/wp\/v2\/users\/4525"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-json\/wp\/v2\/comments?post=4703"}],"version-history":[{"count":8,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-json\/wp\/v2\/posts\/4703\/revisions"}],"predecessor-version":[{"id":5553,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-json\/wp\/v2\/posts\/4703\/revisions\/5553"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-json\/wp\/v2\/media?parent=4703"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-json\/wp\/v2\/categories?post=4703"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-json\/wp\/v2\/tags?post=4703"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-210-spring-2024\/wp-json\/wp\/v2\/coauthors?post=4703"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}