WHAT IS TOUCH DESIGNER?
TouchDesigner is a visual programming platform used for creating real-time interactive multimedia content. It is popular for interactive installation and live performances.
Building Immersive Worlds
01. Research
The first step in this project was researching successful interactive samples. I find that lots of pattern compositions work very well in touch designer, users simple movements can trigger dynamic movements, also visually mesmerizing when projected on bigger scale screens.
What if your hands could command the visual language? Imagine typography that shifts and flows with your gestures.
02. Concept
Interactive Chinese Typography
Growing up, I took lessons in traditional Chinese calligraphy and have always admired its expressive beauty. This personal connection inspired me to reimagine calligraphy through a contemporary lens, blending tradition with modernity to create something fresh and exciting.
There are five main styles of traditional Chinese calligraphy: Seal Script (篆書), Clerical Script (隸書), Regular Script (楷書), Semi-Cursive (行書), and Cursive Script (草書). These styles are visually distinct from contemporary characters, offering a rich foundation for reinterpretation.
03. Design
To bring the concept to life, I selected meaningful words to redesign, including the word form, combination, new, and craft. I then move onto redesigning the traditional characters by integrated clean graphic shapes, computer fonts, and vibrant color schemes. This juxtaposition of the hand-crafted tradition and the computer graphics represents a dialogue between tradition and technology.
Designed
Contemporary
Traditional
04. Interactivity with Media Pipeline
Next, I dove into TouchDesigner to begin constructing the operator network, using the Media Pipeline. I followed Torin BlankenSmith's tutorial, his work is super cool so definitely check it out!
In brief, Media Pipeline in TouchDesigner allows seamless integration of multimedia elements, such as video or interactive input, into a visual system. For this project, I implemented hand interactivity, where the graphics respond to gestures. A pinch action controls scaling, while rotating triggers the next visual, creating a dynamic, hands-on experience for the viewer.
Integrating type design and sound
Next, I integrated the typography into TouchDesigner, creating six pattern variations. I then added interactivity with sound that responds to the distance between my thumb and index finger, closer proximity lowers the volume and scales down the visuals. This links sight and sound in a dynamic, multi-sensory experience.
05. Final
Thanks for stopping by!
This project marked my first deep dive into TouchDesigner, and I really enjoyed its flexibility, being able to construct a network and repurpose it with different visuals was super cool. While the learning curve was steep, especially coming from workflows like After Effects and Cinema 4D, the process was highly rewarding. I’m excited to continue exploring TouchDesigner and use it to create more immersive, multi-sensory experiences.
