{"id":6136,"date":"2026-10-01T15:28:16","date_gmt":"2026-10-01T19:28:16","guid":{"rendered":"https:\/\/dems.asc.ohio-state.edu\/?p=6136"},"modified":"2026-10-01T15:35:10","modified_gmt":"2026-10-01T19:35:10","slug":"ggez-an-audio-reactive-visualizer","status":"publish","type":"post","link":"https:\/\/dems.asc.ohio-state.edu\/?p=6136","title":{"rendered":"GGEZ: An Audio-Reactive Visualizer"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Description<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For this project, I made a self-generating audio-reactive visualizer in TouchDesigner using the song &#8220;GGEZ&#8221; by Kaien Nuen, SUGAR (CNCA), and M.Sasuke. The visual includes 3D &#8220;GGEZ&#8221; text, and organic blob, particles, and different effects that react to the audio. Once the patch is started, it runs on its own and the audio continuously changes different visual parameters. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Process Reflection<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">When I first started this project, I wanted to make a digital organism that woudl grow, change, and eventually die. Since I was getting comfortable with TouchDesigner, I started looking a tutorials to figure out how I could actually build something like that. I first followed <a href=\"https:\/\/youtu.be\/_JAKbwCQkcc?si=pP3LdShIFMsD9O5q\" data-type=\"link\" data-id=\"https:\/\/youtu.be\/_JAKbwCQkcc?si=pP3LdShIFMsD9O5q\">Pao Olea&#8217;s Organic Creature tutorial<\/a>, which helped me learn more about SOPs, CHOPs, instancing, geometry, 3D space, materials, feedback, and bloom. I ended up making a tentacle-like spiral while experimenting with these techniques, and this made me much more comfortable working with 3D geometry. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After that, I become more interested in audio reactivity, so I followed <a href=\"https:\/\/www.youtube.com\/watch?v=JFiw01mQabE&amp;t=1s\" data-type=\"link\" data-id=\"https:\/\/www.youtube.com\/watch?v=JFiw01mQabE&amp;t=1s\">Nicholas P.J.M&#8217;s tutorials on audio-reactive particles<\/a> and <a href=\"https:\/\/www.youtube.com\/watch?v=n7jNNIa9VdM\">3D text<\/a>. I learned how to use POPs, Audio Analysis, Math, Transform, Noise, and Random, and then started combining those techniques with what I had learned from the first tutorial.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The five-hour limit definitely affected my process. I oiginally had a pretty specific plan, but ended up exploring two connected directions instead of spending the entire time on one organism. I think this actually helped me learn more becuase I was able to experiment with different parts of TouchDesigner and then bring them together in the final piece.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I originally planned to use &#8220;American Girl&#8221; by Tiffany Day, but I changed the song to &#8220;GGEZ&#8221; becuase I thought its recognizable and intentionally cringe quality would get more of a reaction from the class. I also added the 3D &#8220;GGEZ&#8221; text becuase I thoguht it would be funny to make the song itself part of the visual. Unfortunately, after listening to it for five hours, it definitely got stuck in my head.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">One thing that suprised me was how much the different parts of TouchDesigner build on each other. TOPs, SOPs, CHOPs, and POPs initally felt very separate, but it started to understand how they can all work together. I also realized how much a small parameter change can completely hange the final visual.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For the presentation, the patch ran on its own and held the class&#8217;s attention for at least a minute. I also got a noticeable reaction from the class. If I had more time, I would turn the &#8220;GGEZ&#8221; text into a full lyric visualizer and return to my original organism idea to create a clearer growth adn death cycle.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Documentation<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"ACCAD 5301 Pressure Project 1 [GGEZ: An Audio-Reactive Visualizer]\" width=\"590\" height=\"443\" src=\"https:\/\/www.youtube.com\/embed\/XH7Z6cBEEUo?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<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"873\" height=\"491\" src=\"https:\/\/dems.asc.ohio-state.edu\/wp-content\/uploads\/2026\/10\/GGEZ_-Audio-Reactive-Visualizer-1.png\" alt=\"\" class=\"wp-image-6147\" srcset=\"https:\/\/dems.asc.ohio-state.edu\/wp-content\/uploads\/2026\/10\/GGEZ_-Audio-Reactive-Visualizer-1.png 873w, https:\/\/dems.asc.ohio-state.edu\/wp-content\/uploads\/2026\/10\/GGEZ_-Audio-Reactive-Visualizer-1-300x169.png 300w, https:\/\/dems.asc.ohio-state.edu\/wp-content\/uploads\/2026\/10\/GGEZ_-Audio-Reactive-Visualizer-1-766x431.png 766w\" sizes=\"auto, (max-width: 873px) 100vw, 873px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"ACCAD 5301 Pressure Project 1: [Organism Creature]\" width=\"590\" height=\"443\" src=\"https:\/\/www.youtube.com\/embed\/_n6ZupsVPuM?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<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1028\" height=\"578\" src=\"https:\/\/dems.asc.ohio-state.edu\/wp-content\/uploads\/2026\/10\/Organism-Creature-1.png\" alt=\"\" class=\"wp-image-6146\" srcset=\"https:\/\/dems.asc.ohio-state.edu\/wp-content\/uploads\/2026\/10\/Organism-Creature-1.png 1028w, https:\/\/dems.asc.ohio-state.edu\/wp-content\/uploads\/2026\/10\/Organism-Creature-1-300x169.png 300w, https:\/\/dems.asc.ohio-state.edu\/wp-content\/uploads\/2026\/10\/Organism-Creature-1-767x431.png 767w, https:\/\/dems.asc.ohio-state.edu\/wp-content\/uploads\/2026\/10\/Organism-Creature-1-1024x576.png 1024w\" sizes=\"auto, (max-width: 1028px) 100vw, 1028px\" \/><\/figure>\n\n\n\n<div style=\"\n  margin: 35px 0;\n  padding: 30px;\n  border-radius: 18px;\n  background: linear-gradient(135deg, #f7f7f7, #ededed);\n  text-align: center;\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);\n\">\n\n  <div style=\"\n    font-size: 13px;\n    text-transform: uppercase;\n    letter-spacing: 2px;\n    color: #777;\n    margin-bottom: 8px;\n  \">\n    ACCAD 5301\n  <\/div>\n\n  <h3 style=\"\n    margin: 0 0 12px;\n    font-size: 26px;\n    color: #222;\n  \">\n    Pressure Project 1\n  <\/h3>\n\n  <p style=\"\n    max-width: 600px;\n    margin: 0 auto 24px;\n    color: #555;\n    line-height: 1.6;\n  \">\n    View the final project release or explore the GitHub repository\n    containing the TouchDesigner project and supporting files.\n  <\/p>\n\n  <div style=\"\n    display: flex;\n    justify-content: center;\n    gap: 12px;\n    flex-wrap: wrap;\n  \">\n\n    <!-- Release Button -->\n    <a\n      href=\"https:\/\/github.com\/beanbean9339\/accad_5301_pressure_project_1\/releases\/tag\/v1\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      style=\"\n        display: inline-block;\n        padding: 14px 26px;\n        border-radius: 999px;\n        background: #222;\n        color: #fff !important;\n        text-decoration: none !important;\n        font-size: 15px;\n        font-weight: 600;\n        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);\n      \">\n      \u2193&nbsp;&nbsp; View &#038; Download Files\n    <\/a>\n\n    <!-- GitHub Button -->\n    <a\n      href=\"https:\/\/github.com\/beanbean9339\/accad_5301_pressure_project_1\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      style=\"\n        display: inline-block;\n        padding: 14px 26px;\n        border-radius: 999px;\n        background: #fff;\n        color: #222 !important;\n        text-decoration: none !important;\n        font-size: 15px;\n        font-weight: 600;\n        border: 1px solid #ccc;\n      \">\n      \u25c7&nbsp;&nbsp; View GitHub Repository\n    <\/a>\n\n  <\/div>\n\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Answering Questions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">What is causing the audio reactivity, and what is the input?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The main input is the song itself. I use an Audio File In CHOP to bring the song into TouchDesigner, which then goes into Audio Analysis. From there, I use Math and Lag to adjust and smooth the values before sending them into different parameters. Different parts of the audio control different parts of the visual, including the galaxy shape and the \u201cGGEZ\u201d text. This is what allows the visual to keep changing as the song plays.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How are the particles moving?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">I used POP operators to create and control the particles. I used Math and Transform nodes along with Noise and Random to change their movement and make it less predictable. Originally, the particles looked more like little boxes, so I used a Trail to make their movement more continuous. This made them look more like particles flowing through the space instead of separate objects moving around.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How did you layer everything?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">I started with the different visual elements separately and then combined them through different TOPs and a Geometry component. The galaxy image was converted into a 3D object, which gave me the main organic shape in the piece. I also created the \u201cGGEZ\u201d text as a 3D element and rendered it back into a TOP so I could keep manipulating it. From there, I layered things like Noise, Slope, Displace, Feedback, color effects, and Bloom to create the final look. The feedback helped create trails and build on previous frames, which made the visual feel more constantly in motion.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What is the organic shape, and how did I arrive at it?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The organic-looking shape is actually an image of a galaxy that I converted into a 3D object. I originally started the project wanting to make a digital organism that would grow and eventually die. I started by following Pao Olea\u2019s <em>Organic Creature<\/em> tutorial, which taught me more about geometry, instancing, SOPs, CHOPs, and 3D space. I then experimented with a tentacle-like spiral before moving into the audio-reactive particle tutorial. While experimenting, I realized I could take an image and turn it into a 3D form, which is how I ended up with the galaxy shape in the final piece.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Where did I start, and how did I get here?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">I definitely did not start with the final idea. I started with the organism concept, then went through a tentacle\/geometry exploration, and eventually became more interested in audio-reactive visuals. I used a few tutorials to learn specific techniques and then combined parts of them into my own patch. The five-hour limit meant I had to experiment while I was learning, so the final piece became a combination of several things I learned rather than one idea that I had completely planned from the beginning.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I also originally planned to use \u201cAmerican Girl\u201d by Tiffany Day, but switched to \u201cGGEZ\u201d because I thought the song would get more of a reaction from the class. I wanted the giant \u201cGGEZ\u201d text to make the piece a little funny instead of just being a serious audio visualizer.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What would I do with more time?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If I had more time, I would turn the \u201cGGEZ\u201d text into a full lyric visualizer instead of having the same word throughout the piece. I would also like to return to my original organism idea and make the galaxy\/organic shape actually grow, change, and eventually break apart or die. I think that would make the piece feel more like the self-generating organism I originally imagined.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Description For this project, I made a self-generating audio-reactive visualizer in TouchDesigner using the song &#8220;GGEZ&#8221; by Kaien Nuen, SUGAR (CNCA), and M.Sasuke. The visual includes 3D &#8220;GGEZ&#8221; text, and organic blob, particles, and different effects that react to the audio. Once the patch is started, it runs on its own and the audio continuously [&hellip;]<\/p>\n","protected":false},"author":128,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-6136","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\/6136","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\/128"}],"replies":[{"embeddable":true,"href":"https:\/\/dems.asc.ohio-state.edu\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6136"}],"version-history":[{"count":3,"href":"https:\/\/dems.asc.ohio-state.edu\/index.php?rest_route=\/wp\/v2\/posts\/6136\/revisions"}],"predecessor-version":[{"id":6150,"href":"https:\/\/dems.asc.ohio-state.edu\/index.php?rest_route=\/wp\/v2\/posts\/6136\/revisions\/6150"}],"wp:attachment":[{"href":"https:\/\/dems.asc.ohio-state.edu\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dems.asc.ohio-state.edu\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6136"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dems.asc.ohio-state.edu\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}