Inspired by: Okamirufu Vizualizer
The signature post-processing technique used by Okamirufu Vizualizer to give generative visuals a “rendered,” high-end feel. It uses time-delayed RGB splitting to create movement-based color separation.
Operator Families in this Recipe
- TOPs (Texture Operators): Time-based caching and feedback loops.
Part 1: Movement-Based RGB Split
Instead of a static lens effect, this technique separates colors based on time, making fast-moving objects “ghost” in different colors.
- Three Cache TOPs: Connect your final Render TOP to three Cache TOP nodes in parallel (connect the same output to all three).
- Cache 1: Index →
0, Cache Size →2(current frame). - Cache 2: Index →
-5, Cache Size →10(5 frames back). - Cache 3: Index →
-10, Cache Size →15(10 frames back). - Note: Each Cache TOP must have a Size larger than the absolute value of its Index, or the indexed frame won’t exist yet.
- Cache 1: Index →
- Reorder TOP: Connect all three Cache TOPs to a Reorder TOP.
- Output Red →
Input 1(current frame, Red). - Output Green →
Input 2(5 frames ago, Green). - Output Blue →
Input 3(10 frames ago, Blue).
- Output Red →
- The Result: You now have an RGB split that only appears when objects move.
Part 2: Growth Feedback Loop
To make the visuals “bloom” and grow over time:
- Feedback TOP: Connect your Reorder TOP to a Feedback TOP.
- Transform TOP: Add a Transform TOP after the feedback.
- Scale →
1.005. - Rotate →
0.1.
- Scale →
- Level TOP: Add a Level TOP after the transform.
- Opacity →
0.98.
- Opacity →
- Blur TOP: Add a Blur TOP after the level.
- Filter Size →
2(Small).
- Filter Size →
- Composite TOP: Connect your Reorder TOP and the Blur TOP to a Composite TOP.
- Operation →
ScreenorAdd.
- Operation →
- Close the Loop: Drag the Composite TOP back onto the Feedback TOP.
Part 3: Final Polishing
- Luma Blur TOP: Connect your composite to a Luma Blur TOP for a final soft glow.
- HSV Adjust TOP: Use this to boost Saturation Multiplier and slightly shift the Hue for a more psychedelic feel.
Troubleshooting
- “It’s getting too bright!” - Lower the Opacity on your Level TOP or the Brightness 1 of the feedback.
- “The trails aren’t moving.” - Make sure the Transform TOP has a non-zero Scale or Rotate.
Parameter Tuning & Behavior
| Parameter | Behavior |
|---|---|
| Cache Index offset | More negative values (e.g. -10 vs -2) = more pronounced time-based color separation (ghosting). |
| Feedback Scale | Higher = trails expand faster; Lower = tighter, more concentrated trails. |
| Feedback Rotation | Higher = more spiral-like motion in trails; Zero = straight expansion. |
| Level Opacity | Higher = trails persist longer (more “ghosting”); Lower = trails fade out quickly. |
| Blur Filter Size | Higher = softer, glowier feedback; Lower = sharper, more defined trail edges. |
Network Architecture
To visualize how the data flows, here is a map of the final network:
[ INPUT ]
Render TOP
│
├─▶ [ Cache TOP ] (Index 0, Size 2) ──┐
├─▶ [ Cache TOP ] (Index -5, Size 10) ──┼─▶ [ Reorder TOP ] (R, G, B Split)
└─▶ [ Cache TOP ] (Index-10, Size 15) ──┘ │
▼
[ TOP FEEDBACK LOOP ] ◀────────────────────────────────┘
│
▼
[ Feedback TOP ] ──▶ [ Transform TOP ] ──▶ [ Level TOP ] ──▶ [ Composite TOP ]📚 Learning Path · Stage 2 - Your First Visuals · step 12 of 44
(y) Return to Recipes & Projects | (y) Return to TouchDesigner | (y) Return to Home