{"id":55,"date":"2026-09-09T21:36:42","date_gmt":"2026-09-09T21:36:42","guid":{"rendered":"https:\/\/projects.etc.cmu.edu\/beyond-frame\/?page_id=55"},"modified":"2026-09-25T19:31:03","modified_gmt":"2026-09-25T19:31:03","slug":"week-2","status":"publish","type":"page","link":"https:\/\/projects.etc.cmu.edu\/beyond-frame\/week-2\/","title":{"rendered":"Week 2"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Design Production <\/h2>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-3a88641f wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"688\" height=\"1024\" src=\"https:\/\/projects.etc.cmu.edu\/beyond-frame\/wp-content\/uploads\/2026\/09\/\uc2a4\ud06c\ub9b0\uc0f7-2026-09-25-151600-688x1024.png\" alt=\"\" class=\"wp-image-344\" style=\"aspect-ratio:0.6719085060757684;width:410px;height:auto\" srcset=\"https:\/\/projects.etc.cmu.edu\/beyond-frame\/wp-content\/uploads\/2026\/09\/\uc2a4\ud06c\ub9b0\uc0f7-2026-09-25-151600-688x1024.png 688w, https:\/\/projects.etc.cmu.edu\/beyond-frame\/wp-content\/uploads\/2026\/09\/\uc2a4\ud06c\ub9b0\uc0f7-2026-09-25-151600-202x300.png 202w, https:\/\/projects.etc.cmu.edu\/beyond-frame\/wp-content\/uploads\/2026\/09\/\uc2a4\ud06c\ub9b0\uc0f7-2026-09-25-151600.png 757w\" sizes=\"auto, (max-width: 688px) 100vw, 688px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"3498\" height=\"4273\" src=\"https:\/\/projects.etc.cmu.edu\/beyond-frame\/wp-content\/uploads\/2026\/09\/beyond-frame_poster_ex-04-1.png\" alt=\"\" class=\"wp-image-355\" style=\"aspect-ratio:0.8186406692940607;width:479px;height:auto\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"645\" src=\"https:\/\/projects.etc.cmu.edu\/beyond-frame\/wp-content\/uploads\/2026\/09\/logo-02-1-1024x645.png\" alt=\"\" class=\"wp-image-341\" style=\"width:537px;height:auto\" srcset=\"https:\/\/projects.etc.cmu.edu\/beyond-frame\/wp-content\/uploads\/2026\/09\/logo-02-1-1024x645.png 1024w, https:\/\/projects.etc.cmu.edu\/beyond-frame\/wp-content\/uploads\/2026\/09\/logo-02-1-300x189.png 300w, https:\/\/projects.etc.cmu.edu\/beyond-frame\/wp-content\/uploads\/2026\/09\/logo-02-1-767x483.png 767w, https:\/\/projects.etc.cmu.edu\/beyond-frame\/wp-content\/uploads\/2026\/09\/logo-02-1-1536x967.png 1536w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n\n<h1 class=\"wp-block-heading\">From Concept to Experience<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">This week, Beyond Frame moved from a broad concept toward a much more defined visitor experience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After discussions with our client, instructors, and team, we began narrowing down not only what the experience should look like, but also how visitors would enter it, move through it, interact with the artwork, and eventually leave with something physical from the experience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Our current experience flow is becoming much clearer:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Visitors first encounter the original artwork \u2192 walk through a physical frame \u2192 see themselves integrated into a digital version of the painting \u2192 explore the space through natural movement \u2192 trigger subtle reactions within the artwork \u2192 receive one personalized printed image from their experience.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/projects.etc.cmu.edu\/beyond-frame\/wp-content\/uploads\/2026\/09\/d4876b952ed51489b88bd98893a93ebf-1024x768.jpg\" alt=\"\" class=\"wp-image-77\" style=\"width:515px;height:auto\" srcset=\"https:\/\/projects.etc.cmu.edu\/beyond-frame\/wp-content\/uploads\/2026\/09\/d4876b952ed51489b88bd98893a93ebf-1024x768.jpg 1024w, https:\/\/projects.etc.cmu.edu\/beyond-frame\/wp-content\/uploads\/2026\/09\/d4876b952ed51489b88bd98893a93ebf-300x225.jpg 300w, https:\/\/projects.etc.cmu.edu\/beyond-frame\/wp-content\/uploads\/2026\/09\/d4876b952ed51489b88bd98893a93ebf-767x575.jpg 767w, https:\/\/projects.etc.cmu.edu\/beyond-frame\/wp-content\/uploads\/2026\/09\/d4876b952ed51489b88bd98893a93ebf.jpg 1707w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/drive.google.com\/file\/d\/1XPtjlmYlUn2B3hbY8tk1cl_kfDBdQXNl\/view?usp=sharing\">https:\/\/drive.google.com\/file\/d\/1XPtjlmYlUn2B3hbY8tk1cl_kfDBdQXNl\/view?usp=sharing<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Refining the Interaction<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">One of the biggest design questions this week was how interactive the experience should actually be.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Early prototypes explored more explicit gesture-based interactions, such as waving, moving arms, or performing different poses. However, through conversations with our instructors and client, we realized that this could easily turn the experience into a gesture game rather than an experience about entering and appreciating an artwork.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Instead, we are now focusing on <strong>natural movement<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Walking closer to something, moving behind a tree, leaning around an object, or simply changing position in the space could create small reactions inside the painting.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The client also gave us an important design principle:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Rather than adding new visual effects to the artwork, we should animate what already exists within it.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, leaves could move slightly when someone walks nearby, branches could respond subtly to motion, or the visitor could disappear partially behind foreground objects.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The goal is not to make the painting visually louder, but to make it feel quietly alive.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"722\" src=\"https:\/\/projects.etc.cmu.edu\/beyond-frame\/wp-content\/uploads\/2026\/09\/1fcf51cfd1851f5b431e94399d029b65-1024x722.jpg\" alt=\"\" class=\"wp-image-80\" style=\"width:487px;height:auto\" srcset=\"https:\/\/projects.etc.cmu.edu\/beyond-frame\/wp-content\/uploads\/2026\/09\/1fcf51cfd1851f5b431e94399d029b65-1024x722.jpg 1024w, https:\/\/projects.etc.cmu.edu\/beyond-frame\/wp-content\/uploads\/2026\/09\/1fcf51cfd1851f5b431e94399d029b65-300x211.jpg 300w, https:\/\/projects.etc.cmu.edu\/beyond-frame\/wp-content\/uploads\/2026\/09\/1fcf51cfd1851f5b431e94399d029b65-768x541.jpg 768w, https:\/\/projects.etc.cmu.edu\/beyond-frame\/wp-content\/uploads\/2026\/09\/1fcf51cfd1851f5b431e94399d029b65.jpg 1816w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Creating Depth Inside the Painting<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">One of the strongest directions to emerge this week is the use of depth and layering.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Instead of treating the painting as a flat background with the visitor placed on top of it, we want to separate the artwork into foreground, middle-ground, and background elements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This would allow visitors to appear <strong>inside<\/strong> the composition.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">They could walk behind trees, appear between different visual layers, or become partially hidden by objects already present in the painting.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This simple spatial relationship may be one of the most important ways we can create the feeling of actually entering the world of the artwork.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Building the Technical Pipeline<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">At the same time, we began developing the technical systems needed to make this experience possible.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">On the visitor side, we are currently testing body detection, body segmentation, and pose tracking. These systems allow us to locate a visitor in the physical space and separate their body from the camera background.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We can then apply a painting-inspired style to the visitor before placing them inside the digital artwork.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Our current pipeline is roughly:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Camera \u2192 Body Detection \/ Segmentation \u2192 Style Transfer \u2192 Digital Painting<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We already have basic detection and segmentation working, which gives us a foundation for testing how a visitor can move through the digital environment.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1872\" height=\"747\" src=\"https:\/\/projects.etc.cmu.edu\/beyond-frame\/wp-content\/uploads\/2026\/09\/image-2.png\" alt=\"\" class=\"wp-image-83\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">We have also been testing different levels of style transfer.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">One challenge is finding the right balance between making the visitor visually belong inside the artwork and keeping them recognizable.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If the stylization is too light, the person can look like a photograph pasted onto a painting. If it is too strong, visitors may no longer recognize themselves.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For the next stage, we plan to compare several levels of stylization and find a middle ground between these two extremes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2694\" height=\"990\" src=\"https:\/\/projects.etc.cmu.edu\/beyond-frame\/wp-content\/uploads\/2026\/09\/89055ce8668ed57f8fce49ed16d91cee.jpg\" alt=\"\" class=\"wp-image-82\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Separating the Artwork<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The painting itself also needs to become something we can manipulate.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We are currently experimenting with a workflow that uses AI-assisted segmentation to separate elements such as trees, branches, ground, water, and other foreground objects into individual layers.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The current process is:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Original Painting \u2192 AI Segmentation \u2192 Extracted Elements \u2192 Artist Cleanup \u2192 Background Reconstruction \u2192 Unity<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This process is still experimental.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">AI can help us quickly identify and extract parts of a painting, but the results are not always complete. Objects may need to be manually reconstructed, and removing them can leave missing areas in the background that need to be repaired.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Rather than expecting the entire process to be automatic, we are currently treating it as a hybrid workflow in which AI provides a starting point and artists finish the image manually.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2211\" height=\"1314\" src=\"https:\/\/projects.etc.cmu.edu\/beyond-frame\/wp-content\/uploads\/2026\/09\/image-3.png\" alt=\"\" class=\"wp-image-84\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This workflow is also influencing which paintings may work best for the final experience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Paintings with clear depth, distinct foreground objects, open areas for visitors, and strong lighting conditions are currently much easier to imagine as interactive spaces.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Designing a Spatial Experience<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Another important realization this week is that Beyond Frame should not be designed only as an interaction on a screen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The physical space around the screen is also part of the experience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Visitors need to understand where to walk, when the experience begins, where they can stand, and when it ends\u2014ideally without reading a large instruction screen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This means we are beginning to think about environmental guidance through elements such as lighting, sound, floor placement, the physical frame, and spatial layout.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We also explored several possible testing spaces around ETC. A larger, reconfigurable room would allow us to test visitor movement much more realistically than a traditional desktop prototype.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For now, we are intentionally keeping the physical installation simple.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A more elaborate prototype involving touchable physical trees and branches was discussed, but the client felt that it could distract from the painting and introduce unnecessary maintenance and safety issues.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Our priority is to make the <strong>screen-based spatial experience compelling first<\/strong>, then consider whether smaller sensory elements such as sound or lighting can strengthen it later.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">One Moment to Take Away<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The final printed image is also becoming a much more important part of the experience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Rather than taking many photos and asking visitors to select their favorite, the current direction is to capture <strong>one moment that naturally happens during the experience<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The goal is for the image to feel less like posing for a camera and more like a record of something that happened while the visitor was inside the painting.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The client described the intended feeling as:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u201cThis was my moment in the painting.\u201d<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We are currently considering formats such as a postcard or photo print. A postcard is particularly interesting because it can function both as a personal keepsake and as something visitors can share with others after leaving the museum.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Moving Toward a Playable Prototype<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">By the end of Week 2, the project has started moving away from abstract discussion and toward a set of concrete questions that we can answer through prototyping.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The next major goal is not to build every interaction immediately.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Instead, we want to create the simplest possible spatial prototype that can test the core experience:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>A visitor enters the space \u2192 the system detects them \u2192 they appear inside the painting \u2192 they move \u2192 their representation moves through the artwork.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">From there, we can begin testing depth, natural interaction, stylization, sound, and the final image capture.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As we prepare for Quarters, we also want to spend less time explaining how we arrived at the idea and more time showing what we have already built, what the experience currently feels like, and what still needs to be tested.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The most important question moving forward is now very simple:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What does it actually feel like to move through a painting and see yourself become part of it?<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Design Production From Concept to Experience This week, Beyond Frame moved from a broad concept toward a much more defined visitor experience. After discussions with our client, instructors, and team, we began narrowing down not only what the experience should look like, but also how visitors would enter it, move through it, interact with the [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-55","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/projects.etc.cmu.edu\/beyond-frame\/wp-json\/wp\/v2\/pages\/55","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/projects.etc.cmu.edu\/beyond-frame\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/projects.etc.cmu.edu\/beyond-frame\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/beyond-frame\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/beyond-frame\/wp-json\/wp\/v2\/comments?post=55"}],"version-history":[{"count":4,"href":"https:\/\/projects.etc.cmu.edu\/beyond-frame\/wp-json\/wp\/v2\/pages\/55\/revisions"}],"predecessor-version":[{"id":358,"href":"https:\/\/projects.etc.cmu.edu\/beyond-frame\/wp-json\/wp\/v2\/pages\/55\/revisions\/358"}],"wp:attachment":[{"href":"https:\/\/projects.etc.cmu.edu\/beyond-frame\/wp-json\/wp\/v2\/media?parent=55"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}