CHAPITRE 2 PRSENTATION DE PROCESSING Daprs http fr

CHAPITRE 2 PRÉSENTATION DE PROCESSING D’après http: //fr. flossmanuals. net/processing/ A voir aussi: http: //www. siteduzero. com/tutoriel-3 -268569 -processing. html

1. INTRODUCTION PROCESSING ? ? ? Conçu par des artistes, pour des artistes Logiciel libre et gratuit (à noyeau JAVA) !! Environnements de création utilisant le code informatique pour générer des œuvres multimédias sur ordinateur. ATTRAIT ? ? ? Simplicité d'utilisation Diversité de ses applications Images / sons / animations Applications sur Internet et sur téléphones mobiles, Conception d'objets électroniques interactifs

DESSINER ET CRÉER AVEC DU CODE INFORMATIQUE Dessins en 2 D ou 3 D Œuvres sonores et visuelles animées Objets communiquant Environnement interaction INTÉRÊT DE L’EXPRESSION ARTISTIQUE PAR LE CODE ? Rapidité d’exécution Automatisation des actions et des taches répétitives Interaction etc… Création d’œuvres originales

2 IÈME INTÉRÊT DE PROCESSING Programmer des circuits électroniques interaction Capteurs sonores Capteurs thermiques Capteurs de mouvement, etc… Microcontrôleurs (ARDUINO) Génère des images Actionne des bras articulés Envoie des messages sur internet, etc… Environnement

HISTORIQUE DE PROCESSING Naissance en 2001 au MIT Media Lab Le papa: Ben Fry La maman: Casey Reas Prolongement du projet « Design By Numbers » Artiste programmeur John Maeda Simplicité et économie d’action dans la création d’images

2. EXEMPLES D’UTILISATIONS Mycelium (Alexander Ryan -2010) http: //onecm. com/projects/mycelium/

NYTIMES (Jer Thrope-2009) http: //blog. blprnt. com/blog/blprnt/7 -days-of-source-day-2 -nytimes-36536

Shadow Monsters (Philip Worthington -2005) http: //worthersoriginal. com/viki/# page=shadowmonsters

Platonic solids (Michael Hansmeyer-? ? ) Dessinateur du XIXieme siècle Ernst Haekel http: //worthersoriginal. com/viki/# page=shadowmonsters

Champ d’ozone (He. He - 2007) http: //hehe. org. free. fr/hehe/champsdozone/

COP 15 GENERATIVE IDENTITY (Studio okdelux, londre - 2009) LOGO animé http: //www. okdeluxe. co. uk/cop 15/

BODY NAVIGATION (Jonas Jongejan & Ole Kristensen - 2008) http: //3 xw. ole. kristensen. name/works/body-navigation/

3. INSTALLATION DE PROCESSING

4. LES BASES DE PROCESSING Environnement de développement complet Processing Ensemble de fonctionnalités supplémentaires (librairies) Environnement de Processing Ecriture des programmes (sketchs) Conversion des programmes en fichiers autonomes Publication/ identification/ Correction des erreurs

4. LES BASES DE PROCESSING JAVA Librairie n+1 Librairie n+2 Librairie 1 Processing = JAVA simplifié Librairie N image Librairie 2 Librairie n son Animations 3 D

4. 1 L’interface Interface Processing

4. 1 L’interface Barre d’action Barre d’onglet Zone d’édition (pour taper le programme) Console (message d’erreur / affichage d’un texte) Barre de menu

4. 1 L’interface Fenêtre de visualisation (espace de dessin et d’animation)

4. 1 L’interface Barre d’action

4. 1 L’interface 4. 1. 1 Les barres d’action Bouton "Stop": arrête Bouton "Open" : ouvre l'exécution du sketch. Bouton "Run" : exécute du sketch, c-a-d du programme. un sketch existant. Bouton "Export" : exporte le sketch pour le web. Bouton "New" : Crée Bouton "Save" : un nouveau sketch. sauvegarde le sketch en cours.

4. 1 L’interface 4. 1. 2 Le dossier de travail Par défaut (Windows) (Mac) Sketchs Mes Documents/Processing Librairies (modules externes proposant des fonctionnalités supplémentaires)

