That pepepepebrick is an extremely talented graphic designer is evident in the impressive body of work he has been posting on his Instagram account. Equally remarkable is the humor and whimsy in each piece, rooted in his Speculative Design mindset. So it's our very good luck that after eight years of freelancing as a graphic designer, he encountered TouchDesigner during a lecture and began teaching himself through YouTube tutorials.Things escalated quickly, leading him to pivot entirely into interactive design, with TouchDesigner becoming his go-to tool. We are excited to share our conversation with him!
From Graphic Design to Interactive Programming
Derivative: Can you tell us a bit about your background and how you came to TouchDesigner?
Pepepepebrick: For the past eight years, I’ve been working as a freelance designer, spanning graphic design, branding, illustration, UI, and 3D design. Three years ago, I discovered TouchDesigner at a lecture and began teaching myself through YouTube tutorials. Initially, my goal was simply to apply it to my visual design projects—creating motion posters, video effects, or generative textures. However, as I unlocked more advanced techniques, I decided to take the leap into the realm of interactive design.
嗨，我是 pepepepebrick，來自台灣。過去我從事個人設計接案已經有8年，包含平面設計、品牌設計、插畫、UI、3D 設計等。三年前我在一場講座認識了 TouchDesigner，便開始跟著 Youtube 上的教學影片自學，起初是希望應用在視覺設計專案中，例如製作動態海報、影像特效、隨機紋理等。後來學習到更多技術後，便決定開始嘗試「互動設計」領域。
Bye-Bye, Adobe!
Derivative: How does TouchDesigner fit into your toolkit what have the benefits been?
Pepepepebrick: Given my graphic design background, I often look at TouchDesigner as a "math-based imaging tool." For instance, where I used to color-grade in Photoshop, I now use Level and HSV Adjust. Traditional visual effects are replaced by Feedback, Edge, and Displace. Instead of creating vector graphics in Illustrator, I now use the Trace SOP to capture point coordinates. I used to rely entirely on Blender for organic 3D shapes, but now I can generate diverse object arrays using instancing in Geometry. And animations that once required After Effects can now be generated instantly with Noise, creating all kinds of 2D and 3D motion. The best part? Everything is rendered in real-time, runs within a single software, keeps file sizes incredibly lightweight, and is ready for immediate output!
基於我的平面設計背景，我時常會把 TouchDesigner 視為一種「以數學為基礎的影像工具」。例如：過去我會使用 Photoshop 調色，現在則是用 Level、HSV Adjust 調色，視覺特效則可以用 Feedback、Edge、Dispalce 取代；過去必須用 Illustrator 製作向量圖案，現在則會用 Trace SOP 擷取點座標；過去只能用 Blender 製作有機的 3D 造型，現在則可以用 Geometry 的 Instance 功能製作多樣的物件陣列；過去需要用 After Effects 才能製作動畫，現在則可以用 Noise 快速製作出各種2D與3D的動態。重點是，這一切都是即時渲染的、都在同個軟體中運行、檔案很輕量化、還可以馬上輸出！
speculative Design: What If...?
Derivative: What is your approach to the creative process in your work?
Pepepepebrick: When it comes to creation, I lean more toward rational design thinking rather than purely whimsical art. I habitually break a piece down into three distinct facets: Subject, Technology, and Visual Style. For instance, I might draw inspiration for my subjects from history books or animal channels, gather technical ideas from YouTube or Instagram, and look for visual style inspiration on Pinterest or in movies. From there, I cross-match multiple options within these three categories to find the most fitting combination. Finally, applying a "Speculative Design" mindset, I distill the core concept into a single "What if...?" question. This helps me verify if the concept is simple and clear, and whether it sparks curiosity in the audience. Moving forward, I’d like to share the different ideation processes behind three of my recent works.
在創作方面，相較於天馬行空的藝術，我更喜歡理性的設計思考。我習慣將一件作品的構成拆解為「主題+技術+視覺風格」三個面向。例如我可會在歷史書籍或動物頻道尋找主題靈感、在 Youtube 或 IG 上尋找技術靈感、在 Pinterest 或電影中尋找視覺風格靈感。接著，我會在這三個分類的多個選項中相互交叉配對，尋找出最合適的組合。最後，再用「推測設計」的思考方式，透過一個「如果__會怎樣？」的問句來彙整核心概念；這能讓我檢視作品的概念是否簡單且清晰，以及它是否能引起觀眾的好奇心。接下來，我會分享近期三件作品的不同構思方式。
Derivative: Could you share some of your favorite projects and walk us through the process behind their development?
Pepepepebrick: Absolutely, the following I think provide a good overview of my work and how TouchDesigner was useful.
What If a Map Could Become a Musical Instrument?
This project allows users to interact with it as if they are "scrolling through Google Maps," instantly changing the selected region in the viewport. The system calculates the ratio of three colors onscreen—gray, green, and blue—based on three color-coded zones: man-made structures, vegetation, and water bodies. This data is then used as interactive signals to drive the music.
Since I don't have an extensive programming background, I skipped the heavy "engineering" route of fetching external API data. Instead, I used a Web Render TOP to bring the browser's live visual directly into TD. From there, I used a Chroma Key TOP to isolate and filter specific colors, and finally, an Analyze TOP to calculate the percentage of each color on screen.
The development process started with the subject of "maps." I then opted for "surface area analysis" as a lower-technical-barrier approach. Finally, because I wanted the visual-to-audio interaction to be intuitive and easy to grasp for the audience, I established a "data visualization" visual direction.
這件作品能讓使用者以「滑 Google 地圖」的互動形式，即時改變視窗所選的地區，並依照「人造建物、植被、水源」三種不同顏色的區域，計算灰、綠、藍三種顏色在畫面中的比例，藉此作為音樂的互動訊號。由於我沒有足夠的程式背景，因此不是選用輸入外部資料這種專業的「工程」作法，而是以 Web Render 直接輸入瀏覽器中的影像，接著用 Chroma Key 提取與過濾特定的顏色，最後透過 Analyze 分析該顏色在畫面中的佔比。這件作品的發展，是先有「地圖」這個主題，接著選用技術門檻較低的「面積分析」作法，最後由於希望讓視覺驅動聲音的互動過程更淺顯易懂，因此設定了「資料視覺化」的視覺風格。
What If Your Code Could Be a Bug?
In a collaborative project with Microsoft Developer, I approached the concept with software engineers as the end users, aiming to let them hatch digital beetles while they write code. The project was built on a technical foundation of VS Code and Python, using the Text DAT as the primary method for data (text) input. Inspired by the act of debugging, I developed the theme around the word "Bug." Finally, considering performance and versatility, I opted for a flat, web-style visual aesthetics.
For the visual composition, I heavily relied on the instancing feature in the Geometry COMP to array characters onto the outline of the beetles. Furthermore, the linear shapes of the body, legs, and horns were entirely generated via Python scripting within a Script SOP combined with a Noise SOP. This approach eliminated the need for heavy external 3D models, keeping the project file incredibly lightweight while introducing a beautiful sense of randomness to both form and color.
在與 Microsoft Developer 合作的專案中，我則是以工程師為使用者去發想，目標是讓他們可以一邊寫程式，一邊孵化甲蟲。因此我是先以 VS Code 與 Python 為技術基礎，選用 Text DAT 作為主要的資料（文字）輸入方式，並以 Debug 的行為發想出「Bug」這個主題。最後綜合考量效能與通用性，選擇了扁平化的網頁視覺風格。在畫面組成上，我主要是以 Geometry 的 Instance 功能，將字元陣列於甲蟲的外觀輪廓，並且身體、腳與角的線條造型也都是用 Script SOP (Python) 與 Nosie 寫出的。它避免了嵌入外部3D模型的需求、讓專案檔相當輕量化，也增加了造型與顏色上的隨機感。
Composing a Melody Over 500 Years?
This project was initially sparked when I came back across a photograph of an "oracle-bone script clam," whose textures reminded me of sci-fi illustrations. After digging through related academic papers, I discovered that while the pattern's resemblance to ancient oracle characters was merely a coincidence rather than historical, I unexpectedly learned a lot about the mathematical rules behind these natural textures.
Driven by this, I began using Noise and Feedback TOPs to replicate these organic patterns found in nature, overlaying them onto clam images with an illustrative visual style. For the interactive element, I used a Cache TOP and a Subtract TOP to capture the dynamic growth of the textures in real-time, then utilized the Blob Track TOP to extract those changes as signals to drive the audio. In other words, I approached this project with the final visual outcome as the priority, selecting interactive techniques that were elegant yet technically straightforward to implement.
這件作品起初是因為剛好看到一張「象形字文蛤」的照片，覺得上面的紋理就像科幻風格的插畫。在學術網站尋找相關的論文後，發線雖然只是剛好跟象形字很相似，並非具有歷史意義，但也意外閱讀到了許多紋理的數學規則。因此我開始用 Noise 跟 Feedback 臨摹大自然中的紋理，並以嘗試以插畫的視覺風格疊加在貝殼的影像上。最後讓長出紋理的過程以 Cache 跟 Subtract 做動態捕捉，再用 Blob Track 抓取作為聲音互動用的訊號。也就是說，我是以最終的視覺效果為前提，選擇了執行上較容易實現的技術。
Cross-Creating Visuals and Sound
Derivative: How does the sound design aspect of each piece come about?
Pepepepebrick: Once the visuals are about 80% complete and the desired interactive signals have been extracted, I begin establishing a fitting musical genre based on the visual style and the signal dynamics. From there, I select appropriate modules within VCV Rack. For example, a continuous signal fluctuating between 0 and 1 is ideal for mapping to pitch, timbre, or effects parameters, whereas a binary, instantly flashing 0/1 signal is perfect for driving beats or sequencers.
For TouchDesigner users, I think you can easily visualize each module in a modular synth as an individual node, where you can patch inputs and outputs for signals or CV (Control Voltage) at any point. Transmitting these signals between the two software environments is incredibly seamless using OSC. Once the interactive signals are linked, I listen to the real-time responsive audio while polishing the remaining 20% of the visuals—tweaking textures, contrast, color palettes, and layouts according to the rhythm and mood, aiming to achieve perfect harmony between sight and sound.
視覺完成約80%、也提取到想要的互動訊號後。我會依照「視覺風格」及「訊號的變化量」來設定合適的音樂風格，並在 VCV Rack 中挑選合適的模組合成器；例如介於0~1之間波動的訊號就適合用在音階、音色或效果器，0/1瞬間閃爍的訊號就適合用在節拍或序列器。對於 TouchDesigner 使用者而言，我認為可以把模組合成器的一顆顆模組想像成一個個節點，可以在前後加上訊號/電流的輸入與輸出。在這兩個軟體間，也可以很方便的透過 OSC 傳輸訊號。互動訊號銜接後，我會再邊聽即時的互動音訊，依照音樂的節奏與氛圍完成剩下的視覺，例如調整紋理、對比度、配色與排版等，盡量讓視覺與聲音達到和諧。
How to Ideate a Project’s System Architecture?
Derivative: What is your approach to personal creative projects compared to commercial projects and how is your workflow influenced?
Pepepepebrick: For my personal creative projects, I usually initiate development from one of three starting points: Subject, Technology, or Visual Style. I build a Minimum Viable Product first, and then gradually refine it while clarifying the conceptual direction.
For commercial projects, however, I adopt a reverse-engineering approach. I start with the final delivery and output technical specifications, mapping backward to design the required system architecture. From there, I integrate script systems, interaction logic, audio spectrum analysis, and user interfaces (UI). I also construct 3D stage simulations, setting up virtual cameras to simulate the audience's perspective. This allows me to build a highly precise and robust system all at once before I even begin producing the actual visuals.
To make this happen, I must first look through the rational lens of a "Project Manager" to define goals and constraints. Next, I step into the shoes of an "Engineer" to build a logical, bulletproof system. Only then, finally, do I embrace my identity as a "Creator" to freely express and craft the visual content.
總結來說，在個人的創作專案中，我通常都是從「主題、技術、視覺風格」三者之一開始做發展，先做出最小可行性的原型後，再逐漸改進並釐清概念方向。但在商業專案中，我則是會先以最終需要交付或輸出的檔案規範為基礎，往回反推所需的系統架構，再加入腳本系統、互動系統、音樂頻譜分析與使用者介面等，並製作3D舞台模擬、架設攝影機或觀眾視角模擬，一次性完成整密的系統，最後才開始製作影像。我必須先以「專案經理」的理性視角確認目標與需求；接著再以「工程師」的角度建立邏輯清晰的系統；最後才會是以「創作者」的身份自由的創作內容
How to Learn TouchDesigner?
Derivative: How did you gain your TouchDesigner skills and what advice would you give to those who are just starting out?
Pepepepebrick: All of my TouchDesigner knowledge and skills were acquired through free learning resources on YouTube, heavily relying on real-time subtitle translations. I am incredibly grateful to the pioneers and artists who so generously share their knowledge.
For complete beginners, I highly recommend starting with the “TouchDesigner Beginner Course” series. Once you have a fundamental grasp of nodes, you can move on to channels like elekktronaut (bileam tschepe) and Noto The Talking Ball (Kohui). For more advanced content, there are supermarket sallad, Mini UV, Scott Allen Visual Art, Okamirufu Vizualizer, and The Interactive & Immersive HQ. When it comes to interactive design, I also recommend Torin Blankensmith's "MediaPipe Plugin" and Omri Cohen's "Using VCV Rack with TouchDesigner."
我所有的 TouchDesigner 知識跟技術，都是在 Youtube 上的免費學習資源所獲取到的，並且依賴著即時字幕翻譯，真的很感謝這些前輩與藝術家不吝嗇的分享。如果是零基礎的入門者，我建議先觀看 “TouchDesigner Beginner Course” 這個系列；對節點有基本的認識後，可以在接續觀看 elekktronaut (bileam tschepe) 與 Noto The Talking Ball (Kohui) 的頻道；更進階的還有 supermarket sallad、Mini UV、Scott Allen Visual Art、Okamirufu Vizualizer 與 The Interactive & Immersive HQ。在互動設計方面，我也推薦 Torin Blankensmith 的 “MediaPipe Plugin” 與 Omri Cohen 的 “Using VCV Rack with TouchDesigner” 。
These tutorials guide viewers step-by-step through building networks. If you encounter version differences or bugs, answers can usually be found in the comments section.
In the early stages of my learning, I committed to practicing for three hours every single day for three consecutive months—following one tutorial per day just to familiarize myself with each node. In the intermediate stage, I challenged myself by combining techniques from two different tutorials to practice building more complex logic and systems. Now, in the advanced stage, I put visuals at the core: I first look for aesthetic inspiration on Pinterest, deconstruct the visual elements, and then use keywords to find the right technical tutorials on YouTube, evolving my personal style through the process of emulation.
這些教學影片都會帶著觀眾一步步建立節點，如果有版本差異或遇到問題，通常也可以在留言區找到解答。在學習初期，我是連續3個月每天找一部教學影片跟著練習3小時，單純熟悉每個節點；中期我會試著結合兩部的教學影片所用的技術，練習更複雜的邏輯與系統；後期我才會開始以視覺為核心，先在 Pinterest 上尋找風格靈感，並解析畫面的構成要素，最後再用關鍵字在 Youtube 上找合適的技術，嘗試從臨摹中發展出個人風格。
Start by Completing Small Projects!
For artists who are just starting to explore TouchDesigner, I believe that "consistent creation" is key. Rather than spending months polishing a single "perfect" piece, I prefer creating numerous small, experimental projects (Minimum Viable Product), spending just a few days on each, with the sole goal of outputting a 15-second clip.
This approach gives emerging creators the freedom to boldly experiment with a wider range of styles and technologies, allowing them to gradually find their own direction. Along the way, you’ll find that certain pieces spark much stronger engagement from the audience. This indicates greater market potential, giving you a clear sign of which concepts are worth scaling up into full, mature works in the future.
對於剛開始探索 TouchDesigner 的藝術家，我認為「持續創作」是最重要的。相較於花好幾個月雕琢一件完美的作品，我更喜歡做很多小的實驗性作品（最小可行性產品），每件作品都只花幾天，然後只以輸出15秒的作品影片為目標。這個模式能讓初期的創作者勇於嘗試更廣泛的風格與技術，可以慢慢尋找適合自己的發展方向，你會發現某些作品得到更熱烈的反饋，也代表它有更大的市場潛力，未來可以再考慮把它發展成更完整的作品。
Follow pepepepebrick on Instagram
