1. openFrameworks

2. Introduction

3. Introduction
• openFrameworks est un bundle de fonctions C++ , pour le
« Creative Coding & Prototyping »
• Il est une continuité de processing dans le sens ou il utilise le
même type de fonction et vocabulaire mais est toutefois
déconseillé comme première approche au langage de
programmation.

4. Introduction
• 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) : http://ofxaddons.com

5. Introduction
• Zachary Lieberman ( http://www.thesystemis.com )
• Theo Watson ( http://muonics.net )
• Communauté de développeurs

6. Introduction
• https://vimeo.com/921725

7. Comparaisons avec Processing

8. Comparaisons avec Processing
• 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

9. Installation

10. Installation
• Télécharger openFrameworks pour votre plateforme (Mac, Windows, Linux)
http://openframeworks.cc/download/
• Installer et configurer l'environnement de développement (IDE) pour votre
plateforme : Code::Blocks pour Windows, Code::Blocks pour Linux ou XCode pour
Mac.
• Pour Windows, télécharger aussi codeblocks_additions.zip et suivre la procédure (il
s'agit de copier le contenu de deux répertoires tout simplement)

11. Installation
• A l’intérieur se trouvent ces dossiers:
> Addons:
• Dossier de fonctions supplémentaires…
> Apps:
• Le dossier de vos applications,
• c’est ici que seront sauvés vos sketches sous forme de projets XCode. Il contient aussi les
exemples qui vous permettrons de commencer.
> Lib:
• Les librairies. Elles permettent d’alléger l’application dans le sens ou on ne fait appel à elles
seulement quand on en a besoin. Vous noterez parmis d’autres, à l’intérieur de ce dossier
« libs« , un dossier nommé « openFrameworks » et un fichier « ofMain.h« . Ce sont les
documents de base pour utiliser OPENFRAMEWORKS.
>Other:
• Librairie Tierce, pour controller une Arduino board.
• Ne changez pas la hiérarchie de ces dossiers.

12. add-ons
• Librairies de base
• Possibilités d’extensions des fonctionnalités (add-ons)
• http://www.ofxaddons.com/categories

13. IDE
• Integrated Development Environment (Environnement de développement intégré),
environnement de développement logiciel, en informatique
• XCode sur Mac
• CodeBlocks ou Visual Studio sur Windows

14. IDE
• XCode sur Mac

15. IDE
• CodeBlocks sur Windows

16. IDE
• Integrated development environment
• Gestion des fichiers sources :
• Edition (coloration syntaxique, complétion)
• Création (à partir de templates)
• Exploration des définitions de classes

17. IDE
• Compilation
“traduction” des fichiers sources en code machine.
• Editions de liens
liens avec les librairies externes, regroupement des fichiers compilé en un seul fichier (binary). Cela
peut-être une librairie dynamique, statique ou bien un exécutable.

18. IDE
• Compilation

19. IDE
Debugging
• permet de suivre pas à pas l'exécution d’un programme
• breakpoint : point d’arrêt du debugger, permet de scruter l’état du programme (notamment les
valeurs de variables par exemple)

20. IDE
• ouverture d’un projet (apps/examples/)
• • fichier “.xcodeproj” sur Mac
• • fichier “.cbp” sur PC
• compile and run
• console

21. Structure

22. Structure
Chaque Dossier de projets est organisé comme suit:
nom_du_projet/ . Bin/ data/ . openFrameworks-
info.plist . openFrameworks.xcodeproj . src/ . . main.cpp . . testApp.cpp . .
testApp.h
Ces noms de fichiers ne sont pas changeable au premier abords, mis à part le dossier parent
« nom_du_projet« . Changer ces noms de fichiers sans en connaitre les tenant et aboutissants vous
expose à de nombreuses erreurs lors de la compilation du programme, il est donc conseillé de les
laisser tel quel dans un premier temps.
Le dossier « src/ » contient votre partie du programme, votre création. Au minimum, il devra contenir
ces trois fichiers.

23. Structure
• 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

24. Structure
• 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”)

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

26. nouveau projet
• 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”.

27. nouveau projet
Création d’un dossier “propre” pour la durée de l’atelier (ex : apps/
workshopCraslab/ )
• copie du dossier apps/examples/_emptyExample/ dans notre dossier apps/
workshopCraslab/
• Renommer le nom du dossier _emptyExample en NomDeMonNouveauProjet

28. point d’entrée
fichier principal : main.cpp
• fonction main()
• appelée par le système au démarrage de
l’application
• set-up OpenGL,création de la fenêtre
• instance d’application (testApp)

29. point d’entrée
• le dossier « src/ » et les fichiers de mon programme.
• Dans un premier temps, tout se passe avec l’ensemble des trois fichiers main.cpp, testApp.h
testApp.cpp.
• Toujours dans XCode, sélectionez le dossier src/ dans la fenêtre de gauche. L’affichage devrait
ressembler à l’image ci-dessous
• Nous retrouvons nos trois documents main.cpp , testApp,cpp, testApp.h sur la fenêtre de droite.

30. point d’entrée
• main.cpp:
Fichier principal du projet, il n’est pour autant pas le plus rempli: La balise #include indique quel(s)
fichiers sont à charger lors de la compilation… le compilateur « charge* » donc 3 fichiers d’en-tête
(« header » indiqué par la terimaison .h) dont deux font partie de OPENFRAMEWORKS (facilement
recconaissable par le préfixe of)
Il « charge* » aussi l’entête de notre programme: TestApp.h
*charger l’entête: la manoeuvre de compliation c++ est à vrai dire plus compliquée mais ceci est une
introduction.
#include "ofMain.h"
#include "testApp.h"
#include "ofAppGlutWindow.h"
int main( ).

31. point d’entrée
• main.cpp:
Fichier principal du projet, il n’est pour autant pas le plus rempli: La balise #include indique quel(s)
fichiers sont à charger lors de la compilation… le compilateur « charge* » donc 3 fichiers d’en-tête
(« header » indiqué par la terimaison .h) dont deux font partie de OPENFRAMEWORKS (facilement
recconaissable par le préfixe of)
Il « charge* » aussi l’entête de notre programme: TestApp.h
*charger l’entête: la manoeuvre de compliation c++ est à vrai dire plus compliquée mais ceci est une
introduction.
#include "ofMain.h"
#include "testApp.h"
#include "ofAppGlutWindow.h"
int main( ).

32. point d’entrée
main() est la fonction principale du programme.
En somme, le programme va s’éxécuter entre ces crochets « { } »:
{
//1> Un objet ofAppGlutWindow est appelé sous la référence "window"
ofAppGlutWindow window;
// 2> Un contexte OpenGL est crée,
// les 2 et 3èmes paramêtres sont la largueur et la hauteur
// OF_WINDOW peut être changé en OF_FULLSCREEN pour du plein écran.
ofSetupOpenGL(&window, 1024,768, OF_WINDOW);
//3> La fonction ofRunApp() s'éxécute
//avec notre classe testApp comme paramêtre.
//Ne changez pas ce paramêtre
ofRunApp( new testApp());
}

33. point d’entrée
• testApp.h et testApp.cpp
• interface d’évènements (souris + clavier)
• interface de la classe
• setup()
• update()
• draw()

34. point d’entrée
• testApp.h:
Initialise les references et variables float, int, bool, char….
#ifndef _TEST_APP // Ces deux instructions, commençant par "#", et la dernière, #endif sont indissociables
#define _TEST_APP // Ceci permet de n'incure qu'une seule fois ce fichier d'en-tête dans un fichier
#include "ofMain.h"
// TestApp (notre application) est une sous-classe de ofBaseApp
class testApp : public ofBaseApp{
//Initialisation d'une reference utilisée dans le programme
float counter;
};
#endif

35. point d’entrée
• testApp.cpp :
Descriptions de fonctions, dans ce fichier vient s’inscrire la déclaration de fonctions utilisées dans notre
programme:
#include "testApp.h"
//--------------------------------------------------------------
void testApp::setup(){
counter =0.0;
// fond noir
ofBackground(0, 0, 0);
//synchronisation vericale de l'ecran
ofSetVerticalSync(true);
// FPS ( débit d'images par secondes
ofSetFrameRate(60);
}

36. point d’entrée
//--------------------------------------------------------------
void testApp::update(){
//n'affiche rien
//calcule les fonctions d'affichage pour le mise à jour de l'affichage
//EX: ajoute 0.29 au compteur.
counter = counter + 0.029f;
}
//--------------------------------------------------------------
void testApp::draw(){
// Cette fonction dessine les choses dans la fenêtre de l'application.
// il est préférable de ne pas mettre de calcul d'images ici mais juste l'affichage,
// les calculs peuvent être mis dans update().
// EX: affiche un cercle bleu de 100p de diamêtre
// 10px de la gauche, 15px du haut
ofSetColor(0, 0, 255);
ofCircle(10, 10, 100);
}

37. app.setup()
• fonction appelée une seule fois lors de la
création de l’instance de l’application
• lieu d’initialisation de nos variables
• définir le framerate (nombre d’images
dessinées par seconde) :
ofSetFrameRate()

38. app.update()
• mise à jour des variables, si celles-ci
dépendent du temps (ex : pour animer un
objet dans l’espace)
• appelée juste avant app.draw()

39. app.draw()
• fonction principale de dessin
• les commandes de dessin sont placées ici,
les variables viennent d’être mises à jour
dans le update() et peuvent être utilisées.

40. app.draw()
Repère 2D : pixels, coordonnées

41. app.draw()
Repère 2D : pixels, coordonnées

42. app.draw()
Repère 2D

43. Syntaxe

44. Les variables
• Type
• Nom de la variable
• ne doit pas commencer par un caractère spécial ( ‘?’, ’_’, espace,
chiffres,... )
• Valeur
• affection avec l’opérateur =

45. Les variables
• Type des variables de base
• int, boolean,float,char
• Librairie standard
• std::string (ou string)

46. Les fonctions

47. Les fonctions

48. Les fonctions

49. Les conditions : if

50. Les conditions : if / else

51. Classe : déclaration .h

52. Classe : déclaration
• “public”
accessibilité des membres depuis d’autres instances classes.
• “private”
accessibilité des membres seulement depuis des instances de la classe.
• “protected”
accessibilité des membres seulement depuis des instances de la classe.

53. Classe : implémentation .cpp

54. Impression sur la console
• printf(“n=%d”, nombreEntier);
• printf(“f=%3.2f”, nombreAVirgule);
• printf(“s=%s”, chaineChars.c_str());

55. Ressources
http://www.openframeworks.cc
http://www.openframeworks.cc/liners/
http://todd-vanderlin.squarespace.com/#/projects/night-lights/
http://thesystemis.com/projects/eyewriter/
http://www.amazon.fr/Design-Numbers-Paola-
Antonelli/dp/0262632446/
http://trilon.zoophar.com/?p=318
http://www.ecole-art-aix.fr/rubrique906.html
http://reso-nance.org/wiki/logiciels/openframeworks/accueil