4. 1 L’interface 4. 1. 2 Le dossier de travail

4. 1 L’interface 4. 1. 2 Le dossier de travail Pour changer le dossier de travail:

4. 1 L’interface 4. 1. 2 Le dossier de travail Où se trouve le dossier de travail:

4. 2 Les bases du langage de Processing JAVA Règles de syntaxe à respecter pour une exécution correcte 4. 2. 1 Majuscule et minuscule size(200, 200); ≠ Size(200, 200); 4. 2. 2 Le point virgule Signale la fin de l’instruction //Dessine un cercle ellipse(10, 10, 10); //affiche un texte //dans la console println(10 + 23); Remarque: « // » signale le début d’un commentaire ignoré lors de l’exécution

4. 2. 3 Appel à des méthodes prédéfinies Méthodes = Fonctionnalités prédéfinies Dessiner un rectangle Définir une couleur (Librairies) Calculer une racine carré Appel à une méthode Taper le nom en respectant Majuscule/minuscule Exemple: Préciser les paramètres de la méthode entre parenthèses fill(128); ellipse(50, 60, 60);

4. 2. 4 Affichage dans la console println("Salut tout le monde!"); println("1000"); 4. 2. 5 Opérations arithmétiques println(10 + 5); println(10 + 5 * 3); // 5*3 (soit 15) puis additionne 10 println((10 + 5) * 3); // 10+5 (soit 15) puis multiplie 15 par 3 println(10. 4 + 9. 2);

Toutes les méthodes de Processings sont documentées

Toutes les méthodes de Processings sont documentées

Conseil de programmation SAUVEGARDER REGULIEREMENT LE PROGRAMME!!!

5. L’ESPACE DE DESSIN Espace de dessin = espace de représentation graphique 2 D, 3 D, animation etc. Il apparait dans une fenêtre lorsqu’on appuie sur le bouton « run » Créé par l’instruction : Exemple: size(largeur, hauteur) size(300, 200); Par défaut, la taille de l’image est 100× 100 pixels size();

5. 1 Les coordonnées d’espace Espace 2 D: Abscisses Point (6, 2) Ordonnées

5. 1 Les coordonnées d’espace Espace 3 D: Point (0, 0, 0) z = 4 x = 6 y = 3 Z Point (6, 3, 4) Ordonnées Abscisses

N’est pas dans le poly Exemple: size(300, P 3 D); lights(); translate(50, 0); fill(66, 150, 80); sphere(25); translate(150, 100); fill(250, 0, 0); sphere(25);

6. LES FORMES GÉOMÉTRIQUES 6. 1 Le point(x, y); ou point(x, y, z); (voir documentation) Exemple: size(100, 100); point(50, 50); Exercice: size(100, 100); point(150, 150); 6. 2 La ligne Exemple: Commentaire? ? Comment régler ce problème? line(x. A, y. B, ZB); (voir documentation) line(15, 90, 95, 10); 6. 3 Le rectangle rect( x, y, largeur, hauteur); Coordonnées du coin supérieur gauche (par défaut) Exemple: (voir documentation) Line(10, 80, 80);

Pour que les 1ère coordonnées (x, y) correspondent au centre du rectangle, il faut changer de mode: CENTER rect. Mode(CENTER); rect(50, 80, 40); 6. 4 L’ellipse Centre de l’ellipse (par défaut) Exemple: ellipse( x, y, largeur. X, hauteur. Y); Longueur du grand axe horizontal (X) Longueur du grand axe vertical (Y) ellipse(50, 80, 80); 6. 5 le triangle Triangle ( x 1, y 1, x 2, y 2, x 3, y 3); Exemple: (voir documentation) triangle(10, 90, 50, 10, 90); (voir documentation)

6. 5 L’arc d’ellipse Triangle ( x, y, largeur. X, hauteur. Y, angle initial, angle final); Centre de l’ellipse (par défaut) Longueur du grand axe horizontal (X) Exemple: Longueur du grand axe vertical (Y) arc(50, 90, 0, PI); 6. 6 Le quadrilatère 6. 7 Courbes 6. 8 Courbes de Bézier 6. 9 Courbes lissée 6. 10 Formes libres 6. 11 Contours 6. 12 Remplissage

