Hermes Agent Creative Visualization Skills: P5JS, Manim, TouchDesigner

Tested three creative visualization skills inside Hermes Agent — P5JS, Manim, and the brand-new TouchDesigner MCP.

Sign up for my FREE weekly newsletter, where I spill my unfiltered thoughts on the latest AI news, cool research, and projects I'm building: https://www.onchainaigarage.com/

🐦 Follow Tonbi on X for real-time AI x blockchain updates! https://x.com/tonbistudio

The trigger for this one was a Nous Research post about a TouchDesigner skill they shipped for Hermes — TouchDesigner being the node-based real-time visuals software a lot of live shows and projection art uses. That sent me down the broader rabbit hole of what creative tooling Hermes already exposes as skills, so I tried three of them on real tasks I'd actually use on the channel: a P5JS interactive thumbnail, a Manim explainer video for how transformers work, and two TouchDesigner pieces driven through MCP — a mic-reactive visual I can use behind video intros, and a short audio-reactive music clip styled to match an older video's aesthetic. GPT-5.5 in Hermes was driving across all three. P5JS one-shotted the thumbnail (literally the thumbnail of this video). Manim took one revision pass to clean up overlapping text in v1. TouchDesigner needs the most setup — desktop install plus a non-commercial license plus MCP wiring — but once it's connected, you build entire visuals through prompts without touching the node graph yourself.

✅ P5JS interactive thumbnail — 1920×1080 hover-reactive title card with color glows, particle bursts of skill-related words, and the same color palette as my existing slide deck. One-shot generation, used as the actual thumbnail for this video.
✅ Manim video — ~90-second transformer explainer in four scenes (tokens become vectors, attention as routing, multi-head attention specialization, layers refining predictions). First pass had overlapping labels and a clipped word; one revision prompt with screenshots of the issues cleaned it up across every scene. Good enough that I'll use this skill in future MLE explainer episodes.
✅ TouchDesigner MCP — full setup walkthrough (download from derivative.ca, register a non-commercial account, drop the .toe file into the network editor, enable MCP, slash-reload Hermes to pick up the connection), then two builds: a dimmed warm-variant mic-reactive intro visual that breathes with my voice volume, and an 8-second amber / folk-aesthetic music clip with organic particle motion and glowing embers driven by the audio track from my old auto-research video.

💻 Tonbi's GitHub: https://github.com/tonbistudio
🌐 Portfolio: https://www.tonbistudio.com

Resources:
🔗 TouchDesigner (download): https://derivative.ca/download
🔗 P5JS: https://p5js.org/
🔗 Manim: https://www.manim.community/

Timestamps:
0:00 - Intro: Hermes creative and visualization skills
1:18 - P5JS interactive thumbnail build
4:30 - Manim video: transformer explainer first pass
8:30 - Revision pass to fix overlapping labels
11:00 - TouchDesigner MCP setup and connection
14:00 - Mic-reactive video-intro visual
17:00 - Amber folk-aesthetic music clip
19:00 - Wrap up

Coming Next:
Actually using these in production — Manim cuts in the next MLE explainer episode, the P5JS thumbnail style across more videos, and a longer TouchDesigner session once I've spent more time in the node graph so the prompts are more specific. Plus there are more Hermes creative skills I haven't tried yet — let me know which ones you want to see. 👀

Are you using P5JS, Manim, or TouchDesigner already, or running them through an agent for the first time? Which Hermes skills should I try next? Drop your suggestions in the comments. If this was useful, please like, subscribe, and hit the bell for more agent tooling experiments! 🦐✨

#HermesAgent #TouchDesigner #Manim #P5JS #CreativeAI #MCP #GenerativeArt #VisualGen #LocalLLM #AITools #VibeCoding

Видео Hermes Agent Creative Visualization Skills: P5JS, Manim, TouchDesigner канала Onchain AI Garage