Processing : Différence entre versions
(→ATTRIBUTS DE STYLE DE BASE) |
(→POUR BOUCLER) |
||
(10 révisions intermédiaires par le même utilisateur non affichées) | |||
Ligne 44 : | Ligne 44 : | ||
===FORMES DE BASE=== | ===FORMES DE BASE=== | ||
<pre> | <pre> | ||
− | point(x, y); // | + | point(x, y); // place un seul point sur le canevas en fonction des valeurs x et y |
− | line(x1, y1, x2, y2); // | + | line(x1, y1, x2, y2); // trace la ligne du début x2, y2 - à la fin x2, y2 |
− | rect(x, y, width, height); // | + | rect(x, y, width, height); // dessine un rectangle à la position et à la taille données (x, y, largeur, hauteur) |
− | ellipse(x, y, w, h); // | + | ellipse(x, y, w, h); // dessine une ellipse à la position et à la taille données |
− | quad(x1, y1, x2, y2, x3, y3, x4, y4); // | + | quad(x1, y1, x2, y2, x3, y3, x4, y4); // dessine un tétragone (quatre cotés) |
− | triangle(x1, y1, x2, y2, x3, y3); // | + | triangle(x1, y1, x2, y2, x3, y3); // dessine un triangle |
</pre> | </pre> | ||
===TYPES DE VARIABLES=== | ===TYPES DE VARIABLES=== | ||
<pre> | <pre> | ||
− | int foo = 1; // | + | int foo = 1; // nombre entier (1, 2, 3, 4, ...) |
− | float foo = 3.14; // | + | float foo = 3.14; // un nombre décimal (3.14159265) |
− | String foo = "blah"; // | + | String foo = "blah"; // une "chaîne qui est écrite entre guillemets" |
− | boolean foo = false; // | + | boolean foo = false; // vrai ou faux |
</pre> | </pre> | ||
===INTERACTION=== | ===INTERACTION=== | ||
<pre> | <pre> | ||
− | mouseX // | + | mouseX // capture les coordonnées X de la souris, c'est une variable de type "int" |
− | mouseY // | + | mouseY // capture les coordonnées Y de la souris, c'est une variable de type "int" |
− | if(mousePressed){ } // | + | if(mousePressed){ } // utilisé dans la fonction draw {} pour savoir si la souris a été pressée |
− | if(keyPressed){ } // | + | if(keyPressed){ } // utilisé dans la fonction draw {} pour savoir si une touche a été enfoncée |
− | if (key == 'a'){ } // | + | if (key == 'a'){ } // est vrai si la lettre "a" est pressée |
− | if (keyCode == 32){ } // alternative | + | if (keyCode == 32){ } // alternative pour key, dans ce cas est SP |
− | println(keyCode); // | + | println(keyCode); // utilise ceci pour connaitre le keyCode pour n'importe quelle touche du clavier |
</pre> | </pre> | ||
===FONCTIONS D'INTERACTION=== | ===FONCTIONS D'INTERACTION=== | ||
<pre> | <pre> | ||
− | void mousePressed(){ } // | + | void mousePressed(){ } // ne se déclenchera qu'une seule fois lorsque la souris est enfoncée |
− | void mouseReleased(){ } // | + | void mouseReleased(){ } // ne se déclenchera qu'une seule fois lorsque la souris sera relâchée |
− | void keyPressed(){ } // | + | void keyPressed(){ } // ne se déclenchera qu'une seule fois lorsque la touche est enfoncée |
− | void keyReleased(){ } // | + | void keyReleased(){ } // ne se déclenchera qu'une seule fois lorsque la touche sera relâchée |
− | + | Bien sûr, tout n'est pas là ... mais cela ne serait d'aucune utilité s'il l'était. Ceci est simplement un guide de référence pour les formes de base, les fonctions, les mathématiques, etc ... Pour une explication approfondie | |
− | + | de la plupart des concepts de cette page, visitez : www. processing.org/reference/ | |
− | + | où vous trouverez ceci et beaucoup plus ! cc teddavis.org 2011 – fhnw hgk ivk | |
</pre> | </pre> | ||
===PROPRIETES UTILES=== | ===PROPRIETES UTILES=== | ||
<pre> | <pre> | ||
− | width // | + | width // fait référence à la largeur de l'espace de dessin, variable de type "int", le centre horizontal est à width/2 |
− | height // | + | height // fait référence à la hauteur de l'espace de dessin, variable de type "int", le centre vertical est à heigth/2 |
− | frameCount // | + | frameCount // renvoie le numéro de l'image actuelle, variable de type "int" |
</pre> | </pre> | ||
===MATH=== | ===MATH=== | ||
<pre> | <pre> | ||
− | + - * / // | + | + - * / // ajouter, soustraire, multiplier, diviser = opérations mathématiques de base |
− | foo += 5; // | + | foo += 5; // valeur "foo" devient la valeur actuelle de foo + 5, utilisée pour le mouvement dans la boucle de dessin (+, -, *, /) |
− | foo = foo + 5; // | + | foo = foo + 5; // pareil mais avec plus de code |
− | foo ++; // | + | foo ++; // similaire à ci-dessus, mais ajoute seulement 1 à chaque fois (fonctionne également avec -) |
− | abs(); // | + | abs(); // valeur absolue, utile pour comparer deux nombres avec soustraction |
− | floor(); // | + | floor(); // convertit une variable "float" en "int" |
− | if(foo %2==0){ }; // | + | if(foo %2==0){ }; // vérifie si le nombre est pair (ou multiple de toute autre valeur) |
</pre> | </pre> | ||
===HASARD !=== | ===HASARD !=== | ||
<pre> | <pre> | ||
− | random(100); // | + | random(100); // génère un nombre flottant aléatoire de 0 à 99 |
− | random(75, 100); // | + | random(75, 100); // génère un nombre flottant aléatoire de 75 à 99 |
− | noise(foo); // | + | noise(foo); // plus organique que aléatoire = moins nerveux, voir Bruit de perlin : https://en.wikipedia.org/wiki/Perlin_noise |
</pre> | </pre> | ||
===CONDITIONS=== | ===CONDITIONS=== | ||
<pre> | <pre> | ||
− | a == b // a | + | a == b // a est EGAL à b (note the use of two == signs) |
− | a != b // a | + | a != b // a n'est PAS EGAL à b |
− | a > b // a | + | a > b // a est PLUS GRAND que b |
− | a < b // a | + | a < b // a est PLUS PETIT que b |
− | a >= b // a | + | a >= b // a est SUPERIEUR OU EGAL à b |
− | a <= b // a is | + | a <= b // a is INFERIEUR OU EGAL à b |
</pre> | </pre> | ||
===TEST CONDITIONNEL=== | ===TEST CONDITIONNEL=== | ||
<pre> | <pre> | ||
− | // | + | // si / ou |
if(a == b){ | if(a == b){ | ||
− | // | + | // si ‘a’ EST EGAL à ‘b’ le code entre parenthèse { } sera joué |
}else{ | }else{ | ||
− | // | + | // SiNON c'est ce code qui sera joué (note : un else{} est toujours requis) |
} | } | ||
− | // | + | // Si / Si sinon / ou |
if(a == 1){ | if(a == 1){ | ||
− | // | + | // si ‘a’ est égal à 1, ce code sera joué |
}else if(a == 2){ | }else if(a == 2){ | ||
− | // | + | // ou si c'est vrai, ce code sera joué |
}else if(a == 3){ | }else if(a == 3){ | ||
− | // | + | // ou si c'est ça qui est vrai, ce code sera joué |
}else{ | }else{ | ||
− | // | + | //et sinon, c'est celui-ci |
} | } | ||
Ligne 140 : | Ligne 140 : | ||
===OPERATEURS LOGIQUES=== | ===OPERATEURS LOGIQUES=== | ||
<pre> | <pre> | ||
− | if(a>0 && a<10){ } // | + | if(a>0 && a<10){ } // Les DEUX instructions doivent être vraies = AND |
− | if(a<10 || a>100){ } // | + | if(a<10 || a>100){ } // Soit l'un, soit l'autre = OR |
</pre> | </pre> | ||
+ | |||
===POUR BOUCLER=== | ===POUR BOUCLER=== | ||
<pre> | <pre> | ||
− | + | votre MEILLEUR ami pour la répétition ... votre MEILLEUR ami pour la répétition | |
for (int i = 0; i < 100; i++){ | for (int i = 0; i < 100; i++){ | ||
− | // | + | // les événements en boucle vont ici! |
− | point(i*5, 10); // i | + | point(i*5, 10); // i produit un numéro unique sur chaque boucle, utilisez-le! |
− | } // int i | + | } // int i commence à 0; tant que i est inférieur à 100, les boucles suivantes; ajouter 1 à i sur chaque boucle |
</pre> | </pre> | ||
Version actuelle datée du 25 juin 2020 à 13:48
Sommaire
- 1 Présentation
- 2 CheatSheet
- 2.1 STRUCTURE DE BASE
- 2.2 COMMENTAIRES + DEBUG
- 2.3 ATTRIBUTS DE STYLE DE BASE
- 2.4 FORMES DE BASE
- 2.5 TYPES DE VARIABLES
- 2.6 INTERACTION
- 2.7 FONCTIONS D'INTERACTION
- 2.8 PROPRIETES UTILES
- 2.9 MATH
- 2.10 HASARD !
- 2.11 CONDITIONS
- 2.12 TEST CONDITIONNEL
- 2.13 OPERATEURS LOGIQUES
- 2.14 POUR BOUCLER
- 2.15 AUTRE
Présentation
CheatSheet
La feuille de triche 1 de tout PROCESSING.ORG
Voir également la référence de Processing.
STRUCTURE DE BASE
void setup(){ // les insctructions dans cette fonction ne jouée qu'une foi pendant l'initialisation. } void draw(){ // toutes les instructions ici sont jouées en boucle à environ 60 images par seconde }
COMMENTAIRES + DEBUG
/* C'est un commentaire multiligne. Rien entre ces balises ne sera interprété comme du code */ // ceci est une simple ligne de commentaire (juste une ligne) println(foo); // écrit la valeur de 'foo' dans la console
ATTRIBUTS DE STYLE DE BASE
background(0); //met l'arrière plan en noir size(640, 480); //établis la taille de l'image (l'écran) à 640px * 480px size(screen.width, screen.height); //pour être en plein écran frameRate(15); //le rafraichissement par défaut est 30, ne changer que si nécéssaire noFill(); // désactive le remplissage de tout objet suivant ce code fill(255); // active le remplissage et définit la couleur sur blanc (note, une valeur pour les niveaux de gris) fill(255, 145, 90, 150); // idem mais avec couleur (r, g, b) + alpha comme 4ème chiffre noStroke(); // désactive le trait stroke(0); // active à nouveau le trait strokeWeight(5); // définit l'épaisseur du trait smooth(); // active l'anticrénelage pour les vecteurs de lissage rectMode(CENTER); // définit x et y de rect au centre de rect (pareil pour : ellipseMode, imageMode) noLoop(); // arrête la fonction draw {} de boucler par défaut à 30fps loop(); // reprends la boucle
FORMES DE BASE
point(x, y); // place un seul point sur le canevas en fonction des valeurs x et y line(x1, y1, x2, y2); // trace la ligne du début x2, y2 - à la fin x2, y2 rect(x, y, width, height); // dessine un rectangle à la position et à la taille données (x, y, largeur, hauteur) ellipse(x, y, w, h); // dessine une ellipse à la position et à la taille données quad(x1, y1, x2, y2, x3, y3, x4, y4); // dessine un tétragone (quatre cotés) triangle(x1, y1, x2, y2, x3, y3); // dessine un triangle
TYPES DE VARIABLES
int foo = 1; // nombre entier (1, 2, 3, 4, ...) float foo = 3.14; // un nombre décimal (3.14159265) String foo = "blah"; // une "chaîne qui est écrite entre guillemets" boolean foo = false; // vrai ou faux
INTERACTION
mouseX // capture les coordonnées X de la souris, c'est une variable de type "int" mouseY // capture les coordonnées Y de la souris, c'est une variable de type "int" if(mousePressed){ } // utilisé dans la fonction draw {} pour savoir si la souris a été pressée if(keyPressed){ } // utilisé dans la fonction draw {} pour savoir si une touche a été enfoncée if (key == 'a'){ } // est vrai si la lettre "a" est pressée if (keyCode == 32){ } // alternative pour key, dans ce cas est SP println(keyCode); // utilise ceci pour connaitre le keyCode pour n'importe quelle touche du clavier
FONCTIONS D'INTERACTION
void mousePressed(){ } // ne se déclenchera qu'une seule fois lorsque la souris est enfoncée void mouseReleased(){ } // ne se déclenchera qu'une seule fois lorsque la souris sera relâchée void keyPressed(){ } // ne se déclenchera qu'une seule fois lorsque la touche est enfoncée void keyReleased(){ } // ne se déclenchera qu'une seule fois lorsque la touche sera relâchée Bien sûr, tout n'est pas là ... mais cela ne serait d'aucune utilité s'il l'était. Ceci est simplement un guide de référence pour les formes de base, les fonctions, les mathématiques, etc ... Pour une explication approfondie de la plupart des concepts de cette page, visitez : www. processing.org/reference/ où vous trouverez ceci et beaucoup plus ! cc teddavis.org 2011 – fhnw hgk ivk
PROPRIETES UTILES
width // fait référence à la largeur de l'espace de dessin, variable de type "int", le centre horizontal est à width/2 height // fait référence à la hauteur de l'espace de dessin, variable de type "int", le centre vertical est à heigth/2 frameCount // renvoie le numéro de l'image actuelle, variable de type "int"
MATH
+ - * / // ajouter, soustraire, multiplier, diviser = opérations mathématiques de base foo += 5; // valeur "foo" devient la valeur actuelle de foo + 5, utilisée pour le mouvement dans la boucle de dessin (+, -, *, /) foo = foo + 5; // pareil mais avec plus de code foo ++; // similaire à ci-dessus, mais ajoute seulement 1 à chaque fois (fonctionne également avec -) abs(); // valeur absolue, utile pour comparer deux nombres avec soustraction floor(); // convertit une variable "float" en "int" if(foo %2==0){ }; // vérifie si le nombre est pair (ou multiple de toute autre valeur)
HASARD !
random(100); // génère un nombre flottant aléatoire de 0 à 99 random(75, 100); // génère un nombre flottant aléatoire de 75 à 99 noise(foo); // plus organique que aléatoire = moins nerveux, voir Bruit de perlin : https://en.wikipedia.org/wiki/Perlin_noise
CONDITIONS
a == b // a est EGAL à b (note the use of two == signs) a != b // a n'est PAS EGAL à b a > b // a est PLUS GRAND que b a < b // a est PLUS PETIT que b a >= b // a est SUPERIEUR OU EGAL à b a <= b // a is INFERIEUR OU EGAL à b
TEST CONDITIONNEL
// si / ou if(a == b){ // si ‘a’ EST EGAL à ‘b’ le code entre parenthèse { } sera joué }else{ // SiNON c'est ce code qui sera joué (note : un else{} est toujours requis) } // Si / Si sinon / ou if(a == 1){ // si ‘a’ est égal à 1, ce code sera joué }else if(a == 2){ // ou si c'est vrai, ce code sera joué }else if(a == 3){ // ou si c'est ça qui est vrai, ce code sera joué }else{ //et sinon, c'est celui-ci }
OPERATEURS LOGIQUES
if(a>0 && a<10){ } // Les DEUX instructions doivent être vraies = AND if(a<10 || a>100){ } // Soit l'un, soit l'autre = OR
POUR BOUCLER
votre MEILLEUR ami pour la répétition ... votre MEILLEUR ami pour la répétition for (int i = 0; i < 100; i++){ // les événements en boucle vont ici! point(i*5, 10); // i produit un numéro unique sur chaque boucle, utilisez-le! } // int i commence à 0; tant que i est inférieur à 100, les boucles suivantes; ajouter 1 à i sur chaque boucle
AUTRE
foo = "pic_" + num + ".png"; // connecter une variable avec une "chaine" en utilisant le signe + saveFrame("output-####.png"); // sauvegarder une image Bitmap PNG