{"id":481,"date":"2024-05-16T17:16:00","date_gmt":"2024-05-16T17:16:00","guid":{"rendered":"https:\/\/projects.etc.cmu.edu\/flow\/?p=481"},"modified":"2024-05-27T21:12:37","modified_gmt":"2024-05-27T21:12:37","slug":"all-about-flow","status":"publish","type":"post","link":"https:\/\/projects.etc.cmu.edu\/flow\/all-about-flow\/","title":{"rendered":"All About Flow~"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"339\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Concept.png\" alt=\"\" class=\"wp-image-489\" style=\"width:1040px\" srcset=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Concept.png 1600w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Concept-300x64.png 300w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Concept-1024x217.png 1024w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Concept-768x163.png 768w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Concept-1536x325.png 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-2 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"4354\" height=\"1928\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/CreditPage-01-1.png\" alt=\"\" class=\"wp-image-484\" srcset=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/CreditPage-01-1.png 4354w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/CreditPage-01-1-300x133.png 300w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/CreditPage-01-1-1024x453.png 1024w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/CreditPage-01-1-768x340.png 768w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/CreditPage-01-1-1536x680.png 1536w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/CreditPage-01-1-2048x907.png 2048w\" sizes=\"(max-width: 4354px) 100vw, 4354px\" \/><\/figure><\/div>\n\n\n<p>In spring 2024 at CMU ETC, Team <em>Flow<\/em> was able to create an interactive immersive experience that takes the guests on a spiritual journey through a Chinese folklore-inspired world with dance, music, light and color. In the experience, the guests will witness the adventure and friendship of a deer and a dancer, and help them out during important moments. Team <em>Flow<\/em> made it happen in one of the signature interactive rooms at ETC, Cavern, which contains a 270-degree curved screen for projection and multiple devices for body movement tracking. We also incorporated motion capture technology for the animated contents. Over the semester, we held more than 70 demo &amp; playtest sessions for more than 100 guests. We kept iterating and improving based on their feedback to reach what we see in the final production.<\/p>\n\n\n\n<p>Please enjoy our <strong>demo<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Flow~Finaldemo\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/JBLsVFlXVAw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-3 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<p class=\"has-medium-font-size\">Let\u2019s take a deep dive into our production process~<\/p>\n\n\n\n<p class=\"has-large-font-size\"><strong>Design<\/strong><\/p>\n\n\n\n<p>The story is about a deer and a dancer meeting and growing up together. One day the dancer fell off the cliff while picking the herb. The deer eventually revive the dancer by overcoming multiple obstacles.<\/p>\n\n\n\n<p>For a better storytelling and interactive experience, we designed with an interest curve in mind. We kept refining our storyline and interaction design with continuous playtest, and the final version of the story came into shape after multiple iterations.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2720\" height=\"708\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Curve.png\" alt=\"\" class=\"wp-image-485\" srcset=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Curve.png 2720w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Curve-300x78.png 300w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Curve-1024x267.png 1024w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Curve-768x200.png 768w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Curve-1536x400.png 1536w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Curve-2048x533.png 2048w\" sizes=\"(max-width: 2720px) 100vw, 2720px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-4 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<p>For every interactable level, we divided the screen into 3 sections. We aimed to match the level layouts with the three interactions we designed and to optimize usage of the entire screen in cavern.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"384\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/2DSc3.png\" alt=\"\" class=\"wp-image-486\" style=\"width:1040px\" srcset=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/2DSc3.png 2048w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/2DSc3-300x56.png 300w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/2DSc3-1024x192.png 1024w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/2DSc3-768x144.png 768w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/2DSc3-1536x288.png 1536w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" \/><\/figure><\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"384\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/2DSc5.png\" alt=\"\" class=\"wp-image-487\" style=\"width:1040px;height:auto\" srcset=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/2DSc5.png 2048w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/2DSc5-300x56.png 300w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/2DSc5-1024x192.png 1024w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/2DSc5-768x144.png 768w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/2DSc5-1536x288.png 1536w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" \/><\/figure><\/div>\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-5 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<p>After numerous sessions of playtest, we received feedback that our interactions were not intuitive enough. So we decided to add a live host with a pre-show for the experience, leading the guests into the cave art and introducing them to the three types of interactions we designed for them to enjoy. By doing so, we ensure that the guests will have a better knowledge of the interactions and a more concrete context of the story before diving in.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"856\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Pre-show.png\" alt=\"\" class=\"wp-image-488\" srcset=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Pre-show.png 1600w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Pre-show-300x161.png 300w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Pre-show-1024x548.png 1024w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Pre-show-768x411.png 768w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Pre-show-1536x822.png 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-6 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<p class=\"has-large-font-size\"><strong>Art<\/strong><\/p>\n\n\n\n<p>To better convey Chinese folklore, we decided on an art style inspired by Chinese ink painting. We created our original concept art and color palette after researching and studying many famous Chinese landscape paintings.&nbsp;<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"339\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Concept.png\" alt=\"\" class=\"wp-image-489\" style=\"width:1040px\" srcset=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Concept.png 1600w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Concept-300x64.png 300w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Concept-1024x217.png 1024w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Concept-768x163.png 768w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Concept-1536x325.png 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><figcaption class=\"wp-element-caption\"><em>Flow<\/em> Concept Art<\/figcaption><\/figure><\/div>\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<p>From the concept art we were able to create some universal shaders and art assets that could be used across the entire project and reflect the art style.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-8 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"alignright size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"535\" height=\"306\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/1Deer.gif\" alt=\"\" class=\"wp-image-491\" style=\"width:397px;height:auto\"\/><\/figure><\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"alignleft size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"2120\" height=\"1094\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/InkShader.png\" alt=\"\" class=\"wp-image-492\" style=\"width:440px;height:auto\" srcset=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/InkShader.png 2120w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/InkShader-300x155.png 300w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/InkShader-1024x528.png 1024w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/InkShader-768x396.png 768w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/InkShader-1536x793.png 1536w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/InkShader-2048x1057.png 2048w\" sizes=\"(max-width: 2120px) 100vw, 2120px\" \/><\/figure><\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-9 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"957\" height=\"1031\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Character.png\" alt=\"\" class=\"wp-image-493\" style=\"object-fit:cover\" srcset=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Character.png 957w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Character-278x300.png 278w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Character-951x1024.png 951w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Character-768x827.png 768w\" sizes=\"(max-width: 957px) 100vw, 957px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Tree.png\" alt=\"\" class=\"wp-image-494\" style=\"object-fit:cover\" srcset=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Tree.png 1920w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Tree-300x169.png 300w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Tree-1024x576.png 1024w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Tree-768x432.png 768w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Tree-1536x864.png 1536w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Cloud_Leaves.png\" alt=\"\" class=\"wp-image-495\" style=\"object-fit:cover\" srcset=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Cloud_Leaves.png 1920w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Cloud_Leaves-300x169.png 300w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Cloud_Leaves-1024x576.png 1024w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Cloud_Leaves-768x432.png 768w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Cloud_Leaves-1536x864.png 1536w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-10 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<p>In total, we built 7 scenes, including 3 interactable ones.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-11 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"340\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/CaveArt.png\" alt=\"\" class=\"wp-image-496\" style=\"width:1040px\" srcset=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/CaveArt.png 1600w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/CaveArt-300x64.png 300w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/CaveArt-1024x218.png 1024w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/CaveArt-768x163.png 768w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/CaveArt-1536x326.png 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><figcaption class=\"wp-element-caption\">Scene 1 &#8211; Tutorial Pre-show (Cave Art)<\/figcaption><\/figure><\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"1045\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Sc2.png\" alt=\"\" class=\"wp-image-497\" style=\"width:829px;height:auto\" srcset=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Sc2.png 2048w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Sc2-300x153.png 300w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Sc2-1024x523.png 1024w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Sc2-768x392.png 768w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Sc2-1536x784.png 1536w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" \/><figcaption class=\"wp-element-caption\">Scene 2 &#8211; Cutscene (Encounter)<\/figcaption><\/figure><\/div>\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-12 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"748\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Spring.png\" alt=\"\" class=\"wp-image-498\" style=\"width:468px;height:auto\" srcset=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Spring.png 1600w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Spring-300x140.png 300w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Spring-1024x479.png 1024w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Spring-768x359.png 768w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Spring-1536x718.png 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure><\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"770\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Summer.png\" alt=\"\" class=\"wp-image-499\" style=\"width:459px;height:auto\" srcset=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Summer.png 1600w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Summer-300x144.png 300w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Summer-1024x493.png 1024w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Summer-768x370.png 768w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Summer-1536x739.png 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-13 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"711\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Fall.png\" alt=\"\" class=\"wp-image-500\" style=\"width:468px;height:auto\" srcset=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Fall.png 1600w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Fall-300x133.png 300w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Fall-1024x455.png 1024w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Fall-768x341.png 768w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Fall-1536x683.png 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<p class=\"has-x-small-font-size\">Scene 3 &#8211; First Interactable Level (season changing) with Guidance (Growing up Together)<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-14 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"300\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Sc4.png\" alt=\"\" class=\"wp-image-501\" style=\"width:1040px\" srcset=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Sc4.png 1600w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Sc4-300x56.png 300w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Sc4-1024x192.png 1024w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Sc4-768x144.png 768w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Sc4-1536x288.png 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><figcaption class=\"wp-element-caption\">Scene 4 &#8211; Animated Scroll (the Dancer in Danger)<\/figcaption><\/figure><\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"302\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Sc5.jpeg\" alt=\"\" class=\"wp-image-502\" style=\"width:1040px\" srcset=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Sc5.jpeg 1600w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Sc5-300x57.jpeg 300w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Sc5-1024x193.jpeg 1024w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Sc5-768x145.jpeg 768w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Sc5-1536x290.jpeg 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><figcaption class=\"wp-element-caption\">Scene 5 &#8211; Main interactable level (Deer\u2019s Journey)<\/figcaption><\/figure><\/div>\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"748\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Sc6-2.png\" alt=\"\" class=\"wp-image-505\" srcset=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Sc6-2.png 1600w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Sc6-2-300x140.png 300w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Sc6-2-1024x479.png 1024w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Sc6-2-768x359.png 768w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Sc6-2-1536x718.png 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><figcaption class=\"wp-element-caption\">Scene 6 &#8211; Celebration<\/figcaption><\/figure>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"340\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/CaveArt2.jpeg\" alt=\"\" class=\"wp-image-506\" style=\"width:1040px\" srcset=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/CaveArt2.jpeg 1600w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/CaveArt2-300x64.jpeg 300w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/CaveArt2-1024x218.jpeg 1024w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/CaveArt2-768x163.jpeg 768w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/CaveArt2-1536x326.jpeg 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><figcaption class=\"wp-element-caption\">Scene 7 &#8211; End (Cave Art with Deer &amp; Dancer)<\/figcaption><\/figure><\/div>\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-15 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<p><strong>VFX<\/strong> were widely used in the experience to reflect the narrative.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-16 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"alignright size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"494\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/FireSparks_Flow.gif\" alt=\"\" class=\"wp-image-507\" style=\"width:497px;height:auto\"\/><figcaption class=\"wp-element-caption\">fire boosting<\/figcaption><\/figure><\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"874\" height=\"492\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Tree.gif\" alt=\"\" class=\"wp-image-508\" style=\"width:495px\"\/><figcaption class=\"wp-element-caption\">tree growing<\/figcaption><\/figure><\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-17 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"alignright size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"586\" height=\"330\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/DancerRevival_CloseUp.gif\" alt=\"\" class=\"wp-image-509\" style=\"width:503px;height:auto\"\/><figcaption class=\"wp-element-caption\">dancer\u2019s revival<\/figcaption><\/figure><\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"646\" height=\"364\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/FireworksScene-1.gif\" alt=\"\" class=\"wp-image-510\" style=\"width:495px\"\/><figcaption class=\"wp-element-caption\">fireworks<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-18 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<p>After receiving feedback from the guests during our playtests, we developed more visual cues to guide the focus across the screen and make the scene more dynamic.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"200\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/GuidingCut0526.gif\" alt=\"\" class=\"wp-image-537\" style=\"width:1040px\"\/><\/figure><\/div>\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-19 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"alignleft size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1503\" height=\"1002\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Hand-edited.png\" alt=\"\" class=\"wp-image-526\" style=\"width:434px;height:auto\" srcset=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Hand-edited.png 1503w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Hand-edited-300x200.png 300w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Hand-edited-1024x683.png 1024w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Hand-edited-768x512.png 768w\" sizes=\"(max-width: 1503px) 100vw, 1503px\" \/><\/figure><\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"494\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/FireSparks_Flow-2.gif\" alt=\"\" class=\"wp-image-529\" style=\"width:524px;height:auto\"\/><\/figure><\/div><\/div>\n<\/div>\n\n\n\n<p class=\"has-x-small-font-size\">VFX to guide the focus: guiding particles, hand particles for guests, blinking outline<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-20 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"338\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Leaves_Wind.gif\" alt=\"\" class=\"wp-image-530\" style=\"width:495px\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"338\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Petals.gif\" alt=\"\" class=\"wp-image-531\" style=\"width:495px\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"has-x-small-font-size\">VFX to make the scene more dynamic: wind, leaves, flower petals<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-21 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<p class=\"has-large-font-size\"><strong>Tech<\/strong><\/p>\n\n\n\n<p>We applied motion capture data to create the animations for the dancer. With the support of CMU motion capture lab, we were able to capture Nina\u2019s choreography and turn it into skeletal animations. We spent a lot of time on the animation data cleanup, and matching it with the movement of the deer. After a few captures and iterations, we were able to achieve more satisfactory results than the beginning by optimizing the root motion, and adding more storytelling and interactive elements to the motion captured content.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-22 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"alignleft size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"713\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/mocap.gif\" alt=\"\" class=\"wp-image-532\" style=\"width:200px;height:auto\"\/><\/figure><\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"alignleft size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"430\" height=\"311\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/sc6-dancermocap.gif\" alt=\"\" class=\"wp-image-533\" style=\"width:495px\"\/><\/figure><\/div><\/div>\n<\/div>\n\n\n\n<p>Most of the interaction in the experience was achieved by using Kinects to track the guests\u2019 body movements. We also incorporated a vive tracker by disguising it as a lantern to light up the virtual cave art at the very beginning of the experience. The pipeline was proven workable by the first half of the semester. In the second half, we succeeded in optimizing it by reducing the loading time by 70%, reducing the noise during body tracking by 30% and implementing multiple Kinects for future cavern projects.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1135\" height=\"639\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Sc5-handtrack-1.gif\" alt=\"\" class=\"wp-image-534\"\/><figcaption class=\"wp-element-caption\">Body tracking with Kinect<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"1600\" src=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Lantern.png\" alt=\"\" class=\"wp-image-535\" style=\"width:252px;height:auto\" srcset=\"https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Lantern.png 1200w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Lantern-225x300.png 225w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Lantern-768x1024.png 768w, https:\/\/projects.etc.cmu.edu\/flow\/wp-content\/uploads\/2024\/05\/Lantern-1152x1536.png 1152w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><figcaption class=\"wp-element-caption\">Vive tracker &amp; physical prop<br><\/figcaption><\/figure><\/div>\n\n\n<p class=\"has-large-font-size\"><strong><em>Flow<\/em> Beyond Spring 2024<\/strong><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>We are definitely seeking out for any potential development for<em> Flow<\/em> outside the semester. <\/p>\n\n\n\n<p>There has been plans for landing <em>Flow<\/em> in Shenzhen, China this summer&#8230;<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Coming SOON~<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In spring 2024 at CMU ETC, Team Flow was able to create an interactive immersive experience that takes the guests on a spiritual journey through a Chinese folklore-inspired world with dance, music, light and color. In the experience, the guests will witness the adventure and friendship of a deer and a dancer, and help them [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":489,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"_links":{"self":[{"href":"https:\/\/projects.etc.cmu.edu\/flow\/wp-json\/wp\/v2\/posts\/481"}],"collection":[{"href":"https:\/\/projects.etc.cmu.edu\/flow\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/projects.etc.cmu.edu\/flow\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/flow\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/flow\/wp-json\/wp\/v2\/comments?post=481"}],"version-history":[{"count":13,"href":"https:\/\/projects.etc.cmu.edu\/flow\/wp-json\/wp\/v2\/posts\/481\/revisions"}],"predecessor-version":[{"id":551,"href":"https:\/\/projects.etc.cmu.edu\/flow\/wp-json\/wp\/v2\/posts\/481\/revisions\/551"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/flow\/wp-json\/wp\/v2\/media\/489"}],"wp:attachment":[{"href":"https:\/\/projects.etc.cmu.edu\/flow\/wp-json\/wp\/v2\/media?parent=481"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/flow\/wp-json\/wp\/v2\/categories?post=481"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/flow\/wp-json\/wp\/v2\/tags?post=481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}