Introduction to openFrameworks

Posted on 2010-01-12 by Jan Vantomme
Tags: processing, openframeworks, tutorial

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