{"id":822,"date":"2024-04-30T18:35:47","date_gmt":"2024-04-30T18:35:47","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/jo-more-portfolio\/?p=822"},"modified":"2024-04-30T21:42:31","modified_gmt":"2024-04-30T21:42:31","slug":"animated-web-design","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/jo-more-portfolio\/2024\/04\/30\/animated-web-design\/","title":{"rendered":"Animated Web Design"},"content":{"rendered":"\n

Shapeshifter: Artful Animation<\/a><\/em>,<\/em><\/a> by Jour Morton<\/a>. + + + + + + =\u00a0<\/p>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/figure>\n\n\n\n

Year: 2024 <\/p>\n\n\n\n

Software: p5.js<\/a><\/p>\n\n\n\n

In my Shapeshifter: Artful Animation<\/a> <\/em>project, I embarked on a creative journey, starting with a self-portrait<\/em> <\/a>using a basic ellipse shape\u2014and then a static self-portrait<\/em><\/a>.<\/em> However, I wanted to infuse interactivity into this piece, so I introduced a variable function to transform the self-portrait into a dynamic, moving self-portrait<\/em><\/a>.<\/p>\n\n\n\n

The initial animation featured a bouncing animation<\/em><\/a> that randomly bounced off the canvas edges, creating an engaging movement pattern. To enhance visual variety, I incorporated random background color changes. But there was a missing piece: user control. To address this, I introduced additional functions. By creating a new variable function tied to mouse movement, I allowed users to influence the animation.<\/p>\n\n\n\n

The end result? The animated character\u2019s pupils and eyes move horizontally from right to left, while the entire Shapeshifter <\/em>oscillates vertically. This fusion of technical skill and artistic expression breathes life into the self-portrait, making it a captivating addition to my portfolio.<\/p>\n\n\n\n

The animation undergoes the following changes listed below as the mouse is moved in different directions (left to right)<\/p>\n\n\n\n

1. When the mouse is stable, the image remains fixed. <\/p>\n\n\n\n

2. The eyes and wheels become larger When the mouse is moved straight down the middle to the bottom. <\/p>\n\n\n\n

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

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

5. When the mouse is moved to the bottom right, the eyes and wheels become larger again.<\/p>\n\n\n\n

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

Shapeshifter: Artful Animation, by Jour Morton. + + + + + + =\u00a0 Year: 2024  Software: p5.js In my Shapeshifter: Artful Animation project, I embarked on a creative journey, starting with a self-portrait using a basic ellipse shape\u2014and then a static self-portrait. However, I wanted to infuse interactivity into this piece, so I introduced a […]<\/p>\n","protected":false},"author":4525,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"portfolio_post_id":0,"portfolio_citation":"This entry<\/a> was originally posted in \"MMP 210: Multimedia Programming I\" on March 3, 2024","portfolio_annotation":"The \u201cInteractive Design Project\u201d is a creative exploration into the realm of animation and interactivity within web design. As an aspiring web designer, I\u2019ve utilized global scope variables and bouncing elements to animate a self-portrait that transitions from static to dynamic, showcasing my technical skills and artistic flair.","openlab_post_visibility":"","_vp_format_video_url":"","_vp_image_focal_point":[],"footnotes":""},"categories":[1],"tags":[],"class_list":["post-822","post","type-post","status-publish","format-standard","hentry","category-category-name"],"_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/jo-more-portfolio\/wp-json\/wp\/v2\/posts\/822","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/jo-more-portfolio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/jo-more-portfolio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/jo-more-portfolio\/wp-json\/wp\/v2\/users\/4525"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/jo-more-portfolio\/wp-json\/wp\/v2\/comments?post=822"}],"version-history":[{"count":10,"href":"https:\/\/openlab.bmcc.cuny.edu\/jo-more-portfolio\/wp-json\/wp\/v2\/posts\/822\/revisions"}],"predecessor-version":[{"id":835,"href":"https:\/\/openlab.bmcc.cuny.edu\/jo-more-portfolio\/wp-json\/wp\/v2\/posts\/822\/revisions\/835"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/jo-more-portfolio\/wp-json\/wp\/v2\/media?parent=822"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/jo-more-portfolio\/wp-json\/wp\/v2\/categories?post=822"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/jo-more-portfolio\/wp-json\/wp\/v2\/tags?post=822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}