Scalable 3D circle with exactly 3 pixel edge

General TouchDesigner Discussion
1

Looking for techniques to achieve this:

I want to render a bunch of circle SOPs with borders on a plane in orthographic 3D space. The trick is that I want each circle to have an three edge rings (concentric circles of a different color) of exactly 3 pixels each. What I mean is that if you cut the circle in half, it will be a solid color except 3 layers of 3 pixels of a different color at each edge. If I change the radius of the circle, I want the edge to remain the same thickness. Obviously, mapping a simple texture with an edge makes the edge get thinner when you scale the circle down.

I’m trying to do this with nodes, no shaders. Different textures, shaders or SOPs are fine. The three pixel number is arbitrary, just trying to simplify the problem.
circle circle2

2

@Ivan

I think this is a good case for the line MAT and instances:

image
image1282Ă—697 44.4 KB

Well, at least when it comes to the outline portion. You might end up needing to do another set of instances for the fill.

3

Your technique looks perfect for one layer of border, but how can I get that green circle to always butt right up to the red circle?

I may have over-simplified my problem. Going to edit the question to include the three layers of border.

4

@Ivan - I’ve done this with an expression, but you could get there with only ops:

image
image703Ă—509 37.4 KB

(op('render1').width - ( (op('line1').par.widthnear * me.digits) * 1.5 )) / op('render1').width

This would need to be adjusted to account for your aspect ration / ortho width - but you could get all of those pars with CHOPs and do the math there

5

Given that it references the widthnear par, that should adjust as you change the line material:

image
image1552Ă—761 104 KB

image
image1224Ă—595 74.8 KB

EDIT

This doesn’t handle the changing of the original circle’s size well… so that expression would need to change to account for the original proportion of the input circle.

6

Couldn’t get the above to work nicely. To be fair, it might have been my lack of patience and my inexperience with some of the systems involved. Ended up building a MAT texture out of circleTOPs that is based on the scale of the circle GEO it’s going to be applied to. Works well visually, and around 1ms cook time when the colors are changing. Not sure if that’s terrible or not.

snip
snip569Ă—572 1.13 MB

7

Ohhkay - well - saw this just in time before calling it a night :slight_smile:
hmmmm.tox (2.4 KB)

For completeness 2 different approaches both involving a Tube SOP. First calculates the diameter of one end of the tube to match the 3 pixels per circle, the other one calculates the texture scale…

image
image1542Ă—891 206 KB

Cheers
Markus

1 Like
8

Ohh - very fun approach @snaut!

9

Very nice! Runs about 5 times faster than mine.

My final question is how to best make the inside of the circle an opaque color, separate from the edge color. (I know this reveals my lack of SOP/MAT skills but I will live with that embarrassment)

10

Inside color is only possible with option 2. For that I used a Layout TOP to add the background color, changed the texture repeat on the Constant MAT to Hold and halfed the scale on the Texture SOP.
Whats missing is Instancing. This can’t be instanced…

Cheers
Markus
hmmmm.tox (2.3 KB)

11

Ah, this is amazing. I am starting to understand textureSOP, and flattening the tube with 0 radius on one end is so smart