Semester B: Week 27
Student: Tai Ser Yeet (22064351)
Programme: BA (Hons)(SW) Digital Media Design
WEEK 27
Fluid Simulation
After last week's tutorial with Mafalda, she provided a few links to YouTube tutorials that could be useful for my visuals. Finding a medium that truly captures the weight, grace, and silhouette of a dancer is hard, but I will try my best to make it work.
This was one of the videos she recommended:
After last week's tutorial with Mafalda, she provided a few links to YouTube tutorials that could be useful for my visuals. Finding a medium that truly captures the weight, grace, and silhouette of a dancer is hard, but I will try my best to make it work.
This was one of the videos she recommended:
Mafalda warned me not to tweak anything while following the video, as that would make troubleshooting much harder later on. Eventually, I did make a few minor changes, but I took note of them so I can refer to them if need be. For example, because I was using a second monitor, the coordinates and code are different; however, the solution is to bypass the Math CHOP connected specifically for that monitor. Another thing I noted was that if the Mouse In CHOP freezes, the fix is to close and reopen the TouchDesigner software.
Screenshot of Work in Progress
Screenshot of Viewer Active Movement
Screenshot of Gradient GLSL Operator
I have attached a recording of the Fluid Simulation in action.
Instead of one single operator, the fluid is solved across multiple specialised Fragment Shaders (.frag files). Using Visual Studio Code as my primary editor, I’ve been developing a chain of shaders that calculate the physics of motion in real-time:- Advection: Playing with density.
- Divergence & Pressure: The logic that ensures the fluid acts like a physical substance, reacting to boundaries and pressure.
- Vorticity: The swirling curls that make digital smoke feel alive.
To maintain stable fluid math, I’ve set the entire pipeline to 32-bit Float RGBA, ensuring that every swirl of the fluid remains silky and immersive, even when projected onto the large-scale net curtains.
My next step is transitioning from mouse-based interaction to Kinect-driven movement. The goal is to let the fluid act as a digital extension of the body, almost like a beam of light and motion that follows the dancer’s every move behind the screen. Another operator I could try for body tracking is the Optical Flow.
Under one of the reference videos, I read a comment thread by two people speaking about how to transition from mouse tracking to hand tracking and thought this might be useful information to keep note of.
10/4/26Huge shoutout to Steve for coming into the studio today, even though it’s the Easter break. He arrived with the front projection screen that he bought for my project (although he claims that it is for his 360-degree installation), and we spent the session getting it properly installed on the ceiling. While it might be too opaque in my view, considering that Steve got it for only 80 quid on eBay, it is a steal, and it turned out even better than I expected. We also spent some time discussing the technical workflow and how everything will function moving forward, so I am feeling much more confident about the next steps now.
Although my project was planned with the rear projection in mind, I was not fussy about tweaking the image to be front-projected if need be. 
Front Projection Screen
Testing the Screen Out
Switching From Mouse Tracking to Kinect Hand TrackingI tried the solution from the comment thread, and I can't believe it worked! However, the chain was only for one hand, whereas I wanted it to track both hands. 
Kinect Operator Chain
I explained my situation to Google Gemini, and it came back with Step-By-Step instructions on how I could achieve this:
Screenshot of Instructions 1
Screenshot of Instructions 2
I had to do a couple of back-and-forths with AI, including asking it to specify which Math CHOP to reference from and whether a new fragment document (the data necessary to generate that pixel, including colour, depth, and texture coordinates) is needed for a new GLSL (OpenGL Shading Language). On one occasion, I had an error appear on the colorGLSL node and could not figure out the cause of it.
The error showed as follows:
Vertex Shader Compile Results:Compiled Successfully=============Pixel Shader Compile Results:ERROR: /project2/glsl2_pixel:1: '' : syntax error, unexpected SLASHERROR: 1 compilation errors. No code generated.
Fortunately, the AI was very clever at providing debugging solutions. It turns out the problem was in the first line: the first uniform contained a forward slash when there shouldn't have been one.
Take note that AI was only used to provide suggestions and is NOT used in the final work.
Errors in the Code
After a few more trial and errors, this was the final result (refer below).
I was very happy that it worked, but there was an issue. Whenever I move my arms fast, the fluid breaks up
|
| Screenshot of Gradient GLSL Operator |
I have attached a recording of the Fluid Simulation in action.
Instead of one single operator, the fluid is solved across multiple specialised Fragment Shaders (.frag files). Using Visual Studio Code as my primary editor, I’ve been developing a chain of shaders that calculate the physics of motion in real-time:
- Advection: Playing with density.
- Divergence & Pressure: The logic that ensures the fluid acts like a physical substance, reacting to boundaries and pressure.
- Vorticity: The swirling curls that make digital smoke feel alive.
To maintain stable fluid math, I’ve set the entire pipeline to 32-bit Float RGBA, ensuring that every swirl of the fluid remains silky and immersive, even when projected onto the large-scale net curtains.
My next step is transitioning from mouse-based interaction to Kinect-driven movement. The goal is to let the fluid act as a digital extension of the body, almost like a beam of light and motion that follows the dancer’s every move behind the screen. Another operator I could try for body tracking is the Optical Flow.
Under one of the reference videos, I read a comment thread by two people speaking about how to transition from mouse tracking to hand tracking and thought this might be useful information to keep note of.
 |
| Front Projection Screen |
Testing the Screen Out
|
| Kinect Operator Chain |
I explained my situation to Google Gemini, and it came back with Step-By-Step instructions on how I could achieve this:
|
| Screenshot of Instructions 1 |
|
| Screenshot of Instructions 2 |
I had to do a couple of back-and-forths with AI, including asking it to specify which Math CHOP to reference from and whether a new fragment document (the data necessary to generate that pixel, including colour, depth, and texture coordinates) is needed for a new GLSL (OpenGL Shading Language). On one occasion, I had an error appear on the colorGLSL node and could not figure out the cause of it.
Vertex Shader Compile Results:
Compiled Successfully
=============
Pixel Shader Compile Results:
ERROR: /project2/glsl2_pixel:1: '' : syntax error, unexpected SLASH
ERROR: 1 compilation errors. No code generated.
Fortunately, the AI was very clever at providing debugging solutions. It turns out the problem was in the first line: the first uniform contained a forward slash when there shouldn't have been one.
Take note that AI was only used to provide suggestions and is NOT used in the final work.