Introduction to openFrameworks

Posted by Jan Vantomme on 12 January 2010.
Tags: , , ,

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(255255255);
    ofFill();
    ofCircle(505020);
    ofSetColor(128128128);
    ofNoFill();
    ofCircle(505020); 

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.

Tweet this article

Oldskool Comments (10)

Gravatar for Gwen Vanhee

From: Gwen Vanhee
Date: 12.01.2010

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

Gravatar for jan Vantomme

From: jan Vantomme
Date: 12.01.2010

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

Gravatar for Marcus

From: Marcus
Date: 13.01.2010

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

Gravatar for Jan Vantomme

From: Jan Vantomme
Date: 13.01.2010

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

Gravatar for Gwen Vanhee

From: Gwen Vanhee
Date: 13.01.2010

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

Top · Permanent link to this comment

Gravatar for Theodore Watson

From: Theodore Watson
Date: 13.01.2010

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

Gravatar for Jan Vantomme

From: Jan Vantomme
Date: 13.01.2010

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

Gravatar for Harry Harrison

From: Harry Harrison
Date: 13.01.2010

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

Top · Permanent link to this comment

Gravatar for predat

From: predat
Date: 23.01.2010

For smoothing sketch on osx, you have to set hint like this: hint(DISABLE_OPENGL_2X_SMOOTH); noSmooth();

Top · Permanent link to this comment

Gravatar for Jan Vantomme

From: Jan Vantomme
Date: 23.01.2010

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

Top · Permanent link to this comment