6. 13 Les Primitives 3 D Appel aux librairies de la 3 D: size(x, y, P 3 D); Sphère: sphere(taille); Cube: box(longueur, largeur, hauteur); Effets d’éclairage de la forme 3 D: lights();

7. LES COULEURS RAPPEL Image en niveau de gris Tableau de valeurs Case = Pixel (picture element) Défini par un niveau de gris entre le noir le le blanc Codage sur 1 bit : 2 nivaux de gris Codage sur 2 bits : 4 nivaux de gris Codage sur 8 bits = 1 octet : 256 niveaux de gris 11=4 1 1 1111111 = 256 10=3 01=2 0 00=4 0000 = 0 base binaire base décimale Qualité de l’image d’autant meilleur que le nb de bit alloué par pixel est important

Exemple: 1 bit / pixel : 2 nivaux de gris 2 bits/ pixel : 4 nivaux de gris 8 bits = 1 octet /pixel : 256 niveaux de gris

1 bit / pixel : 2 nivaux de gris

2 bits/ pixel : 4 nivaux de gris

8 bits = 1 octet /pixel : 256 niveaux de gris

Image en couleur Canal de couleur colonnes Lignes lignes Superposition de 3 images en couleurs Modélisation : Tableau à trois entrées: Lignes: i Colonnes : j Couleurs : k 3 octets / pixels!! I(i, j, k) 0 < i < N 0 < j < M 0 < k < 3

7. 1 Couleur de fond background(R, V, B); Fond noir: background(0, 0, 0); Par défaut la couleur du fond est grise: background(204, 204); Rajouter background() à la suite d'une composition déjà existante, l'effacerait ! 7. 2 Couleur de remplissage d’une forme fill(R, V, B); se place avant la description de la forme Exemple: no. Stroke(); fill(255, 204, 51); rect(25, 50, 50);

