OpenFrameworks est une boîte à outil (framework) écrite en C + + pour le code créatif.



  • Atelier donné au LFO les 14 et 15 mars 2015 : dessins, tableau, matrice, données, fichiers, images, mesh, vidéo, …



  • 2004
  • Orienté graphisme
  • Open source (Licence MIT), multiplateforme (Linux, Mac OS, MS Windows)
  • Langage C/C++, pas un “wrapper” comme Arduino (C/C++) ou Processing (Java).
  • Langage compilé, fournit une application propre à sa machine : plus puissant.
  • Nécessite un environnement de développement (IDE) comme Code::Blocks (Windows, Linux) ou XCode (Mac)
  • Framework (homogénéisation, même logique)
  • Portage des bibliothèques d'imagerie numérique : OpenGL, Cairo, FreeType, FreeImage, OpenCV.
  • Extensible (addons) :

Comparaisons avec Processing

Adapté du livre “Programming Interactivity”, page 153

  • OpenFrameworks est une boîte à outil en C + + avec un langage, sous la forme d'un dossier à télécharger. Pour ouvrir, compiler et exécuter les projets il faut installer un logiciel que l'on nomme environnement de développement intégré (IDE en anglais) comme Code::Blocks pour Windows et Linux ou XCode pour Mac. Processing est à la fois une boîte à outil avec un langage et l'environnement de développement.
  • OpenFrameworks est du pur C + +, Processing est un langage simplifié du Java (mais peut être utilisé directement dans Java)
  • Internet : plus simple avec Processing
  • Beaucoup de 3D : OpenFrameworks (C + +)
  • Projets sur plusieurs ordinateurs sans trop de configurations : Processing (car Java tourne facilement sur toutes les plateformes : Java Virtual Machine)
  • Vision par ordinateur : OpenFrameworks (OpenCV, C + +)
  • Avec Arduino : les deux


  1. Télécharger OpenFrameworks pour votre plateforme (Mac, Windows, Linux)
  2. Installer et configurer l'environnement de développement (IDE) pour votre plateforme : Code::Blocks pour Windows, Code::Blocks pour Linux ou XCode pour Mac.
  3. Pour Windows, télécharger aussi et suivre la procédure (il s'agit de copier le contenu de deux répertoires tout simplement)
  4. Pour Linux, il y a un dossier avec les scripts nécessaires à l'installation de Code::Blocks et des bibliothèques nécessaires :
    1. cd your_oF_directory/scripts/linux/ubuntu
    2. sudo ./
    3. sudo ./
    4. if you want to have support for mp3 and some video codecs: sudo ./


  • OpenFrameworks est un dossier
  • Un projet, c'est le dossier de votre projet associé aux accès vers toutes les fonctions et outils disponibles dans le Frameworks

  • Trois fichiers pour commencer : main.cpp, ofApp.h, ofApp.cpp

  • Tous vos projets doivent être placés dans le dossier apps/myApps pour respecter la hiérarchie, car les projets cherchent les fichiers d'OpenFrameworks dans les répertoires au-dessus (“../../../libs”)

  • Ouvrir un projet OpenFrameworks en cliquant sur le “.workspace” pour Code::Blocks ou “.xcodeproj” pour XCode
  • Pour simplifier la création de projets ou leur réutilisation, il existe dorénavant un générateur de projet “ProjectGenerator”.

  • 3 fonctions : setup (une fois), update (pour les valeurs), draw (pour l'affichage)

Why 2 functions update & draw ?

  • Drawing in opengl is asynchronous, meaning after you fire off a bunch of commands to draw, they can be running in the background and return control back to your app. If you seperate out your drawing code from your non drawing code there’s a potential your code will be faster.
  • it’s useful for debugging. If you want to know why your code is running slow, now you can comment out the drawing and see if the visual representation that’s slow or the updating

Bibliothèques et addons

  • 3D
    • Tools for drawing basic 3D polygonal objects, such as spheres, cubes, pyramids, etc.
    • `ofCamera`, `ofEasyCam` 3d cameras for navigating and viewing your 3D scene, either interactively or not.
    • `ofNode` a 3D point in space, which is the base type for any 3d object, allowing it to be moved, rotated, scaled, nested and drawn.
    • `ofMesh` A primitive for batching points in 3D space that allows you to draw them in several different ways such as points, lines, lines strips, triangles, triangles strips, and attach textures (images) to these. All of this is done very efficiently using your computer's GPU.
    • functions to help load and save 3D objects.
  • app
    • Tools for setting and getting properties of your app such as window size, position, different drawing modes, framerate, et cetera.
    • different windowing systems, such as `ofAppNoWindow` which sets up openframeworks in a windowless context for example.
  • communication
    • `ofSerial` which provides simple serial port communication
    • `ofArduino` which allows openframeworks to communicate via Firmata
  • events
    • this is code for the OF event manager, allowing you to tap into app events if you need or even creating your own events.
  • gl
    • OpenGL is the library for using the computer's GPU, this folder contains gl specific functionality such as VBOs (Vertex Buffer Object), FBOs (Frame Buffer Object), Renderers, Lights, Materials, Shaders, Textures, and several other GL utilities.
    • OF implements different rendering pipelines, Fixed and Programable rendering pipelines as well as OpenGL ES (used on less powerful devices such as smartphones and the Raspberry Pi) – most of this code is found in the gl folder.
  • graphics
    • There are a lot of capabilities here, such as loading and saving images of almost any kind, implementing several different methods for drawing in 2D, and exhibiting colors and styles. Most of the drawing tools rely on OpenGL so these are usually very fast. Graphics also allows you to render as PDF, and it features typography with several kinds of rendering options and utilities.
    • There are useful objects like ofImage, a class for loading, saving and drawing images
    • `ofTrueTypeFont` is a library for loading and drawing true type fonts
  • math
    • in ofMath you'll find things like vectors (ie `ofVec2f`, `ofVec3f`) , matrices (ie `ofMatrix3x3`, `ofMatrix4x4`), qaternions and some really useful math help functions like `ofRandom` and `ofNoise`.
  • sound
    • openframeworks has both low level sound, `ofSoundStream`, for direct access to the sound card, as well as higher level code `osSoundPlayer` for playing samples and sound effects.
  • base types
    • A lot of different base types used extensively within OF. For folks that want to understand the archtecture of OF, this is a useful place where you'll find base types for common elements.
  • utils
    • Utilities for file input and output, logging, threading, system dialogs (open, save, alert), URL file loader, reading and saving XML files (super useful for storing and reading your app's settings)
    • `ofDirectory` which can help iterate through a directory
  • video
    • Video Grabber and player, with behind-the-scenes implementations for all the supported platforms.
    • `ofVideoGrabber` helps with grabbing from a webcam or attached camera
    • `ofVideoPlayer` helps with playing video files


  • ofx3DModelLoader. Used for loading 3D models into your OF project. It only works with .3ds files.
  • ofxAssimpModelLoader. Also loads 3D models into your OF project, but it is done using the [assimp]( library, which supports a wide variety of 3D file formats, even animated 3D objects.
  • ofxGui. This is the default GUI (Graphical User Interface) for OF. It lets you add sliders and buttons so you can easily modify parameters while your project is running. It relies heavilly on ofParameters and ofParameterGroup. It allows you to save and load the values for the parameters that you've adjusted.
  • ofxKinect. Recently added as a core addon. As you probably infer, it's for using a Microsoft XBox Kinect 3D sensor with your OF project. This addon relies on [libfreenect](, so you can only access the depth and rgb images that the kinect reads and adjust some of its parameters, like tilt and light. It includes some handy functions that allow you to convert Kinect's data between several different kinds. Please note that ofxKinect doesn't perform skeleton tracking. For such thing you need to use ofxOpenNI.
  • ofxNetwork. Lets you deal with network protocols such as UDP and TCP. You can use it to communicate with other computers over the network. Check out network chapter for more information.
  • ofxOpenCv. This is OF's implementation of the best and most used Computer Vision code library, openCV. Computer Vision is a complete world by itself, and being able to use openCV right out-of-the-box is a super important and useful OF feature.
  • ofxOsc. OSC (Open Sound Control) implementation for OF. OSC easily comunicates with other devices or applications within the same network. OSC is used to send messages and parameters from one app to another one. Several chapters in this book discuss OSC.
  • ofxSvg. Loads and displays SGV files. These are vector graphics files, usually exported from vector drawing programs such as Adobe Illustrator.
  • ofxThreadedImageLoader. Loads images on a different thread, so your main thread (the one that draws to your screen) doesn't get stuck while loading images. Really useful when loading online images.
  • ofxVectorGraphics. Used to write out EPS vector graphics files. It the same drawing syntax as OF's regular drawing syntax, so it is really easy to use.
  • ofxXmlSettings. This is OF's simple XML implementation used mostly for loading and saving settings

Principes de programmation


Exemple de code (essayer sur :

#include <iostream>
using namespace std;
int main() {
    cout << "Hello World" << endl;
    return 0;

Mots clés : fichier .h (déclaration), fichier .cpp (implémentation), conventions de nommage, fonctions (signature, paramètres, appel, retour), variables, objets (attributs, méthodes), namespace, types de données, casting, structure de données (pointeur, tableau, …), structure de contrôle (if, else, for, while, switch, …), conditions, …


vector<float> nums;  // create an empty vector of floats    
nums.push_back(10.5); // add a float with value 10.5 to the end of vector
cout << nums[0] << endl; // print out the value of element at position 0
nums.erase( nums.begin() ); // erase the first element in the vector
cout << nums.size() << endl; // print the number of elements in the vector
vector<float>:: iterator it = nums.begin(); // create an iterator that points to first element
cout << *it << end; // print out the value of the element pointed to by the iterator
// loop
for( int i = 0; i < names.size(); i=i+1){
  cout << names[i] << endl;


When you write code, your end goal is a compiled application - an .exe or .app that you can click on an run. The job of the compiler is to make that executable for you, to turn text into compiled binary files.

  • Preprocessor : the first step is that a preprocessor modifies the text files themselves. When you see the # symbol, that’s a preprocessor operation
  • Compiler : taking the text and turning it into machine language instructions (also referred to as assembly)/ The include guard prevents the file from being included twice. The compilers job in life is to take the .cpp files and turn them into .o files. These are individual object files that it will compbine in the next phase, linking.
  • Linker: this code is calling a function in another object. The linker figures out the links from object to object (in this case between ofApp.o and ofGraphics.o) and links them together into one file.

Orienté Objet

Maths et 3D

Pour créer des objets en 3D, les manipuler, il faut essayer de comprendre deux champs :

  • les notions mathématiques utilisées (vecteurs, système de coordonnées, etc.)
  • l'imagerie 3D avec l'idée de tirer parti au maximum des ressources du processeur graphique (GPU) : Vertex, Vecteur, Mesh, Face, OpenGl, Shader, Matrices, VBO, Vertex Array, OpenGl Pipeline, Transformations, … Voir aussi : terminologie-3d


  • Le triangle est la figure élémentaire pour fabriquer des scènes 3D ou 2D. Presque tout est triangle.
  • Pipeline OpenGL :
    1. Votre application OpenFrameworks remplit la mémoire avec un tableau de points 3D, appelés “sommets” ou “vertices
    2. Ces sommets sont projetés sur l'écran
    3. Assemblés en triangles
    4. Fragmentés en pixels, on parle de rasterization
    5. Et finalement, une couleur est assignée à chaque pixel
  • Vertex Shader : les positions des sommets, peut aussi générer la couleur et les coordonnées de la texture pour la rasterisation.
  • Fragment Shader : les couleurs des pixels
  • GLSL : With GLSL, you can code short programs, called shaders, which are executed on the GPU. A shading language is a special programming language adapted to easily map on shader programming. It doesn't look trememndously different from what you see in the OF math classes: float, vec4, mat4, and so on.



Pour connaître la version OpenGL de votre carte graphique, il existe un exemple dans OpenFrameworks/examples/gl/glInfoExample.

Most graphics cards support OpenGL3 but some do not. You can always run the glInfoExample in examples/gl to see what your computer supports if you run into trouble or are just curious. Finally, we have OpenGL ES 2, which is what is supported on Android, iOS, and which you might be familar with from WebGL. It doesn't have a declaration at the top, but you'll notice something in most GLES shaders: