The right way of doing this? A white circle from three RGB circles

Hey,

I’m a complete beginner in touchdesigner and i’ve watched some tutorials and started playing around in the program.
I want to create this white circle that is made up by three overlayed circles of the RGB colors. The starting idea is that the three circles move (with the help of noise) slightly different and by doing that they break up into their components slightly.
I’ve managed to make this but im sure im doing it in a way that isnt very good. Im also not getting the background to be black in this way. The way im converting from SOP to TOP might be the problem.

Thankful for any help!

Hi @adisbadis,

A first observation, instead of using the OP Viewer TOP, create a render steup using Geo COMPs, a camera and the Render TOP.
Our curriculum has a good introduction to rendering that you might find helpful:

Otherwise, creating such a setup in 3D - while seemingly simple - involves a few steps.

3D setup

First I would use a Circle SOP set to “Open Arc” and apply outward normals so that the noise is not just applied in the depth or z direction.

Next, apply the noise as before and pass it to the Geometry COMPs to set them up for rendering.
Use a Constant MAT as the material and on its Common Parameters page, toggle Blending on and set the Source Colour and Destination Colour parameters to “One”. Next, set the Wire Frame parameter to “GPU Tesselated Wire Frame”, which will allow you to control the Line Width. Alternatively, you can use a Line MAT with more options for rendering.
The camera you use for this should be orthographic, which can be set on the View page of the Camera COMP’s parameters.

Compositing only

Another alternative would be to use composing only: Create a single Circle TOP and set the Fill Colour to black while changing the Border Colour to white and setting a Border Width of your choice.
Feed this into 3 Displace TOPs which, as a second input, would use 3 Noise TOPs with very low Amplitude but high Period and a different Seed for each. Also make sure that the Noise’s Monochrome parameter is off and the Noise’s Pixel Format on the Common Page is set to at least “16-bit float (RGBA)”. With only 8 bits per channel, the displace effect would be too abrupt.
Finally, merge all 3 Displace TOPs into a single Reorder TOP where each input can be mapped.onto an Output color channel.

Hope this helps
Best
Markus

Thank you @snaut for you extensive answer!

I tried out both of your solutions with varying results - I think i might have been unclear though with what it is I’m trying to achieve.

When trying your first way where 3d geometry is applied i got everything working but the Orthographic perspective mixes the colors great but it keeps the circle in its perfect round shape. I want the 3 RGB circles to deform and actually bend differently from one another. Maybe i just made some mistakes though?.. I am not sure but it also feels wrong to enter the 3d world when i want a 2d result?

The compositing way works great!

I get a great result, apart from the harsh pixel edges but that is no problem. My idea though is for the circles to then also avoid a certain point (which later will be a person with a tracker) which makes me believe that the SOP way might be the best no?

I really appreciate the help!

Hi @adisbadis,

for the compositing approach, did you change the Pixel Format for the Noise TOPs to 16bit rgb? That should resolve the pixelated edges of the Circle - alternatively also increase the resolution of the Noise TOP to match the Circle’s resolution. The first input of the Noise TOP can be used to set it’s resolution - by default it will add the noise to the circle but this can be switched on the output page by setting the RGB parameter to Noise.

For the orthographic problem this comes from how the noise is applied by default in the direction of the circle’s normals. To have the Normals point away from the circle, I take the circle’s point positions via a SOP to CHOP and then reapply it as normals to the geometry via a CHOP to SOP. Have a look at attached file for this technique.

cheers
Markus
base_rgbCircle.tox (1.6 KB)

Thank you!
I of course had forgotten about the resolution in the TOP noise.
And I only had to change the “Attribute scope” to N in the CHOP to SOP and the problem was sorted:)

Cheers!

1 Like