One of the challenges of integrating Notch Blocks in TouchDesigner was that scaling up the interactivity could be tricky. If you needed 10 interactive touch points, whether from Kinect joints or touch screens, you would need to expose 10 different sets of transform positions. Then you’d import the Notch Block into TouchDesigner and have to map every parameter by hand. This could often take a while and made it hard to imagine scaling content up to higher amounts of interaction. With the new Exposable Arrays feature, this is a thing of the past!
Exposable Arrays
Recently, on our YouTube channel we released a video introducing you to Exposable Arrays and how to use them with Notch. It goes over the basics of Exposable Arrays, but you may be thinking to yourself “Elburz, that’s all fine and dandy, but you just had a bunch of white sphere appearing…” I can’t argue with that! Today I’m going to take those techniques and show you how to apply them to some more impressive content.
If you haven’t seen our YouTube video about it, I’d recommend watching that for a deeper dive into the nuts and bolts of Exposable Arrays.
Interactive Starter Pack
What makes all the examples below possible is a new free pack of Notch projects released by Notch called the Interactive Starter Pack. It’s full of 14 project file templates built in Notch that demonstrate tons of interactive techniques being applied to high-end content. I’d highly recommend downloading it ASAP! Everything is clearly laid out so you can use them as is or take the techniques and implement them into your own projects.
Here’s just one of the examples called Neon Balls:
Let’s integrate!
Let’s start by integrating the Neon Balls example into TouchDesigner. Open up 8a – Neon Balls.dfx in Notch. Before we go ahead and export this as a Notch Block, we’ll need to setup our Exposable Array. The great thing about many of these interactive examples is that they already have the infrastructure setup for using arrays. All we have to do is create an Exposable Array and connect it to the bottom left input of our Array Copy node:
Now we can set a few properties on the Exposable Array. The first is that I’ll change the Num Transforms to 20. That way I can feed in 20 data points and have 20 interactive neon balls appear. Then I’ll expose the Transform Data property so that it can be accessed in TouchDesigner:
Now we’re ready to export this to TouchDesigner! These projects are already built enough that you can get up and running with them in moments. I’ll go to Project in the top menu and then Compile Block for Media Server… From here I’ll give it a path to my desktop and hit Ok
We can now make a new TouchDesigner project, drop a Notch TOP into it, and point it at the Notch Block we just compiled.
If it looks stretched, then you can manually set the resolution of Notch TOP to match the resolution of the scene from Notch, which is 3840×1152:
Now comes the fun part. If you’d like to follow along with my TouchDesigner project file, you can download it below.
On the parameter page named 8a – Neon Balls, we can see the property we exposed named Transform Data. This is where we can pass in our data just as we would when we’re instancing. We can pass in multi-channel and multi-sample CHOP data. This allows us to scale up our content without going through the process of mapping every individual element of it. You’ll need all 9 transform channels always present, including XYZ translate, XYZ rotation, and XYZ scale. For any channels you’re not using, a Constant CHOP can come in handy. I usually start this process with a Constant CHOP with all the channels I’m going to need already created, the scales set to 1, and in the Channel page of parameters, I set the length manually based on how many Num Transforms I set in Notch:
Then when I want to overwrite one, I can use Replace CHOP or a nice trick with the Merge CHOP and it’s Duplicate Names parameter set to Replace Last with First. This basically does a similar job as the Replace CHOP except that I can plug in multiple different inputs and have all the channels replace properly, instead of having to make multiple Replace CHOPs for every source CHOP that I have.
In this example, I’m going to create an audio reactive set of collision balls that will shake up the scene based on the microphone input. First I’ll need my audio analyzed. I’ll create an Audio Device In CHOP, connect it to an Audio Spectrum CHOP to get my frequency analysis:
Since this is audio data, it’ll be running at 44.1khz, which is much faster than our normal sample rate of 30 or 60 samples per second. I’ll use a Resample CHOP to both resample this down to 60 samples per second (since I’m working at 60fps) and also to stretch it to 20 samples, since that’s how many Num Transforms we set in Notch:
Then I’ll use a Math CHOP to rescale these values to match the 3D scene from Notch. In Notch, the left and right boundaries of the scene are -33 and 33 units, and the top and bottom are 10 and -10. So for this ty position, I can use the Math CHOP to scale these from 0 to 1 into -10 and 10:
Then we can plug it into our Merge CHOP to overwrite the channel from the Constant CHOP:
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.
The last piece of data we need is a ramp to layout our interactive neon balls from the left side of the screen to the right. I can use a simple Pattern CHOP to create this ramp really quickly, already knowing that I need it to be 20 samples and stretch from -33 to 33:
Then we can merge that into our Merge CHOP and it will overwrite the blank tx channel:
Time for the final step! We can take our Merge CHOP and drag and drop it onto the Transform Data property we exposed:
Great! Now we’re ready to speak into the microphone! I’ve setup a Trail CHOP here to watch our audio levels as I speak into the mic.
Next steps
Once you’ve got this basic setup running, you should have a good handle on how Exposable Arrays work. They’re an extremely easy way to pipe a ton of data into a Notch Block and create interactivity that not only looks great, but can scale. You can harness the beauty of Notch’s content workflow, with the ability to connect just about anything to TouchDesigner for interactivity. You can replace the audio here with Kinect data, Hokuyo data, web API triggers, Zed cameras, Leap motions, and more. I’d highly recommend taking a look at the Interactive Starter Pack from Notch. We’ll be using it over the next few blog posts to build more interactive examples like this using Notch Blocks and TouchDesigner:
Wrap up
We can’t say enough great things about using Notch and TouchDesigner together. We’re already seeing huge productions and smaller installations adopting the workflows because of the possibilities they give you when used together. I hope this inspires you to take the plunge and use these two amazing softwares together!
