Chapitre 2
This presentation is the property of its rightful owner.
Sponsored Links
1 / 90

Chapitre 2 PowerPoint PPT Presentation


  • 62 Views
  • Uploaded on
  • Presentation posted in: General

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) !!.

Download Presentation

Chapitre 2

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Chapitre 2

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


Chapitre 2

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


Chapitre 2

Dessiner et créer avec du code informatique

Dessins en 2D ou 3D

Œ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


Chapitre 2

2ième Intérêt de Processing

Programmer des circuits électroniques

Environnement

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…


Chapitre 2

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


Chapitre 2

2. Exemples d’utilisations

Mycelium (Alexander Ryan -2010)

http://onecm.com/projects/mycelium/


Chapitre 2

NYTIMES (JerThrope-2009)

http://blog.blprnt.com/blog/blprnt/7 -days-of-source-day-2-nytimes-36536


Chapitre 2

ShadowMonsters(Philip Worthington -2005)

http://worthersoriginal.com/viki/# page=shadowmonsters


Chapitre 2

Platonicsolids(Michael Hansmeyer-??)

Dessinateur du XIXieme siècle Ernst Haekel

http://worthersoriginal.com/viki/# page=shadowmonsters


Chapitre 2

Champ d’ozone(HeHe - 2007)

http://hehe.org.free.fr/hehe/champsdozone/


Chapitre 2

COP15 GENERATIVE IDENTITY (Studio okdelux, londre - 2009)

LOGO animé

http://www.okdeluxe.co.uk/cop15/


Chapitre 2

BODY NAVIGATION (Jonas Jongejan & OleKristensen - 2008)

http://3xw.ole.kristensen.name/works/body-navigation/


Chapitre 2

3. Installation de processing


Chapitre 2

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


Chapitre 2

4. Les bases de processing

JAVA

Librairie n+1

Librairie 1

Librairie n+2

Processing = JAVA simplifié

Librairie 2

Librairie N

Librairie n

son

Animations 3D

image


Chapitre 2

4.1 L’interface

Interface Processing


Chapitre 2

4.1 L’interface

Barre d’action

Barre de menu

Barre d’onglet

Zone d’édition

(pour taper le programme)

Console

(message d’erreur / affichage d’un texte)


Chapitre 2

4.1 L’interface

Fenêtre de visualisation

(espace de dessin et d’animation)


Chapitre 2

4.1 L’interface

Barre d’action


Chapitre 2

4.1 L’interface

4.1.1 Les barres d’action

Bouton "Export" : exporte le sketch pour le web.

Bouton "Open" : ouvre un sketch existant.

Bouton "Stop": arrête l'exécution du sketch .

Bouton "Run" : exécute du sketch, c-a-d du programme.

Bouton "New" : Crée un nouveau sketch.

Bouton "Save" : sauvegarde le sketch en cours.


Chapitre 2

4.1 L’interface

4.1.2 Le dossier de travail

Par défaut

(Windows)Mes Documents/Processing

(Mac) Documents/Processing

Librairies

(modules externes proposant des fonctionnalités supplémentaires)

Sketchs


Chapitre 2

4.1 L’interface

4.1.2 Le dossier de travail


Chapitre 2

4.1 L’interface

4.1.2 Le dossier de travail

Pour changer le dossier de travail:


Chapitre 2

4.1 L’interface

4.1.2 Le dossier de travail

Où se trouve le dossier de travail:


Chapitre 2

4.2 Les bases du langage de Processing

Règles de syntaxe à respecter pour une exécution correcte

JAVA

size(200,200); ≠ Size(200,200);

4.2.1 Majuscule et minuscule

Signale la fin de l’instruction

4.2.2 Le point virgule

Remarque:

« // » signale le début d’un commentaire ignoré lors de l’exécution

//Dessine un cercle

ellipse(10,10, 10, 10);

//affiche un texte

//dans la console

println(10 + 23);


Chapitre 2

4.2.3 Appel à des méthodes prédéfinies

Méthodes = Fonctionnalités prédéfinies

(Librairies)

  • Dessiner un rectangle

  • Définir une couleur

  • Calculer une racine carré

Appel à une méthode

  • Préciser les paramètres de la méthode entre parenthèses

  • Taper le nom en respectant Majuscule/minuscule

fill(128);

ellipse(50, 50, 60, 60);

Exemple:


Chapitre 2

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);


Chapitre 2

Toutes les méthodes de Processings sont documentées


Chapitre 2

Toutes les méthodes de Processings sont documentées


Chapitre 2

  • Conseil de programmation

  • SAUVEGARDER REGULIEREMENT LE PROGRAMME!!!


