TouchDesigner is a dynamic visual programming environment, and part of the joy of learning is the element of exploration, where we find techniques and components developed by others before us and alongside us that can help vault our designs into practice.
In this series, we are exploring the many helper tools available to us, hearing favourites from leaders in the HQ PRO community, and sharing insights and links to components considered to be indispensable in our creative process.
Getting started
We can begin our learning in the OP Snippets field, where we can find prebuilt examples for most every OP in the menu to help explain and demonstrate the possibilities of each.
From there, another cornerstone resource available to us is the Palette. A robust collection of widgets and components spanning the diverse range of creative applications we can explore with TouchDesigner.
When we customize the Palette by adding our own collected components it can really become an invaluable part of our working environment. Building your custom Palette is one of the most helpful things you can do to build your confidence and capacity in TouchDesigner.
Part 1: Color
Let’s have a look at some helpers for color design and management.
The concept of color space is fundamental to working in TouchDesigner. It’s the Grand Central junction of movement, sound and color design.
Let’s start with the stock Palette for some built-in basics and then head into the community for guidance, to assemble a collection of helper tools for color management that we can return to time and again.
Palette > Sliders
We can start by exploring the Palette options included with the TouchDesigner install. Here we will find the Slider RGB/HSV Widgets under the UI -> Basic Widgets section, we’ll see slider4rgba.
These widgets are simple and effective, with each of the four sliders adjusting one of the parameters.
Just as it seems, we can adjust the Red, Green, Blue and Alpha values and the widget returns a visual result as well as a channel output of the values that we can map forward into our projects.
Alongside the RGB sliders are the HSV equivalents, and similarly their function is the same – adjust the sliders for a color swatch and channel values, to be pulled forward into your project.
These widgets are designed to be built into larger control systems, and incorporated into control panels and interactivity scenes.
Hexler
Another simple but really helpful tool is the Hexler component by HQ PRO luminary Dylan Roscover. Type in any #hexcode value and it returns the RGB values, and vice versa – edit the RGB values to receive the appropriate hex code. Super useful in so many situations!
Hexler is available as part of Dylan’s TDComponents Repo on GitHub.
A whimsical collection of components to sprinkle some joy into your TouchDesigner shenanigans.
Dylan Roscover
Color Curves
Another fantastic tool by Dylan Roscover, the TDComponents bundle includes a tool for color grading – the Color Curves component.
ColorCurves graphically adjusts per-channel color levels of a TOP using a plotted curve, similar to many image and video editing applications.
Color Picker
The TouchDesigner Community is filled with generous contributions from members around the world, and color helpers are no exception. The first of two notable gems include the Color Picker .tox by Factory Settings. A beloved staple of many TD artists, including HQ PRO Community leader Crystal Jow, Color Picker gives you a UI you can use to navigate colour space as if you’re using Photoshop or similar.
The color picker tool makes it fast to get an accurate color when needed, which is especially nice if you’re used to Photoshop layouts.
Crystal Jow
Once again, super effective and useful for creative exploration.
Palette Picker
Another wonderfully helpful tool, created by MICHELCHROME is the Colour Lovers Palette Picker.
This component cleverly references the ColourLovers website to give you access to 4.9 Million palettes contributed by designers and other, well, colour lovers around the globe.
This is a great tool that lets you easily select from pre-made colour palettes in it’s user interface and have them output both as a texture and a set of values in a table.
Get Our 7 Core TouchDesigner Templates, FREE
We’re making our 7 core project file templates available – for free.
These templates shed light into the most useful and sometimes obtuse features of TouchDesigner.
They’re designed to be immediately applicable for the complete TouchDesigner beginner, while also providing inspiration for the advanced user.
TouchDesigner Dominant Color
TouchDesigner Dominant Color is a tool developed by Community Omnipresence and HQ PRO luminary Matthew Ragan. This component requires a bit of configuring to get up and running and the effort is well worth the results!
https://github.com/raganmd/touchdesigner-dominant-color
This treasure brings SciKit, the open source machine learning toolkit for predictive data analysis, into TouchDesigner, weaving together KMeans clustering, scikit learn, and openCV.
“Procedurally, you’ll find that that the process starts by saving out a small resolution version of the sampled file. This is then handed over to openCV for some preliminary analysis before being again handed over to sklearn (sci-kit learn) for the KMeans portion of the process.
While there is a built-in function for KMeans sorting in openCV the sklearn method is a little less cumbersome and has better reference documentation for building functionality.
After the clustering process each resulting sample is processed to find its luminance. Luminance values outside of the set bounds are discarded before assembling a final array of pixel values to be used.”
Matthew Ragan
TouchDesigner Dominant Color remains an interesting and useful tool for every pixel wizard’s pouch. Taking the time to understand this component is a worthy quest, as it incorporates several of the more advanced concepts and configurations available to us within our personal workspace.
Getting up and running requires some extensions to python libraries but fear not, for this gem was created by Matthew Ragan so we are assured of having detailed documentation and instructions to lead us through the forest of Python extensions – starting on Matthew’s website and progressing to the project’s GitHub page.
Helpful Tip: Look for the dev-env.toe file for some amazing auto-help with the extensions setup.
There’s a lot to dive into here, especially if you’re keen to learn more about python
extensions and machine learning algorithms. The documentation includes plenty of
source links along the way for deeper learning.
Conclusion
The TouchDesigner Palette is a core element, and an essential resource available to us as we build out and configure our working environment. The tools introduced here will be helpful in most every context where our interactive digital work needs to align with other elements such as branding and marketing materials, websites, brochures, as well as every application and intention that demands color accuracy.
