{"id":4876,"date":"2026-08-19T14:04:10","date_gmt":"2026-08-19T14:04:10","guid":{"rendered":"https:\/\/sarahbrown.me\/?post_type=portfolio&#038;p=4876"},"modified":"2026-08-20T19:51:46","modified_gmt":"2026-08-20T19:51:46","slug":"interactive-prototypes-and-animation","status":"publish","type":"portfolio","link":"https:\/\/sarahbrown.me\/?portfolio=interactive-prototypes-and-animation","title":{"rendered":"Interactive Prototypes and Animation"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"4876\" class=\"elementor elementor-4876\">\n\t\t\t\t<div class=\"elementor-element elementor-element-205d900 e-con e-atomic-element e-flexbox-base e-c4fdc5e \" data-id=\"205d900\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"205d900\">\n    \t\t<div class=\"elementor-element elementor-element-ccc4bde elementor-widget elementor-widget-text-editor\" data-id=\"ccc4bde\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<header class=\"page-header content js-editable-target editable\" data-context=\"pages\" data-identity=\"id:p5a44323561a27d09594466edda45f40760b999bca053d4801c3fb\" data-menu=\"Page Header\"><p class=\"description\">Small, explorative animation and interactive prototypes of mine including both 2D and 3D works.<\/p><p class=\"description\">Shown Above: <em><strong>Fishbowl Animation<\/strong><\/em>\u00a0&#8211; A simple exercise familiarizing myself in Autodesk Maya. I was\u00a0responsible for the modeling, texturing, rigging, and animation of this piece. The environment beyond\u00a0the fishbowl and table\u00a0is a free\u00a0HDR image that I did not create myself.\u00a0<em>Autodesk Maya, Adobe Photoshop. Spring 2015.<\/em><\/p><\/header><div><em><strong>RGB Figures<\/strong><\/em>\u00a0&#8211;\u00a0A series of turntables of a simple 3D figure in a variety of poses. By rendering out a red, green, and blue version of each frame, they were\u00a0composited in such a way that offsets each of the additive color system channels\u00a0for a colorful effect. I was responsible for the modeling, texturing, rigging, animation, and compositing.\u00a0<\/div><div><em>Autodesk Maya, Adobe Photoshop, Nuke. Fall 2016.<\/em><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-649af2c elementor-widget elementor-widget-ucaddon_uc_compact_image_theme\" data-id=\"649af2c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"ucaddon_uc_compact_image_theme.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n<!-- start Compact Gallery -->\n\t\t<link id='font-awesome-css' href='https:\/\/sarahbrown.me\/wp-content\/plugins\/unlimited-elements-for-elementor\/assets_libraries\/font-awesome6\/fontawesome-all.min.css' type='text\/css' rel='stylesheet' >\n\t\t<link id='font-awesome-4-shim-css' href='https:\/\/sarahbrown.me\/wp-content\/plugins\/unlimited-elements-for-elementor\/assets_libraries\/font-awesome6\/fontawesome-v4-shims.min.css' type='text\/css' rel='stylesheet' >\n\t\t<link id='unitegallery-css' href='https:\/\/sarahbrown.me\/wp-content\/plugins\/unlimited-elements-for-elementor\/assets_libraries\/unitegallery\/css\/unite-gallery.css' type='text\/css' rel='stylesheet' >\n\t\t<link id='fancybox-css' href='https:\/\/sarahbrown.me\/wp-content\/plugins\/unlimited-elements-for-elementor\/assets_libraries\/fancybox3\/jquery.fancybox.min.css' type='text\/css' rel='stylesheet' >\n\n<style>\/* widget: Compact Gallery *\/\n\n#uc_uc_compact_image_theme_elementor_649af2c-wrapper{\n  min-height: 1px;\n}\n\n#uc_uc_compact_image_theme_elementor_649af2c{\n  margin:0 auto;\n  display: none;\n}\n\/* fancybox *\/\n\/* endfancybox *\/\n\n<\/style>\n\n<div id=\"uc_uc_compact_image_theme_elementor_649af2c-wrapper\">\n  <div id=\"uc_uc_compact_image_theme_elementor_649af2c\" class=\"uc-items-wrapper  \"  data-remote-type=\"gallery\" data-custom-sethtml=\"true\" >\n    \n<img decoding=\"async\" alt=\"22385719-0bbd-4e4e-b031-8d45847b6fd9_rw_1200\"\n   src=\"https:\/\/sarahbrown.me\/wp-content\/uploads\/2026\/08\/22385719-0bbd-4e4e-b031-8d45847b6fd9_rw_1200-768x432.gif\"\n    data-image=\"https:\/\/sarahbrown.me\/wp-content\/uploads\/2026\/08\/22385719-0bbd-4e4e-b031-8d45847b6fd9_rw_1200.gif\"\n    data-title=\"22385719-0bbd-4e4e-b031-8d45847b6fd9_rw_1200\">\n\n<img decoding=\"async\" alt=\"c0387448-42f4-42cf-900a-8aac01ba845a_rw_1200\"\n   src=\"https:\/\/sarahbrown.me\/wp-content\/uploads\/2026\/08\/c0387448-42f4-42cf-900a-8aac01ba845a_rw_1200-768x432.gif\"\n    data-image=\"https:\/\/sarahbrown.me\/wp-content\/uploads\/2026\/08\/c0387448-42f4-42cf-900a-8aac01ba845a_rw_1200.gif\"\n    data-title=\"c0387448-42f4-42cf-900a-8aac01ba845a_rw_1200\">\n\n<img decoding=\"async\" alt=\"a2847895-d484-4332-bd66-4cfac85e309d_rw_1200\"\n   src=\"https:\/\/sarahbrown.me\/wp-content\/uploads\/2026\/08\/a2847895-d484-4332-bd66-4cfac85e309d_rw_1200-768x432.gif\"\n    data-image=\"https:\/\/sarahbrown.me\/wp-content\/uploads\/2026\/08\/a2847895-d484-4332-bd66-4cfac85e309d_rw_1200.gif\"\n    data-title=\"a2847895-d484-4332-bd66-4cfac85e309d_rw_1200\">\n\n<img decoding=\"async\" alt=\"c79341dd-87c8-47ea-b43b-12c223d09749_rw_1200\"\n   src=\"https:\/\/sarahbrown.me\/wp-content\/uploads\/2026\/08\/c79341dd-87c8-47ea-b43b-12c223d09749_rw_1200-768x432.gif\"\n    data-image=\"https:\/\/sarahbrown.me\/wp-content\/uploads\/2026\/08\/c79341dd-87c8-47ea-b43b-12c223d09749_rw_1200.gif\"\n    data-title=\"c79341dd-87c8-47ea-b43b-12c223d09749_rw_1200\">\n\n  <\/div>\n<\/div>\n<!-- end Compact Gallery -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-2db34c9 e-flex e-con-boxed e-con e-parent\" data-id=\"2db34c9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aebaa81 elementor-position-left elementor-vertical-align-top elementor-widget elementor-widget-image-box\" data-id=\"aebaa81\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image-box.default\">\n\t\t\t\t\t<div class=\"elementor-image-box-wrapper\"><figure class=\"elementor-image-box-img\"><img fetchpriority=\"high\" decoding=\"async\" width=\"485\" height=\"560\" src=\"https:\/\/sarahbrown.me\/wp-content\/uploads\/2026\/08\/277dbdb7-c7c4-4b62-a549-8065a0e7b1a9_rw_600.png\" class=\"attachment-full size-full wp-image-4882\" alt=\"\" srcset=\"https:\/\/sarahbrown.me\/wp-content\/uploads\/2026\/08\/277dbdb7-c7c4-4b62-a549-8065a0e7b1a9_rw_600.png 485w, https:\/\/sarahbrown.me\/wp-content\/uploads\/2026\/08\/277dbdb7-c7c4-4b62-a549-8065a0e7b1a9_rw_600-260x300.png 260w, https:\/\/sarahbrown.me\/wp-content\/uploads\/2026\/08\/277dbdb7-c7c4-4b62-a549-8065a0e7b1a9_rw_600-184x212.png 184w\" sizes=\"(max-width: 485px) 100vw, 485px\" \/><\/figure><div class=\"elementor-image-box-content\"><h3 class=\"elementor-image-box-title\">For What We Are<\/h3><p class=\"elementor-image-box-description\"><p data-start=\"336\" data-end=\"791\"><b><em data-start=\"336\" data-end=\"353\">For What We Are<\/em> <\/b>was my undergraduate thesis project exploring how interactive storytelling can use perspective to shape an audience\u2019s understanding of characters and their relationships. Inspired by the animated short <em data-start=\"556\" data-end=\"570\">Blind Vaysha<\/em>\u2014in which a young girl sees the past through one eye and the future through the other\u2014the project asks what happens when a divided perception becomes an interactive mechanic rather than something audiences simply observe.<\/p><p data-start=\"793\" data-end=\"1219\">The audience takes on the role of a young teenager who sees <strong data-start=\"853\" data-end=\"942\">the world as it appears through one eye and the truth behind people through the other<\/strong>. By switching between these perspectives, players uncover differences between how characters present themselves and who they are beneath the surface. The narrative uses this mechanic to explore themes of <strong data-start=\"1147\" data-end=\"1218\">trust, authenticity, and the tension between appearance and reality<\/strong>.<\/p><span style=\"letter-spacing: 0em\">The original prototype was a fully interactive web-based story scene and is no longer active. The interactive example below demonstrates the prototype\u2019s central mechanic, allowing viewers to switch between the protagonist\u2019s two perspectives. The two women depicted in the scene appear differently through each eye, visually representing the ways they conceal parts of themselves from a society they do not trust. <\/span><em style=\"letter-spacing: 0em\">Adobe Illustrator &amp; Photoshop, Autodesk Maya, threejs&nbsp;WebGL library.&nbsp;Summer 2017.<\/em><\/p><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cdc41c8 elementor-widget elementor-widget-elementskit-image-comparison\" data-id=\"cdc41c8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"elementskit-image-comparison.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" >\n\t\t<div class=\"elementskit-image-comparison image-comparison-container\" data-offset=\"0.5\" data-overlay=\"\" data-label_after=\"After\" data-label_before=\"Before\" data-move_slider_on_hover=\"\" data-click_to_move=\"\" data-a11y_label=\"Image comparison slider\">\n\t\t\t<img decoding=\"async\" src=\"https:\/\/sarahbrown.me\/wp-content\/uploads\/2026\/08\/left.jpg\" title=\"left\" alt=\"left\" loading=\"lazy\" \/><img decoding=\"async\" src=\"https:\/\/sarahbrown.me\/wp-content\/uploads\/2026\/08\/right.jpg\" title=\"right\" alt=\"right\" loading=\"lazy\" \/>\t\t<\/div>\n\n\t<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f9be191 elementor-position-top elementor-widget elementor-widget-image-box\" data-id=\"f9be191\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image-box.default\">\n\t\t\t\t\t<div class=\"elementor-image-box-wrapper\"><figure class=\"elementor-image-box-img\"><img decoding=\"async\" width=\"1138\" height=\"634\" src=\"https:\/\/sarahbrown.me\/wp-content\/uploads\/2026\/08\/46320aa3-8804-45f0-98e5-9a1f24a72b91_rw_1200.png\" class=\"attachment-full size-full wp-image-4879\" alt=\"\" srcset=\"https:\/\/sarahbrown.me\/wp-content\/uploads\/2026\/08\/46320aa3-8804-45f0-98e5-9a1f24a72b91_rw_1200.png 1138w, https:\/\/sarahbrown.me\/wp-content\/uploads\/2026\/08\/46320aa3-8804-45f0-98e5-9a1f24a72b91_rw_1200-300x167.png 300w, https:\/\/sarahbrown.me\/wp-content\/uploads\/2026\/08\/46320aa3-8804-45f0-98e5-9a1f24a72b91_rw_1200-1024x570.png 1024w, https:\/\/sarahbrown.me\/wp-content\/uploads\/2026\/08\/46320aa3-8804-45f0-98e5-9a1f24a72b91_rw_1200-768x428.png 768w, https:\/\/sarahbrown.me\/wp-content\/uploads\/2026\/08\/46320aa3-8804-45f0-98e5-9a1f24a72b91_rw_1200-184x103.png 184w\" sizes=\"(max-width: 1138px) 100vw, 1138px\" \/><\/figure><div class=\"elementor-image-box-content\"><h3 class=\"elementor-image-box-title\">Realities Within<\/h3><p class=\"elementor-image-box-description\"><p data-start=\"213\" data-end=\"591\"><em data-start=\"213\" data-end=\"231\">Realities Within<\/em> is an interactive 3D comic that follows a young girl who finds the courage to speak out against a dystopian society, inspiring others to do the same. The project explores how <strong data-start=\"407\" data-end=\"496\">3D environments and interactive presentation can extend the visual language of comics<\/strong>, allowing audiences to experience a sequential narrative through spatially constructed scenes.<\/p><p data-start=\"593\" data-end=\"865\">The project uses a low-poly visual style that complements its science-fiction setting while keeping the 3D experience lightweight and efficient. Characters and scenes were modeled and staged in Autodesk Maya and presented interactively using the Sketchfab 3D Model Viewer. <strong data-start=\"867\" data-end=\"897\" style=\"letter-spacing: 0em\">My contributions included:<\/strong><\/p><ul data-start=\"898\" data-end=\"1079\"><li data-section-id=\"omt5ll\" data-start=\"898\" data-end=\"926\">Original concept and story<\/li><li data-section-id=\"16r91gx\" data-start=\"927\" data-end=\"965\">Human character modeling and rigging<\/li><li data-section-id=\"1ttsiu5\" data-start=\"966\" data-end=\"1021\">Character posing for approximately half of the scenes<\/li><li data-section-id=\"ryizs9\" data-start=\"1022\" data-end=\"1079\">Posing and lighting for the selected scenes shown below<\/li><\/ul><p data-start=\"1081\" data-end=\"1183\">The environmental assets, robot model, and textures were created by other members of the project team. <span style=\"letter-spacing: 0em\">The images below highlight several scenes for which I was responsible for character posing and lighting, in addition to my broader role developing the story and creating and rigging the human character models. <\/span><br><em data-start=\"1396\" data-end=\"1452\" style=\"letter-spacing: 0em\">Sketchfab 3D Model Viewer, Autodesk Maya. Spring 2017.<\/em><\/p><\/p><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-abb3960 elementor-widget elementor-widget-ucaddon_uc_compact_image_theme\" data-id=\"abb3960\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"ucaddon_uc_compact_image_theme.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n<!-- start Compact Gallery -->\n\n<style>\/* widget: Compact Gallery *\/\n\n#uc_uc_compact_image_theme_elementor_abb3960-wrapper{\n  min-height: 1px;\n}\n\n#uc_uc_compact_image_theme_elementor_abb3960{\n  margin:0 auto;\n  display: none;\n}\n\/* fancybox *\/\n\/* endfancybox *\/\n\n<\/style>\n\n<div id=\"uc_uc_compact_image_theme_elementor_abb3960-wrapper\">\n  <div id=\"uc_uc_compact_image_theme_elementor_abb3960\" class=\"uc-items-wrapper  \"  data-remote-type=\"gallery\" data-custom-sethtml=\"true\" >\n    \n<img decoding=\"async\" alt=\"52c39b5d-185c-4089-90ce-a1aabfc73186_rw_1200\"\n   src=\"https:\/\/sarahbrown.me\/wp-content\/uploads\/2026\/08\/52c39b5d-185c-4089-90ce-a1aabfc73186_rw_1200-768x427.png\"\n    data-image=\"https:\/\/sarahbrown.me\/wp-content\/uploads\/2026\/08\/52c39b5d-185c-4089-90ce-a1aabfc73186_rw_1200-1024x569.png\"\n    data-title=\"52c39b5d-185c-4089-90ce-a1aabfc73186_rw_1200\">\n\n<img decoding=\"async\" alt=\"30be6ee9-bc37-4f89-b9b6-e06080f5c475_rw_1200\"\n   src=\"https:\/\/sarahbrown.me\/wp-content\/uploads\/2026\/08\/30be6ee9-bc37-4f89-b9b6-e06080f5c475_rw_1200-768x428.png\"\n    data-image=\"https:\/\/sarahbrown.me\/wp-content\/uploads\/2026\/08\/30be6ee9-bc37-4f89-b9b6-e06080f5c475_rw_1200-1024x570.png\"\n    data-title=\"30be6ee9-bc37-4f89-b9b6-e06080f5c475_rw_1200\">\n\n<img decoding=\"async\" alt=\"46320aa3-8804-45f0-98e5-9a1f24a72b91_rw_1200\"\n   src=\"https:\/\/sarahbrown.me\/wp-content\/uploads\/2026\/08\/46320aa3-8804-45f0-98e5-9a1f24a72b91_rw_1200-768x428.png\"\n    data-image=\"https:\/\/sarahbrown.me\/wp-content\/uploads\/2026\/08\/46320aa3-8804-45f0-98e5-9a1f24a72b91_rw_1200-1024x570.png\"\n    data-title=\"46320aa3-8804-45f0-98e5-9a1f24a72b91_rw_1200\">\n\n<img decoding=\"async\" alt=\"8444cbd2-46d6-44ea-8ff3-ec4b777e77e9_rw_1200\"\n   src=\"https:\/\/sarahbrown.me\/wp-content\/uploads\/2026\/08\/8444cbd2-46d6-44ea-8ff3-ec4b777e77e9_rw_1200-768x429.png\"\n    data-image=\"https:\/\/sarahbrown.me\/wp-content\/uploads\/2026\/08\/8444cbd2-46d6-44ea-8ff3-ec4b777e77e9_rw_1200-1024x571.png\"\n    data-title=\"8444cbd2-46d6-44ea-8ff3-ec4b777e77e9_rw_1200\">\n\n  <\/div>\n<\/div>\n<!-- end Compact Gallery -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"featured_media":4845,"menu_order":0,"template":"","portfolio_categories":[56],"portfolio_tags":[],"class_list":["post-4876","portfolio","type-portfolio","status-publish","has-post-thumbnail","hentry","portfolio_categories-artworks"],"acf":[],"_links":{"self":[{"href":"https:\/\/sarahbrown.me\/index.php?rest_route=\/wp\/v2\/portfolio\/4876","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sarahbrown.me\/index.php?rest_route=\/wp\/v2\/portfolio"}],"about":[{"href":"https:\/\/sarahbrown.me\/index.php?rest_route=\/wp\/v2\/types\/portfolio"}],"version-history":[{"count":5,"href":"https:\/\/sarahbrown.me\/index.php?rest_route=\/wp\/v2\/portfolio\/4876\/revisions"}],"predecessor-version":[{"id":5041,"href":"https:\/\/sarahbrown.me\/index.php?rest_route=\/wp\/v2\/portfolio\/4876\/revisions\/5041"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sarahbrown.me\/index.php?rest_route=\/wp\/v2\/media\/4845"}],"wp:attachment":[{"href":"https:\/\/sarahbrown.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4876"}],"wp:term":[{"taxonomy":"portfolio_categories","embeddable":true,"href":"https:\/\/sarahbrown.me\/index.php?rest_route=%2Fwp%2Fv2%2Fportfolio_categories&post=4876"},{"taxonomy":"portfolio_tags","embeddable":true,"href":"https:\/\/sarahbrown.me\/index.php?rest_route=%2Fwp%2Fv2%2Fportfolio_tags&post=4876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}