Tron OF Animations

Hey after reading the intressting making of the Tron visuals =>

I tried to figure out how he got such nice arcs like in the image below.
Just out of curiosity :slight_smile:

What I got so far.

The post mentions multisampled FBOs to fix the non-antialiased polygons.
Anyone has a clue what this means?

It’s also a mystery for me how he got the nice gradients.
I did a bad attempt with textures.

Below is my code so far.

void testApp::DrawArc(float startAngle,float endAngle,float innerRadius, float outerRadius,bool clockwise)  
	// Got to center.  
	   ofRotateZ(ofGetElapsedTimef() * 100 * ((clockwise) ? 1 : -1));  
		float x,y;  
		float angle;  
		// Draw outer circle  
		for (float i = startAngle; i < endAngle; i+=0.1){  
			angle = i;  
			 x = outerRadius * cos(angle);  
			 y = outerRadius * sin(angle);   
		// Draw inner circle  
		for (float i = angle; i >= startAngle; i-=0.1){  
			angle = i;  
			x = innerRadius * cos(angle);  
			y = innerRadius * sin(angle);   
void testApp::draw(){  
       // doesn't work   
	DrawArc(PI / 2,PI,100,120,true);  

in the article i read (if i remember well) that as renderer for trony they use"">houdini instead of simple opengl…
but have no idea what this means (if something was exported in houdini or there was some magic API to render)

by the way, i’m really interested in this question too

you have to use texture , not draw polygons !


off course you can do this with pre-rendered textures but the article mentions polygons.
quote from the article (

I found myself moving to multisampled FBOs because the non-antialiased polygons were just too ugly to work with, and we needed to make film-resolution renders. In fact, this is the highst res I’ve ever seen my apps render.

try using 007 ofMesh: with color coordinates you can get the gradients.

the mutisampled fbos can also be found in 007, it means that the fbo generates the lines at for example 4x the real size and then reduce them to get antialiasing, you can get the same effect actually without using fbos by setting the window to do antialiasing. in main:

window.setGlutDisplayString("rgba double samples>=4 depth");  

Thx Arturo!

It seems 007 release will brings a lot of cool stuff.
Will do a checkout tomorrow.

Hey zuppa

So first of all the fbo is a way to pre-render your images/shapes.
Crudely put their workflow was (the way I understand it)

  1. pre-render with the fbo, probably just in multipass to get the ultra high quality they need
  2. display the stuff
  3. export the animations
  4. open up the animations in Houdini and let some 3D wizz-kid add extra effects to this.

The screenshots in the post are pre-houdini though.
So no need to worry about that.

This is what i’ve come up with so far in my primitive out-dated language: AS3 :wink: => [flash=550,400][/flash]
Oh, and this is what it ended up looking like in the movie! =>

i’m using his arcdraw code to draw sort of a pie chart. but there seems to be an error, does anyone know what is wrong?

the segments in the screenshot should build one circle, but i got these gaps

![]( 2011-07-18 um 21.59.26.png)

No test, just a quick opinion.

Maybe because of step 0.1 ? I mean that 0.1 rad = 5.7°.

thank you, using ofDegtoRad(0.5f) as step seems to improve the arc precision

BTW after the input from Arturo I finished this test and put a post about it in the examples forum