Logo
Overview
Capstone Project | Prototype 2.5 & 3

Capstone Project | Prototype 2.5 & 3

February 8, 2026
2 min read
index

Smarter State Machines

Continuing from previous post, I’ve redone the way I implement the state machine moving forward. This time, I used Touchdesigner’s network systems output and selecting them through user input that is determined by a group of CHOPs. For summary, essentially I split the workload into three modules:

State Machine Graph
Diagram to make life understandable
  • State Controllers: The brain that determines and knows what state entire network is, controlled (for now) with keyboard input. Will be using real-time data stream from sensors in the future.
  • Visual Network: The place where I assemble all of the visuals, they can be entered through scrolling. Each are independent with one another.
  • Preview Node: A node that allows the user to see what is the current and next selection of visual.
State Machine UI
TD Interface

Visuals: Idle, Calm, Active prototypes

Idle

When the audience looks at the space, they will be greeted with a “living” voronoi waves from previous prototype that I have adjusted the colors and behavior such that it is attractive and active enough to be noticed by the audience. Originally, it had a dark color background, but considering the color palette we’ve discussed for the “calm” state, I tried experimenting with making sure that the audience's eyes don't get flashbang-ed.

State Machine UI
Not entirely sure whether this worked or not, but it is a start.

Active State

This state is still very much work in progress because I’ve got a lot of ideas on what to do with it just not implementing it right now. But borrowing Yaakulya’s space obsession, I made something akin to the sun’s surface layer with colors borrowing from idle and calm states. This visual mostly rely on Edge TOPs and Displace TOPs to create an overlapping sphere with added noise to offset it, creating something akin to a sun’s flare.

solar flare inspo
Active state prototype
solar flare inspo
Solar Flare - Nasa.gov

Calm State

Following the orb as a center piece and glowing golden “vibes” from the visual inspiration deck, I went a very subtle wavy moving gradient. On top of that, I added a math function through Pattern CHOP to control the motion of the bubbles. They are independent from one another, which means, using data stream from websocket (hooray 😎), many parameters can be adjusted to fit our needs.

Calm State
Bubbles and waves~~

Websocket!

After semester long trials and tribulations, I finally figured out a nice way to implement websockets. It works very simple by utlizing Python interpreter and Websocket DAT and CHOP Execute DATs to parse JSON packets coming in from the web into tabular data, which then I can use as parameters for anything in the program.

td websocket
Controlling sliders from web to TD and vice versa

Resources & Inspirations