Format de couleur hexadécimal (WEB): fill(#ffcc 33); rect(25, 50, 50); Degrés de transparence de la forme (canal alpha) : no. Stroke(); fill(255, 204, 51); // orange rect(25, 50, 50); fill(255, 127); // blanc semi-transparent rect(35, 50, 50); Remplissage en niveau de gris: un seul paramètre … fill(127); rect(25, 50, 50);

7. 3 Couleur du contour d’une forme Dessiner le contour d’une forme: stroke(R, V, B); ou stroke(NG); Pas de contour: no. Stroke(); 7. 4 Portée des modification de couleurs Par défaut, toute modification de style (couleur de remplissage ou de contour, épaisseur ou forme de trait) s'applique à tout ce que vous dessinez ensuite. On limite la portée des modifications en encapsulant les lignes de commandes par : push. Style() et pop. Style() size(100, 100); background(255); stroke(#000000); fill(#FFFF 00); stroke. Weight(1); rect(10, 10, 10); push. Style(); // On ouvre « une parenthèse » de style stroke(#FF 0000); fill(#00 FF 00); stroke. Weight(5); rect(40, 20, 20); pop. Style(); // On ferme notre parenthèse de style rect(80, 10, 10); size(100, 100); background(255); stroke(#000000); fill(#FFFF 00); stroke. Weight(1); rect(10, 10, 10); // push. Style(); // On ouvre « une parenthèse » de style stroke(#FF 0000); fill(#00 FF 00); stroke. Weight(5); rect(40, 20, 20); // pop. Style(); // On ferme notre parenthèse de style rect(80, 10, 10);

7. 5 Espace colorimétrique rouge: r = 255 Teinte d’un pixel vert: v = 192 bleu: b = 0 3 Composantes = 3 coordonnées dans l’espace des couleurs L’espace (vectoriel) des couleurs est de dimension 3 !!!

Espace 3 D des couleurs: Pour un pixel positionné spatialement en (i, j) dans l’image: b Si chaque composante de couleur est codé sur 1 octet: 0 ≤ r ≤ 255 B (k=3) Représentation dans le repère (R, V, B) Ii, j (r, v, b) 0 ≤ v ≤ 255 0 ≤ b ≤ 255 v r R (k=1) V (k=2)

Représentation dans le repère (HSV) : On change de repère dans l’espace des couleurs RVB → HSV V B v Ii, j (h, s, v) S s h R H

La teinte : le type de couleur (comme rouge, bleu, jaune…). Sa valeur varie entre 0 et 360° ou parfois normalisée en 0– 100 %. La saturation: l' « intensité » de la couleur qui varie entre 0 et 100 % est parfois appelé « pureté » . => plus la saturation d'une couleur est faible, plus l'image sera « grisée » et plus elle apparaitra fade. valeur : la « brillance » de la couleur : elle varie entre 0 et 100%.

Visualisation pratique du repère (HSV) : Représentation conique bien adaptée pour représenter tout l’espace HSV en un seul objet. Roue des couleurs HSV permet à l'utilisateur de rapidement sélectionner une multitude de couleurs.

Conversion d’une image RVB vers HSV (r, g, b) transformation (h, s, v) (Combinaison des coordonnées) Avec : • MAX égale au maximum des valeurs (r, g, b), • MIN égal au minimum de ces valeurs

Changer d’espace colorimétrique sous Processing: color. Mode(); Changer d’échelle numérique RGB: color. Mode(RGB, 1. 0) 1 1111111 = 256 1. 0 0000 = 0 0. 0 Changer d’espace colorimétrique: color. Mode(HSB, valeur. Max. H, valeur. Max. S, valeur. Max. B) Exemple: no. Stroke(); size(400, 128); // La teinte sera spécifiée avec un chiffre de 0 à 400 color. Mode(HSB, 400, 100); // On effectue quatre cent répétitions for (int i = 0; i < 400; i++) { fill(i, 128); rect(i, 0, 1, 128); }

8. LE TEXTE Dessiner des caractères textuels dans l’espace de dessin ≠ traitement de texte … ‘’ Le texte dans Processing ressemblerait plutôt à du « graffiti urbain » , c'est-à-dire à une sorte de peinture de caractères alphanumériques qui finiront tous par s’empiler les uns sur les autres. C'est davantage un procédé « typo-graphique » qu'un travail d'écriture, avec une insistance sur l'aspect graphique des mots ou des lettres que nous allons dessiner. ’’ … 2 possibilités d’écritures Dessiner un texte dans l’espace de dessin: Text(charcatère, x, y, z) ≠ Ecrire un texte dans la console: println(charactère)

11. LA TYPOGRAPHIE Personnaliser l’usage du texte. Utiliser des polices de caractères alternatives. 11. 1. La forme des mots Avant de dessiner un mot: Choisir sa police de caractère! Les étapes préalables pour dessiner un mot avec une police donnée: 1 Convertir une police de caractère en un format de fichier compatible avec Processing. 2 Importer ce fichier dans le code du programme. 3 Sélectionner cette police et l’activer dans le programme. 4 Dessiner le texte dans le skecth.

11. 2. Importer une police de caractère Menu Tools > Create Font…

11. 2. Importer une police de caractère . vlw : Visual Language Workshop du MIT Lab Liste des éléments installé sur l’ordinateur Prévisualisation de la police sélectionnée à la taille définie par « Size » Taille des caractères Nom du ficher correspondant à cette police une fois converti au format «. vlw » utilisé dans processing Anti-aliasing (fonction de lissage pour éviter les effets de crénelage)

11. 2. Importer une police de caractère Menu Sketch > Show Sketch Folder Sauvegarde du fichier « Parchment-Regular-48 » dans le dossier contenant le sketch actuel

11. 3. Dessiner une phrase 3 étapes de programmation: 1 Importer le fichier « Parchment-Regular-48 » et le placer dans une variable portant un nom à choisir (par ex: « police. Parchment » ). 2 Sélectionner cette variable comme police active, et choisir la taille de la police. 3 Dessiner le texte dans la fenêtre de visualisation exemple: size(500, 150); PFont police. Parchment; // définition d’une variable de type Pfont qui va contenir les //caractéristiques de la police. Parchment = load. Font("Parchment-Regular-48. vlw"); // Importation du ficher //définissant la police text. Font(police. Parchment, 48); // Sélection de Parchment comme police active et définition de la //taille de la police 48 (facultatif) fill(0); // définit la couleur du texte. Ici: Noire text("Salut tout le monde !", 20, 75); // dessin du texte La méthode « load. Font() » va cher la structure géométrique de la police et l’enregistre dans la variable « police. Parchment » .

11. 4. Point d’origine du texte size(500, 150); PFont police. Parchment = load. Font("Parchment-Regular-48. vlw"); text. Font(police. Parchment, 48); fill(0); text("Salut tout le monde !", 20, 75); // indiquer la position d'origine du texte par une croix rouge stroke(255, 0, 0); line(15, 70, 25, 80); line(15, 80, 25, 70); Par défaut, le texte s’écrit depuis la ligne de base du texte c’est-à-dire depuis le point en bas à gauche du texte, mais au dessus des caractères descendants (y, j)

La fonction « text. Align() » modifie l’alignement du texte size(500, 250); PFont police; police = load. Font("Sans. Serif. plain-48. vlw"); text. Font(police, 24); fill(0); line(250, 0, 250, 500); line(0, 125, 500, 125); text. Align(RIGHT, TOP); text("right+top", 250, 125); text. Align(RIGHT, BASELINE); text("right+baseline", 250, 125); text. Align(LEFT, CENTER); text("left+center", 250, 125);

9. LES IMAGES Image = tableau 2 D contenant des pixels… Possibilité d’introduire une image dans l’espace de dessin en précisant sa taille et sa position. Formats supportés: . gif, . jpg, . tga, . png Pour manipuler une image il faut la télécharger dans le logiciel… Glisserdéposer Enregistrement dans le fichier « Data » situé à coté du programme. pde

9. 1. Importation et affichage d’une image Création d’un espace de dessin de taille suffisante Création d’une variable « ile » de type « Pimage » , initialement vide qui va contenir les données numériques de l’image Remplissage de la variable « ile » avec les données numériques de l’image Remarque: size(500, 400); PImage ile; ile = load. Image("ile. jpg"); image(ile, 50, 10); Affichage de l’image dans l’espace de dessin en définissant la position (x, y) de son coin supérieur gauche L’image est ici affichée avec sa taille originale

Syntaxe : load. Image("nom du fichier"); Disque dur: "D: /Chapitre 2_Presentation de Processing/Images-Videos/toto. jpg" WEB: "http: //www. gutenberg. org/files/3913 -h/images/rousseau. jpg" Pour éviter tout problème, toujours préciser le chemin complet !!

9. 2. Changer la taille d’une image à l’affichage Rajouter 2 paramètres (largeur, hauteur) à la méthode « image() » : image( img , x , y , hauteur, largeur); Variable de type Pimage contenant les données numériques de l’image Coordonnées du coin supérieur gauche de l’image exemple: size(500, 250); PImage ile; ile = load. Image("ile. jpg"); image(ile, 10, 20, 15); image(ile, 20, 50, 30); image(ile, 45, 100, 75); image(ile, 95, 1000, 750); Nouvelle largeur et hauteur de l’image

9. 3. Afficher une image dont l’arrière plan est transparent Supprimer la « couche alpha » correspondant à l’arrière plan d’une image dans un format adapté (GIF, PNG): 1 Ouvrir l’image dans un logiciel de TI (Irfan. View). 2 Enregistrer l’image au format «. pgn » en précisant les zones de transparence. Taper le programme: size(400, 300); Bien préciser le chemin PImage ile; complet des images !! ile = load. Image("ile. jpg"); PImage rousseau; rousseau = load. Image("rousseau. png"); image(ile, 0, 0); image(rousseau, 20);

9. 4. Coloriage et transparence des images On modifie la couleur des pixels dans une image, soit individuellement, soit globalement grâce à la méthode tint() placée avant l’instruction d’affichage de l’image : image()… Syntaxe: tint(r, v, b, alpha) ou tint(h, s, v, alpha) Facteur de transparence Exemple: size(500, 130); PImage ile; ile = load. Image("ile. jpg"); tint(255, 0, 0); image(ile, 10, 110); tint(255, 0); image(ile, 130, 110, 110); tint(255, 127); image(ile, 250, 110, 110); tint(0, 0, 255, 127); image(ile, 320, 110, 110); tint() peut prendre 1, 2, 3 ou 4 paramètres d’entrée…

9. 5. Les méthodes et variables membres associées aux images Voir la classe Pimage :

10. LES STYLES DE BORDURES Eviter les effets graphiques indésirables sur les lignes Lignes obliques Intersections, etc. Affiner le rendu… 10. 1 Méthode « smooth() » Lissage des contours. Evite les effets d’escalier sur les lignes diagonales. Exemple: line(10, 0, 100, 90); // Ligne sans lissage //On active le lissage smooth(); line(0, 10, 90, 100); // Ligne lissée

10. 2 Méthode « stroke. Weight() » Fait varier l’épaisseur d’une ligne ou d’un contour Exemple: line(10, 0, 100, 90); // Ligne de 1 pixel d'épaisseur stroke. Weight(5); //On définit l'épaisseur à 5 pixels line(0, 10, 90, 100); // Ligne de 5 pixels d'épaisseur 10. 3 Méthode « stroke. Cap() » Définit l’apparence de l’extrémité d’une ligne. Non utile pour les formes Les apparences possibles SQUARE (carrée) PROJECT (extrémité avec 2 petits angles brisés) ROUND (arrondie) – paramètre par défaut Ne fonctionne pas en 3 D (P 3 D – Open. GL)

Exemple: stroke. Weight(10); // On définit l'épaisseur des traits à 10 pixels stroke. Cap(ROUND); // extrémité arrondie line(20, 40, 60, 80); stroke. Cap(PROJECT); // extrémité avec 2 petits angles brisés line(20, 80, 80); stroke. Cap(SQ UARE); // extrémité carré line(40, 20, 80, 60);

10. 4 Méthode « stroke. Join() » Modifie l’aspect des jointures Les apparences possibles MITER (jointure carrée) BEVEL (jointure brisée) – paramètre par défaut ROUND (jointure arrondie) Ne fonctionne pas en 3 D (P 3 D – Open. GL) Exemple: size(300, 100); // On définie la taille du sketch stroke. Weight(10); // On définit l'épaisseur à 10 pixels stroke. Join(M ITER); // Jointure carré rect(20, 60, 60); stroke. Join(BEVEL); // Jointure brisée rect(120, 60, 60); stroke. Join(RO UND); // Jointure arrondie rect(220, 60, 60);

12. LES TRANSFORMATIONS Origine par défaut du dessin d’une forme : coin supérieur gauche de la fenêtre. size(200, 200); no. Stroke(); fill(0); rect(0, 0, 100); Les différentes transformations permettent de : Déplacer l’origine Redéfinir l’orientation des axes (rotation) Changer d’échelle (agrandir/rétrécir une forme)

12. 1 Translation d’un objet En mathématiques, une translation est une transformation géométrique qui correspond à l'idée intuitive de « glissement » d'un objet, sans rotation, retournement ni déformation de cet objet. Une translation est définie par vecteur déplacement Tout déplacement dans le plan peut se décomposer en deux déplacement élémentaires suivant les axes (ox) et (oy) Déplacement suivant x size(200, 200); no. Stroke(); fill(0); translate(50, 50); rect(0, 0, 100); Déplacement suivant y La nouvelle origine se trouve maintenant au point (50, 50)!! Tout dessin d’une autre forme aura pour origine ce point.

Exemple: size(200, 200); // Noir fill(0); translate(20, 20); rect(0, 0, 40); // Gris fill(128); translate(60, 60); rect(0, 0, 40); // Blanc fill(255); translate(60, 60); rect(0, 0, 40);

12. 2 Rotation d’un objet (Voir p 75 –Pearson) Convention dans la mesure des angles: size(200, 200); no. Stroke(); Exemple: fill(0); rotate(PI/4); rect(0, 0, 100); Rotation de π/4 radian = 45°

Conversion d’unité d’angles: 2π rad = 360° Méthode pour la conversion d’angles: float d = degrees(PI/4); // transforme des radians en degrés float r = radians(180. 0); // transforme des degrés en radians Exemple 2: size(200, 200); smooth(); translate(width/2, height/2); for (int i=0; i<360; i+=30){ rotate(radians(30)); quad(0, 0, 30, 15, 70, 60, 20, 60); }

12. 3 homothétie d’un objet (changement d’échelle) Redimensionnement de la forme des objets: méthode scale() Exemple: scale(0. 5) Divise la taille par 2 scale(2) Multiplie la taille par 2 scale(1) Aucun effet Redimensionnement identique suivant x et y Découplage du redimensionnement suivant x et y: Divise par 2 la taille suivant x Exemple: scale(0. 5, 2. 0) Application: size(200, 200); no. Stroke(); // Noir fill(0); scale(1); rect(0, 0, 200); Multiplie par 2 la taille suivant y // Gris fill(128); scale(0. 5); rect(0, 0, 200); // Blanc fill(255); scale(0. 5); rect(0, 0, 200);

12. 4 Ordre des transformations L’ordre des transformation est important !! ≠

12. 5 Isoler les transformations Les transformations s’accumulent et modifient l’origine, la direction des axes et l’échelle d’une figure… Pour qu’une nouvelle transformation ne s’applique qu’à une figure donnée, sans prendre en compte les transformations précédente, on place cette nouvelle transformation et l’écriture de la forme entre les méthodes push. Matrix() et pop. Matrix(). Encapsulation de l’écriture (cf. html) Après pop. Matrix() les anciennes transformations sont rétablies, push. Matrix() enregistre les coordonnées du point d’origine du dessin, ainsi que la direction des axes et l’échelle, à un instant donné. pop. Matrix() rétablit le point d’encrage stockée par la commande push. Matrix() Ces deux fonctions sont utiles en animation (méthode draw() )

size(200, 200); smooth(); rect. Mode(CENTER); // Repère au centre de l'écran translate(width/2, height/2); Exemple size(200, 200); smooth(); rect. Mode(CENTER); // Repère au centre de l'écran translate(width/2, height/2); // Sauvegarde des coordonnées //du repère //push. Matrix(); // la rotation ne s’applique qu’au //carré noir rotate(PI/4); // Dessin du carré noir fill(0); rect(0, 0, 120); // Dessin du carré blanc qui ne //tient pas compte de la rotation fill(255); rect(0, 0, 50); // la rotation ne s’applique qu’au //carré noir rotate(PI/4); // Dessin du carré noir fill(0); rect(0, 0, 120); // Restauration des coordonnées // du repère au centre de l'écran//annulation de la rotation des //axes //pop. Matrix(); // Dessin du carré blanc qui ne //tient pas compte de la rotation fill(255); rect(0, 0, 50);

12. 6 Transformations 3 D Translation, rotation, changement d’échelle sont applicables en 3 D!! Appeler la 3 ième dimension: size(300, P 3 D); Rajouter une 3 ième coordonnées aux méthodes précédentes Exemple : Exemple 2: translate(width/2, height/2, -100); float rx = 0; float ry = 0; float z = 100; void setup() { size(200, P 3 D); } void draw() { background(128); rx = map(mouse. X, 0, width, -PI, PI); ry = map(mouse. Y, 0, height, -PI, PI); translate(width/2, height/2, z); rotate. X(rx); rotate. Y(ry); box(30); }

12. 7 Pourquoi push. Matrix et pop. Matrix ? Transformations dans le plan (2 D) et matrices: Changement d’échelle : homothétie de centre O Rotation Matrice de rotation R(θ) Matrice la transformation homothétique

Translation (2 D) A’ A Expression matricielle: On se place dans un espace 3 D (coordonnées homogènes) Matrice translation dans l’espace homogène 3 D

Transformations dans l’espace (3 D) et matrices: Rotation homothétie de centre O Matrice M de rotation dans le plan (O, x, y) Cas général : Avec (nx, ny, nz) les coordonnées du vecteur unitaire de l’axe de rotation

Translation (3 D) A’ A Expression matricielle: On se place dans un espace 4 D (coordonnées homogènes) Matrice translation dans l’espace homogène 4 D

Cas général en (3 D) Vecteur de translation Matrice 3× 3 de rotation ou d’homothétie Matrice 4× 4 de transformation en coordonnées homogènes