{"id":6256,"date":"2026-10-23T14:38:41","date_gmt":"2026-10-23T18:38:41","guid":{"rendered":"https:\/\/dems.asc.ohio-state.edu\/?p=6256"},"modified":"2026-10-23T14:38:41","modified_gmt":"2026-10-23T18:38:41","slug":"the-integration-of-traditional-culture-and-modern-technology","status":"publish","type":"post","link":"https:\/\/dems.asc.ohio-state.edu\/?p=6256","title":{"rendered":"The Integration of Traditional Culture and Modern Technology"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">For Pressure Project 2 \u2014 <em>A Mystery Is Revealed<\/em>, I created an interactive experience that combines traditional Chinese shadow puppetry with a story from <em>Journey to the West<\/em>. My inspiration came from the classic episode <em>Sun Wukong \uff08The Monkey King\uff09and the White Bone Demon<\/em>. By combining traditional Chinese storytelling and art with modern interactive technology, I wanted the audience to experience the fun of controlling shadow puppets themselves rather than simply watching a performance.<\/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=\"An amazing Chinese folk art: Shadow Puppetry\uff5cIntangible Cultural Heritage\" width=\"590\" height=\"332\" src=\"https:\/\/www.youtube.com\/embed\/V1UoeWUczV0?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<p class=\"wp-block-paragraph\">My project focuses on revealing the hidden identity of a mysterious woman. At the beginning of the experience, the audience first sees a landscape inspired by traditional Chinese art. A mysterious woman then appears, followed by Sun Wukong, the Monkey King. The audience can control Sun Wukong and try to uncover the woman&#8217;s secret. At the same time, another participant can control the mysterious woman, so the experience can be played by either one or two people. When Sun Wukong&#8217;s golden staff strikes the woman&#8217;s head, her human appearance gradually breaks apart, revealing the skeletal form hidden beneath her disguise. At that moment, the audience discovers that the seemingly ordinary woman is actually the White Bone Demon, and the mystery is finally revealed.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1598\" style=\"aspect-ratio: 2558 \/ 1598;\" width=\"2558\" controls src=\"https:\/\/dems.asc.ohio-state.edu\/wp-content\/uploads\/2026\/10\/\u6210\u54c1.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Process and Challenges<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">During the development process, the first problem I needed to solve was how to make the static shadow puppet characters move. To recreate the movable joints of traditional Chinese shadow puppets, I separated Sun Wukong&#8217;s character image into different parts, including his head, body, two arms, and two legs. I then imported these parts into TouchDesigner and used Transform TOPs to adjust their positions, sizes, and pivot points before putting them back together as a complete character. This step was more complicated than I originally expected. If the pivot points were not positioned correctly, the arms and legs would separate from the body when they rotated. I spent quite a lot of time making adjustments until the character&#8217;s movements looked more natural.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After assembling the character, I used MediaPipe hand tracking to create the interaction. Participants can control Sun Wukong with their left hand and the mysterious woman with their right hand. By bending different fingers, they can also control Sun Wukong&#8217;s head, arms, and legs. Both characters can move around the screen and automatically turn to face different directions based on hand movements. However, I encountered some unexpected challenges while developing these interactions. First, the hand-tracking system was very sensitive to small finger movements. Even when I tried to keep my fingers still, the character&#8217;s joints would continue shaking. Another problem was that MediaPipe did not always detect the two hands in the same order, which sometimes caused the characters controlled by the left and right hands to get mixed up. To solve these problems, I adjusted the hand recognition logic and used Lag CHOPs to smooth the characters&#8217; movements, making the controls more stable.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Another major challenge was detecting collisions between Sun Wukong&#8217;s golden staff and the White Bone Demon. At first, I tried to detect attacks based on the distance between the characters and the rotation angle of Sun Wukong&#8217;s arm. However, this method was not very accurate. Sometimes, simply raising Sun Wukong&#8217;s arm would trigger the transformation, even when the staff had not actually touched the woman. To fix this, I redesigned the collision detection system by creating separate collision areas for the tip of the golden staff and the woman&#8217;s head. The transformation is now triggered only when these two areas overlap. When the staff successfully hits her head, her human appearance gradually distorts, revealing the skeletal form hidden underneath.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1560\" style=\"aspect-ratio: 2552 \/ 1560;\" width=\"2552\" controls src=\"https:\/\/dems.asc.ohio-state.edu\/wp-content\/uploads\/2026\/10\/\u5c4f\u5e55\u5f55\u5236-2026-10-23-130905.mp4\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Through this project, I realized that interaction design is not just about making a computer recognize human movements. More importantly, the system needs to respond to those movements in a clear and meaningful way. I also learned that even small details can have a big impact on the user experience. Because of this, I had to keep testing and adjusting my project to reduce errors and make the interaction feel smoother.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Another thing I had to think about was how to make a simple character transformation feel like a moment when a mystery is truly revealed, rather than just another animation effect. To achieve this, I added opening subtitles, a question about the mysterious woman&#8217;s identity, and background music. I wanted these elements to create a sense of mystery and make the audience curious at the beginning, so they could eventually discover the truth through their own actions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In traditional Chinese shadow puppetry, the audience usually watches performers control the puppets. However, in my project, the audience can become the puppeteers themselves. I think this change from watching to actively participating shows how modern interactive technology can bring a new kind of experience to traditional art forms. At the same time, I hope my project can encourage people who are unfamiliar with <em>Journey to the West<\/em> to become interested in Chinese traditional stories and culture, and perhaps learn more about them.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"588\" src=\"https:\/\/dems.asc.ohio-state.edu\/wp-content\/uploads\/2026\/10\/\u5c4f\u5e55\u622a\u56fe-2026-10-23-143546-1024x588.png\" alt=\"\" class=\"wp-image-6262\" srcset=\"https:\/\/dems.asc.ohio-state.edu\/wp-content\/uploads\/2026\/10\/\u5c4f\u5e55\u622a\u56fe-2026-10-23-143546-1024x588.png 1024w, https:\/\/dems.asc.ohio-state.edu\/wp-content\/uploads\/2026\/10\/\u5c4f\u5e55\u622a\u56fe-2026-10-23-143546-300x172.png 300w, https:\/\/dems.asc.ohio-state.edu\/wp-content\/uploads\/2026\/10\/\u5c4f\u5e55\u622a\u56fe-2026-10-23-143546-767x440.png 767w, https:\/\/dems.asc.ohio-state.edu\/wp-content\/uploads\/2026\/10\/\u5c4f\u5e55\u622a\u56fe-2026-10-23-143546-1536x882.png 1536w, https:\/\/dems.asc.ohio-state.edu\/wp-content\/uploads\/2026\/10\/\u5c4f\u5e55\u622a\u56fe-2026-10-23-143546-2048x1175.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>For Pressure Project 2 \u2014 A Mystery Is Revealed, I created an interactive experience that combines traditional Chinese shadow puppetry with a story from Journey to the West. My inspiration came from the classic episode Sun Wukong \uff08The Monkey King\uff09and the White Bone Demon. By combining traditional Chinese storytelling and art with modern interactive technology, [&hellip;]<\/p>\n","protected":false},"author":137,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-6256","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/dems.asc.ohio-state.edu\/index.php?rest_route=\/wp\/v2\/posts\/6256","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dems.asc.ohio-state.edu\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dems.asc.ohio-state.edu\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dems.asc.ohio-state.edu\/index.php?rest_route=\/wp\/v2\/users\/137"}],"replies":[{"embeddable":true,"href":"https:\/\/dems.asc.ohio-state.edu\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6256"}],"version-history":[{"count":1,"href":"https:\/\/dems.asc.ohio-state.edu\/index.php?rest_route=\/wp\/v2\/posts\/6256\/revisions"}],"predecessor-version":[{"id":6263,"href":"https:\/\/dems.asc.ohio-state.edu\/index.php?rest_route=\/wp\/v2\/posts\/6256\/revisions\/6263"}],"wp:attachment":[{"href":"https:\/\/dems.asc.ohio-state.edu\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dems.asc.ohio-state.edu\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6256"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dems.asc.ohio-state.edu\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}