Chapitre 2

5. L’espace de dessin

Espace de dessin = espace de représentation graphique 2D, 3D, animation etc.

Il apparait dans une fenêtre lorsqu’on appuie sur le bouton « run »

Créé par l’instruction :

size(largeur,hauteur)

Exemple:

size(300,200);

Par défaut, la taille de l’image est 100×100 pixels

size();


Chapitre 2

5.1 Les coordonnées d’espace

Espace 2D:

Abscisses

Point (6,2)

Ordonnées


Chapitre 2

5.1 Les coordonnées d’espace

Espace 3D:

z = 4

Point (0,0,0)

x = 6

Abscisses

y = 3

Z

Point (6,3,4)

Ordonnées


Chapitre 2

N’est pas dans le poly

Exemple:

size(300,300,P3D);

lights();

translate(50,50,0);

fill(66,150,80);

sphere(25);

translate(150,150,100);

fill(250,0,0);

sphere(25);


Chapitre 2

6. Les formes géométriques

6.1 Le point

point(x,y); ou point(x,y,z);

(voir documentation)

size(100,100);

point(50,50);

Exemple:

Exercice:

size(100,100);

point(150,150);

Commentaire??

Comment régler ce problème?

6.2 La ligne

line(xA,yA,yB,ZB);

(voir documentation)

line(15,90,95,10);

Exemple:

6.3 Le rectangle

rect( x,y, largeur, hauteur);

(voir documentation)

Coordonnées du coin supérieur gauche (par défaut)

Line(10,10,80,80);

Exemple:


Chapitre 2

Pour que les 1ère coordonnées (x,y) correspondent au centre du rectangle, il faut changer de mode: CENTER

rectMode(CENTER);

rect(50, 50, 80, 40);

ellipse( x,y, largeurX, hauteurY);

6.4 L’ellipse

(voir documentation)

Centre de l’ellipse(par défaut)

Longueur du grand axe horizontal (X)

Longueur du grand axe vertical (Y)

ellipse(50, 50, 80, 80);

Exemple:

Triangle ( x1,y1, x2,y2, x3,y3);

6.5 le triangle

(voir documentation)

triangle(10, 90, 50, 10, 90, 90);

Exemple:


Chapitre 2

6.5 L’arc d’ellipse

Triangle ( x,y, largeurX, hauteurY, angle initial, angle final);

Centre de l’ellipse(par défaut)

Longueur du grand axe horizontal (X)

Longueur du grand axe vertical (Y)

arc(50, 50, 90, 90, 0, PI);

Exemple:

6.12 Remplissage

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


Chapitre 2

6.13 Les Primitives 3D

size(x,y,P3D);

Appel aux librairies de la 3D:

Sphère:

sphere(taille);

box(longueur, largeur, hauteur);

Cube:

lights();

Effets d’éclairage de la forme 3D:


Chapitre 2

7. Les Couleurs

Rappel

  • Case = Pixel (pictureelement)

  • Défini par un niveau de gris entre le noir le le blanc

Image en niveau de gris

Tableau de valeurs

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

1 1111111 = 256

1 1 = 4

1

1 0 = 3

0 1 = 2

0

0 0 = 4

00000000 = 0

base binaire

base décimale

Qualité de l’image d’autant meilleur que le nb de bit alloué par pixel est important


Chapitre 2

Exemple:

1 bit / pixel: 2 nivaux de gris

2 bits/ pixel:4 nivaux de gris

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


Chapitre 2

1 bit / pixel:

2 nivaux de gris


Chapitre 2

  • 2 bits/ pixel:4 nivaux de gris


Chapitre 2

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


Chapitre 2

Image en couleur

Canal de couleur

colonnes

Image en couleur

Lignes

lignes

Superposition de 3 images en couleurs

Modélisation : Tableau à trois entrées:

Lignes:i

0 < i < N

Colonnes : j

0 < j < M

I(i,j,k)

0 < k < 3

Couleurs : k

3 octets / pixels!!


Chapitre 2

background(R,V,B);

7.1 Couleur de fond

Fond noir:

background(0,0,0);

Par défaut la couleur du fond est grise:

background(204, 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);

fill(R,V,B); se place avant la description de la forme

Exemple:

noStroke();

fill(255, 204, 51);

rect(25, 25, 50, 50);


Chapitre 2

Format de couleur hexadécimal (WEB):

