Introduction to openFrameworks

12 January 2010

Author

Jan Vantomme

I’ve been playing around with openFrameworks for a while and I decided to write some articles about it. Coding in openFrameworks feels a lot like working with Processing so it might be easy to convert some of my old Processing sketches to openFrameworks. In this first article I’m going to compare some of the functions of openFrameworks to those of Processing to show you how easy it is to move from one platform to the other.

Setting the size of the window.

Processing: size(800, 600, OPENGL);
openFrameworks: ofSetupOpenGL(&window, 800, 600, OF_WINDOW); function is called in main() in the file main.cpp.

Declaring Variables

Processing: Declare the variables you need right after you import the libraries you need.
openFrameworks: Declare variables in the file testApp.h, after the line void windowResized(int w, int h);.

Background Color

Processing: background(0); will set the background of your sketch to black. You need to call the function inside draw() to draw the background each frame.
openFrameworks: Call ofBackground(0, 0, 0); once inside the setup() method. openFrameworks will draw the background automatically each frame. You can disable this by calling ofSetBackgroundAuto(false) within setup() in the file testApp.cpp.

Anti-Aliasing

Processing: use smooth() within draw(). If you use OpenGL you can also call hint(ENABLE_OPENGL_4X_SMOOTH); in setup().
openFrameworks: Anti-Aliasing only works on strokes, not on filled shapes. Enable Anti-Aliasing by calling ofEnableSmoothing(); in setup()

Random Numbers

Processing: use random(0, 255); to generate a random number between 0 and 255.
openFrameworks: the random function has a “of” prefix, just like most of the functions in openFrameworks. ofRandom(0, 255);

Fills and Strokes

Processing: use fill(255); to set the fill color to white and stroke(128) to set the stroke color to a neutral gray.
openFrameworks: filling a shape with a color is a little different. You need to set the color first by calling ofSetColor(255, 255, 255); and ofFill(); after you set the color. To draw the stroke of your shape you need to call ofNoFill(); after you have set the color.

Drawing Circles

Processing: after you have set the stroke and fill, use ellipse(50, 50, 20, 20); to draw a circle with a diatmeter of 20 at (50, 50).
openFrameworks: you can use ofCircle(50, 50, 10); to draw the same circle. You could also use ofEllipse(50, 50, 20, 20);. If you want to draw a circle with a stroke you will need to call the function to draw the circle two times. Once for the fill and once for the stroke. Code below shows you how this is done.

ofSetColor(255, 255, 255);
ofFill();
ofCircle(50, 50, 20);
ofSetColor(128, 128, 128);
ofNoFill();
ofCircle(50, 50, 20);

Comparing Graphics

I’ve created the same program with Processing and openFrameworks. First screenshot is Processing, the second one is openFrameworks. Looks like the graphics in openFrameworks are much smoother than the ones in Processing with the OpenGL renderer.

Screenshot of the Circle Grid in Processing

Screenshot of the Circle Grid in openFrameworks

Downloads

Download both the openFrameworks and Processing project to see the differences.

Top · Tweet about this

10 Opinions posted so far. Now go post your own. To the comment form!

From:Gwen Vanhee
Date:12 January 2010, 17:34

Interesting article…

If i may ask: did you notice differences in performance?
If you had to learn just one of the two, which one would it be?

Grtz,
Gwen

Top · Permanent link to this comment
From:Jan Vantomme
Date:12 January 2010, 21:59

Hi Gwen,

I didn’t notice any difference in performance in this example. It’s still very basic stuff. I noticed that playing video is a lot better in openFrameworks. Working with a few thousand particles might also be better in openFrameworks.

I would start with Processing. There are a lot of great books, libraries and tutorials available and since it is based on Java it would be easy to learn for you. The language has a lot of things in common with ActionScript.

Top · Permanent link to this comment
From:Marcus
Date:13 January 2010, 00:13

Hey Jan

seems like you dont have antialiasing enabled by default in processing, try with: smooth() or even better hint(ENABLE_OPENGL_4X_SMOOTH)

Marcus

Top · Permanent link to this comment
From:Jan Vantomme
Date:13 January 2010, 01:00

Marcus,

I’ve used both smooth() and hint(ENABLE_OPENGL_4X_SMOOTH) in the example. But for some reason it doesn’t render very good on Mac OS X. Don’t know if it is better on Windows.

Top · Permanent link to this comment
From:Gwen
Date:13 January 2010, 01:40

Thnx for your opinion, kinda confirms what i was thinking…

Top · Permanent link to this comment
From:Theodore Watson
Date:13 January 2010, 09:55

Hey Jan,

Nice post!
Just a little correction/addition.

As of OF 0061 you can set fullscreen antialiasing in main.cpp by setting an optional glut window string.

The string can be different on different machines but for mac this one works well for 4x antialiasing.

//in main.cpp
window.setGlutDisplayString(“rgba double samples>=4 depth”);
ofSetupOpenGL(&window, 640, 480, OF_WINDOW);

With this the OF results should look as good as the Processing ones.

Cheers,
Theo

Top · Permanent link to this comment
From:Jan Vantomme
Date:13 January 2010, 13:07

Thanks for the tip Theo. Will try this.

I’m more concerned on my Processing installation. The results in OF already look better at this time.

Top · Permanent link to this comment
From:Harry Harrison
Date:13 January 2010, 16:40

Very very helpful article! Thanks for the read. :)

Top · Permanent link to this comment
From:predat
Date:23 January 2010, 14:27

For smoothing sketch on osx, you have to set hint like this:
hint(DISABLE_OPENGL_2X_SMOOTH); noSmooth();
Top · Permanent link to this comment
From:Jan Vantomme
Date:23 January 2010, 14:44

Thanks for letting me know. I’ll try it out.

Top · Permanent link to this comment

Commenting is closed for this article.

Vorm + Beweging

Author

Categories