fill(#ffcc33);

rect(25, 25, 50, 50);

Degrés de transparence de la forme (canal alpha) :

noStroke();

fill(255, 204, 51); // orange

rect(25, 25, 50, 50);

fill(255, 255, 255, 127); // blanc semi-transparent

rect(35, 35, 50, 50);

Remplissage en niveau de gris: un seul paramètre …

fill(127);

rect(25, 25, 50, 50);


Chapitre 2

7.3 Couleur du contour d’une forme

Dessiner le contour d’une forme:

  • stroke(R,V,B);

ou

  • stroke(NG);

Pas de contour:

  • noStroke();

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 :

pushStyle()

et

popStyle()

size(100, 100);

background(255);

stroke(#000000);

fill(#FFFF00);

strokeWeight(1);

rect(10, 10, 10, 10);

pushStyle(); // On ouvre « une parenthèse » de style

stroke(#FF0000);

fill(#00FF00);

strokeWeight(5);

rect(40, 40, 20, 20);

popStyle(); // On ferme notre parenthèse de style

rect(80, 80, 10, 10);

size(100, 100);

background(255);

stroke(#000000);

fill(#FFFF00);

strokeWeight(1);

rect(10, 10, 10, 10);

// pushStyle(); // On ouvre « une parenthèse » de style

stroke(#FF0000);

fill(#00FF00);

strokeWeight(5);

rect(40, 40, 20, 20);

// popStyle(); // On ferme notre parenthèse de style

rect(80, 80, 10, 10);


Chapitre 2

7.5 Espace colorimétrique

rouge: r = 255

3 Composantes

=

3 coordonnées dans l’espace des couleurs

vert: v = 192

Teinte d’un pixel

bleu: b = 0

L’espace (vectoriel) des couleurs

est de dimension 3 !!!


Chapitre 2

B (k=3)

b

V (k=2)

v

r

R (k=1)

Espace 3D des couleurs:

Pour un pixel positionné spatialement en (i,j) dans l’image:

Représentation dans le repère (R,V,B)

Si chaque composante de couleur est codé sur 1 octet:

0 ≤ r ≤ 255

  • Ii,j (r,v,b)

0 ≤ v ≤ 255

0 ≤ b ≤ 255


Chapitre 2

V

B

v

S

s

h

H

R

Représentation dans le repère (HSV) :

On change de repère dans l’espace des couleurs RVB → HSV

  • Ii,j (h,s,v)


Chapitre 2

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%.


Chapitre 2

Visualisation pratique du repère (HSV) :

Roue des couleurs HSV permet à l'utilisateur de rapidement sélectionner une multitude de couleurs.

Représentation conique bien adaptée pour représenter tout l’espace HSV en un seul objet.


Chapitre 2

Conversion d’une image RVB vers HSV

transformation

(h,s,v)

(r, g, b)

(Combinaison des coordonnées)

  • Avec :

  • MAX égale au maximum des valeurs (r, g, b),

  • MIN égal au minimum de ces valeurs


Chapitre 2

Changer d’espace colorimétrique sous Processing:

colorMode();

Changer d’échelle numérique RGB:

colorMode(RGB,1.0)

1.0

1 1111111 = 256

0.0

00000000 = 0

Changer d’espace colorimétrique:

colorMode(HSB,valeurMaxH,valeurMaxS, valeurMaxB)

Exemple:

noStroke();

size(400, 128);

// La teinte sera spécifiée avec un chiffre de 0 à 400

colorMode(HSB, 400, 100, 100);

// On effectue quatre cent répétitions

for (int i = 0; i < 400; i++) {

fill(i, 128, 128);

rect(i, 0, 1, 128);

}


Chapitre 2

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:

Ecrire un texte dans la console:

Text(charcatère,x,y,z)

println(charactère)


Chapitre 2

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.


Chapitre 2

11.2. Importer une police de caractère

Menu Tools > Create Font…


Chapitre 2

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)


Chapitre 2

11.2. Importer une police de caractère

Menu Sketch > Show Sketch Folder

Sauvegarde du fichier « Parchment-Regular-48 » dans le dans le dossier contenant le sketch actuel


Chapitre 2

11.3. Dessiner une phrase

3 étapes de programmation:

Importer le fichier « Parchment-Regular-48 » et le placer dans une variable portant un nom à choisir (par ex: « policeParchment »).

1

Sélectionner cette variable comme police active, et choisir la taille de la police.

2

3

Dessiner le texte dans la fenêtre de visualisation

size(500,150);

PFontpoliceParchment; // définition d’une variable de type Pfont qui va contenir les //caractéristiques de la police

policeParchment = loadFont("Parchment-Regular-48.vlw"); // Importation du ficher //définissant la police

textFont(policeParchment,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

exemple:

La méthode « loadFont() » va chercher la structure géométrique de la police et l’enregistre dans la variable « policeParchment ».


Chapitre 2

11.4. Point d’origine du texte

size(500,150);

PFontpoliceParchment

policeParchment = loadFont("Parchment-Regular-48.vlw");

textFont(policeParchment,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)


Chapitre 2

La fonction « textAlign() » modifie l’alignement du texte

size(500,250);

PFont police;

police = loadFont("SansSerif.plain-48.vlw");

textFont(police,24);

fill(0);

line(250,0,250,500);

line(0,125,500,125);

textAlign(RIGHT,TOP);

text("right+top", 250, 125);

textAlign(RIGHT,BASELINE);

text("right+baseline", 250, 125);

textAlign(LEFT,CENTER);

text("left+center", 250, 125);


Chapitre 2

9. Les images

Image = tableau 2D contenant des pixels…

Possibilité d’introduire une image dans l’espace de dessin en précisant sa taille et sa position.

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…

Enregistrement dans le fichier « Data » situé à coté du programme.pde

Glisser-déposer


Chapitre 2

9.1. Importation et affichage d’une image

Création d’un espace de dessin de taille suffisante

size(500,400);

PImage ile;

ile = loadImage("ile.jpg");

image(ile,50,10);

Création d’une variable « ile » de type « Pimage », initialement vide qui va contenir les données numériques de l’image

Affichage de l’image dans l’espace de dessin en définissant la position (x,y) de son coin supérieur gauche

Remplissage de la variable « ile » avec les données numériques de l’image

Remarque:

L’image est ici affichée avec sa taille originale


Chapitre 2

Syntaxe :

loadImage("nom du fichier");

Disque dur:

"D:/Chapitre 2_Presentation de Processing/Images-Videos/toto.jpg"

WEB:

"http://www.gutenberg.org/files/3913/3913-h/images/rousseau.jpg"

Pour éviter tout problème, toujours préciser le chemin complet !!


Chapitre 2

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

Nouvelle largeur et hauteur de l’image

exemple:

size(500,250);

PImage ile;

ile = loadImage("ile.jpg");

image(ile,10,10,20,15);

image(ile,20,20,50,30);

image(ile,45,45,100,75);

image(ile,95,95,1000,750);


Chapitre 2

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 (IrfanView).

2

Enregistrer l’image au format « .pgn » en précisant les zones de transparence.

Taper le programme:

size(400,300);

PImage ile;

ile = loadImage("ile.jpg");

PImage rousseau;

rousseau = loadImage("rousseau.png");

image(ile,0,0);

image(rousseau,20,20);

Bien préciser le chemin complet des images !!


Chapitre 2

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 = loadImage("ile.jpg");

tint(255,0,0);

image(ile, 10,10, 110,110);

tint(255,255,0);

image(ile, 130,10, 110,110);

tint(255,255,255,127);

image(ile, 250,10, 110,110);

tint(0,0,255,127);

image(ile, 320,10, 110,110);

tint() peut prendre 1,2,3 ou 4 paramètres d’entrée…


Chapitre 2

9.5. Les méthodes et variables membres associées aux images

Voir la classe Pimage :


Chapitre 2

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


Chapitre 2

10.2 Méthode « strokeWeight() »

Fait varier l’épaisseur d’une ligne ou d’un contour

Exemple:

line(10, 0, 100, 90); // Ligne de 1 pixel d'épaisseur

strokeWeight(5); //On définit l'épaisseur à 5 pixels

line(0, 10, 90, 100); // Ligne de 5 pixels d'épaisseur

10.3 Méthode « strokeCap() »

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 3D (P3D – OpenGL)


Chapitre 2

Exemple:

strokeWeight(10); // On définit l'épaisseur des traits à 10 pixels

strokeCap(ROUND); // extrémité arrondie

line(20, 40, 60, 80);

strokeCap(PROJECT); // extrémité avec 2 petits angles brisés

line(20, 20, 80, 80);

strokeCap(SQ UARE); // extrémité carré

line(40, 20, 80, 60);


Chapitre 2

10.4 Méthode « strokeJoin() »

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 3D (P3D – OpenGL)

Exemple:

size(300, 100); // On définie la taille du sketch

strokeWeight(10); // On définit l'épaisseur à 10 pixels

strokeJoin(M ITER); // Jointure carré

rect(20, 20, 60, 60);

strokeJoin(BEVEL); // Jointure brisée

rect(120, 20, 60, 60);

strokeJoin(RO UND); // Jointure arrondie

rect(220, 20, 60, 60);


Chapitre 2

12. Les Transformations

Origine par défaut du dessin d’une forme : coin supérieur gauche de la fenêtre.

size(200, 200);

noStroke();

fill(0);

rect(0, 0, 100, 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)


Chapitre 2

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);

noStroke();

fill(0);

translate(50, 50);

rect(0, 0, 100, 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.


Chapitre 2

Exemple:

size(200,200);

// Noir

fill(0);

translate(20,20);

rect(0,0,40,40);

// Gris

fill(128);

translate(60,60);

rect(0,0,40,40);

// Blanc

fill(255);

translate(60,60);

rect(0,0,40,40);


Chapitre 2

12.2 Rotation d’un objet

(Voir p75 –Pearson)

Convention dans la mesure des angles:

size(200, 200);

noStroke();

fill(0);

rotate(PI/4);

rect(0, 0, 100, 100);

Exemple:

Rotation de π/4 radian = 45°


Chapitre 2

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 (inti=0;i<360;i+=30){

rotate(radians(30));

quad(0, 0, 30, 15, 70, 60, 20, 60);

}


Chapitre 2

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

Redimensionnement identique suivant x et y

scale(2)

Multiplie la taille par 2

scale(1)

Aucun effet

Découplage du redimensionnement suivant x et y:

Divise par 2 la taille suivant x

Exemple:

scale(0.5, 2.0)

Multiplie par 2 la taille suivant y

Application:

  • // Gris

  • fill(128);

  • scale(0.5);

  • rect(0,0,200,200);

  • // Blanc

  • fill(255);

  • scale(0.5);

  • rect(0,0,200,200);

size(200,200);

noStroke();

// Noir

fill(0);

scale(1);

rect(0,0,200,200);


Chapitre 2

12.4 Ordre des transformations

L’ordre des transformation est important !!


Chapitre 2

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 pushMatrix() et popMatrix().

Encapsulation de l’écriture (cf. html)

Après popMatrix() les anciennes transformations sont rétablies,

pushMatrix() enregistre les coordonnées du point d’origine du dessin, ainsi que la direction des axes et l’échelle, à un instant donné.

popMatrix() rétablit le point d’encrage stockée par la commande pushMatrix()

Ces deux fonctions sont utiles en animation (méthode draw() )


Chapitre 2

size(200,200);

smooth();

rectMode(CENTER);

// Repère au centre de l'écran

translate(width/2,height/2);

// la rotation ne s’applique qu’au //carré noir

rotate(PI/4);

// Dessin du carré noir

fill(0);

rect(0,0,120,120);

// Dessin du carré blanc qui ne //tient pas compte de la rotation

fill(255);

rect(0,0,50,50);

Exemple

size(200,200);

smooth();

rectMode(CENTER);

// Repère au centre de l'écran

translate(width/2,height/2);

// Sauvegarde des coordonnées //du repère

//pushMatrix();

// la rotation ne s’applique qu’au //carré noir

rotate(PI/4);

// Dessin du carré noir

fill(0);

rect(0,0,120,120);

// Restauration des coordonnées

// du repère au centre de l'écran-//annulation de la rotation des //axes

//popMatrix();

// Dessin du carré blanc qui ne //tient pas compte de la rotation

fill(255);

rect(0,0,50,50);


Chapitre 2

12.6 Transformations 3D

Translation, rotation, changement d’échelle sont applicables en 3D!!

Appeler la 3ième dimension: size(300,300,P3D);

Rajouter une 3ième coordonnées aux méthodes précédentes

translate(width/2, height/2, -100);

Exemple :

Exemple 2:

floatrx = 0;

floatry = 0;

float z = 100;

void setup() {

size(200,200,P3D);

}

voiddraw() {

background(128);

rx = map(mouseX, 0,width,-PI,PI);

ry = map(mouseY, 0,height,-PI,PI);

translate(width/2,height/2,z);

rotateX(rx);

rotateY(ry);

box(30);

}


Chapitre 2

12.7 Pourquoi pushMatrix et popMatrix ?

Transformations dans le plan (2D) et matrices:

Changement d’échelle : homothétie de centre O

Rotation

Matrice de rotation R(θ)

Matrice la transformation homothétique


Chapitre 2

Translation (2D)

A’

A

On se place dans un espace 3D (coordonnées homogènes)

Expression matricielle:

Matrice translation dans l’espace homogène 3D


Chapitre 2

Transformations dans l’espace (3D) 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


Chapitre 2

Translation (3D)

A’

A

On se place dans un espace 4D (coordonnées homogènes)

Expression matricielle:

Matrice translation dans l’espace homogène 4D


Chapitre 2

Cas général en (3D)

Vecteur de translation

Matrice 3×3 de rotation ou d’homothétie

Matrice 4×4 de transformation en coordonnées homogènes


  • Login