Processing : Différence entre versions

De Les Fabriques du Ponant
Aller à : navigation, rechercher
(Page créée avec « ==Présenbtation== ==CheatSheet== La feuille de triche 1 de tout PROCESSING.ORG ===STRUCTURE DE BASE=== void setup(){ // any instructions here are processed just once du... »)
 
(→‎POUR BOUCLER)
 
(31 révisions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
−
==Présenbtation==
+
==Présentation==
  
 
==CheatSheet==
 
==CheatSheet==
 
La feuille de triche 1 de tout PROCESSING.ORG
 
La feuille de triche 1 de tout PROCESSING.ORG
 +
 +
Voir également [https://processing.org/reference/ la référence de Processing].
 
===STRUCTURE DE BASE===
 
===STRUCTURE DE BASE===
−
void setup(){
+
<pre>
−
// any instructions here are processed just once during initial 'setup'
+
void setup(){ // les insctructions dans cette fonction ne jouée qu'une foi pendant l'initialisation.
−
}
 
−
void draw(){
 
−
// any instructions here are looped at roughly 60fps
 
 
}
 
}
−
// COMMENTS + DEBUG
+
void draw(){ // toutes les instructions ici sont jouées en boucle à environ 60 images par seconde
 +
}
 +
</pre>
 +
===COMMENTAIRES + DEBUG===
 +
<pre>
 
/*
 
/*
−
this is a multiline comment.
+
C'est un commentaire multiligne.
−
nothing between here will be run or executed */
+
Rien entre ces balises ne sera interprété comme du code
−
// this is a single line comment println(foo); // writes the value of 'foo' to the console, use to learn value of variable!
+
*/
−
// BASIC STYLE ATTRIBUTES
+
 
−
background(0); //sets background black (test having and not having in draw function ) size(640, 480); //sets canvas size to 640px * 480px size(screen.width, screen.height); //full screen canvas frameRate(15); //default frameRate is 30, only change when necessary noFill(); // turns off the fill of any object following this code
+
// ceci est une simple ligne de commentaire (juste une ligne)
−
fill(255); // turns fill on and sets color to white (note, one value for grayscale) fill(255, 145, 90, 150); // same but with color (r, g, b) + alpha as 4th digit noStroke(); // turns off stroke
+
 
−
stroke(0); // turns stroke back on and is black (use color as listed above) strokeWeight(5); // sets thickness of stroke (any value goes here)
+
println(foo); // écrit la valeur de 'foo' dans la console
−
smooth(); // turns on anti-aliasing for smoothening vectors rectMode(CENTER); // sets x and y of rect to center of rect (alt: ellipseMode, imageMode) noLoop(); // stops draw{} function from default 30fps looping
+
</pre>
−
loop(); // resumes looping
+
 
−
// BASIC FORMS
+
===ATTRIBUTS DE STYLE DE BASE===
−
point(x, y); // places single point on canvas based on x and y values
+
<pre>
−
line(x1, y1, x2, y2); // draws line from starting x2, y2 - to ending x2, y2 rect(x, y, width, height); // draws rectangle at given postition and size ellipse(x, y, w, h); // draws ellipse at given postition and size quad(x1, y1, x2, y2, x3, y3, x4, y4); // draws quad triangle(x1, y1, x2, y2, x3, y3); // draws triangle
+
background(0); //met l'arrière plan en noir
−
// VARIABLE TYPES
+
size(640, 480); //établis la taille de l'image (l'écran) à 640px * 480px  
−
int foo = 1; // integer or whole number (1, 2, 3, 4, ...)
+
size(screen.width, screen.height); //pour être en plein écran
−
float foo = 3.14; // float is decimal number (3.14159265) String foo = "blah"; // will be a "string which is written in quotes" boolean foo = false; // true or false
+
frameRate(15); //le rafraichissement par défaut est 30, ne changer que si nécéssaire
−
// INTERACTION
+
noFill(); // désactive le remplissage de tout objet suivant ce code
−
mouseX // grabs the X mouse coordinates, int variable
+
fill(255); // active le remplissage et définit la couleur sur blanc (note, une valeur pour les niveaux de gris)
−
mouseY // grabs the Y mouse coordinates, int variable
+
fill(255, 145, 90, 150); // idem mais avec couleur (r, g, b) + alpha comme 4ème chiffre
−
if(mousePressed){ } // used in the draw{ } function to know if mouse was pressed if(keyPressed){ } // used in the draw{ } function to know if any key was pressed if (key == 'a'){ } // is true if the letter a is pressed
+
noStroke(); // désactive le trait
−
if (keyCode == 32){ } // alternative for key, in this case is SP println(keyCode); // use this to learn the keyCode for any key on the keyboard
+
stroke(0); // active à nouveau le trait
−
// INTERACTION FUNCTIONS
+
strokeWeight(5); // définit l'épaisseur du trait
−
void mousePressed(){ } // will only trigger once when mouse is pressed void mouseReleased(){ } // will only trigger once when mouse is released void keyPressed(){ } // will only trigger once when key is pressed
+
smooth(); // active l'anticrénelage pour les vecteurs de lissage
−
void keyReleased(){ } // will only trigger once when key is released
+
rectMode(CENTER); // définit x et y de rect au centre de rect (pareil pour : ellipseMode, imageMode)
−
Of course not everything is here... but it would be of little help if it were. This is merely */ a reference guide for basic shapes, functions, math, etc... For a thorough explaination
+
noLoop(); // arrête la fonction draw {} de boucler par défaut à 30fps
−
of most concepts on this page, be sure to visit: www. processing.org/reference/
+
loop(); // reprends la boucle
−
where you'll find this + much much more! cc teddavis.org 2011 – fhnw hgk ivk
+
</pre>
−
// USEFUL PROPERTIES
+
 
−
width // refers to canvas width, int variable, 'width/2' for horizontal center height // refers to canvas height, int variable, 'height/2' for vertical center frameCount // returns current frame number, int variable
+
===FORMES DE BASE===
−
// MATH
+
<pre>
−
+ - * / // add, subtract, multiply, divide = basic math operations
+
point(x, y); // place un seul point sur le canevas en fonction des valeurs x et y
−
foo += 5; // value = it's current value + 5, used for constant motion in draw loop (+, -, *, /) foo = foo + 5; // same as above, but requires more code
+
line(x1, y1, x2, y2); // trace la ligne du début x2, y2 - à la fin x2, y2
−
foo ++; //similar to above, however only adds 1 each time (also works with --)
+
rect(x, y, width, height); // dessine un rectangle à la position et à la taille données (x, y, largeur, hauteur)
−
abs(); // absolute value, useful when comparing two numbers with subtraction floor(); // convert a float into an int
+
ellipse(x, y, w, h); // dessine une ellipse à la position et à la taille données
−
if(foo %2==0){ }; // checks if number is even (2 « or multiple of any other value)
+
quad(x1, y1, x2, y2, x3, y3, x4, y4); // dessine un tétragone (quatre cotés)
−
// RANDOM CHAOS!
+
triangle(x1, y1, x2, y2, x3, y3); // dessine un triangle
−
random(100); // generates a random float number from 0 » 99 random(75, 100); // generates a random float number from 75 » 99 noise(foo); // more organic than random = less jumpy, google 'perlin noise'
+
</pre>
−
// CONDITIONALS
+
 
−
a == b // a is EQUAL to b (note the use of two == signs) a != b // a is NOT EQUAL to b
+
===TYPES DE VARIABLES===
−
a > b // a is GREATER than b
+
<pre>
−
a < b // a is SMALLER than b
+
int foo = 1; // nombre entier (1, 2, 3, 4, ...)
−
a >= b // a is GREATER or EQUAL to b a <= b // a is SMALLER or EQUAL to b
+
float foo = 3.14; // un nombre décimal (3.14159265)
−
// CONDITIONAL STATEMENT
+
String foo = "blah"; // une "chaîne qui est écrite entre guillemets"
−
// if / or
+
boolean foo = false; // vrai ou faux
 +
</pre>
 +
 
 +
===INTERACTION===
 +
<pre>
 +
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
 +
</pre>
 +
 
 +
===FONCTIONS D'INTERACTION===
 +
<pre>
 +
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
 +
</pre>
 +
 
 +
===PROPRIETES UTILES===
 +
<pre>
 +
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"
 +
</pre>
 +
 
 +
===MATH===
 +
<pre>
 +
+ - * / // 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)
 +
</pre>
 +
 
 +
===HASARD !===
 +
<pre>
 +
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
 +
</pre>
 +
 
 +
===CONDITIONS===
 +
<pre>
 +
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
 +
</pre>
 +
 
 +
===TEST CONDITIONNEL===
 +
<pre>
 +
// si / ou
 
if(a == b){
 
if(a == b){
−
// if ‘a’ IS EQUAL to ‘b’ all code in between these { } will be executed
+
// 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)
 
}
 
}
−
// if / ifelse / or
+
// Si / Si sinon / ou
 
if(a == 1){
 
if(a == 1){
−
// if ‘a’ is equal to 1, this code is executed
+
// si ‘a’ est égal à 1, ce code sera joué
 
}else if(a == 2){
 
}else if(a == 2){
−
// or if this is true, this code is executed
+
// ou si c'est vrai, ce code sera joué
 
}else if(a == 3){
 
}else if(a == 3){
−
        // if NOT this code will be executed (note: an else{} is not always needed)
+
// ou si c'est ça qui est vrai, ce code sera joué 
−
}else{
+
}else{
 +
//et sinon, c'est celui-ci
 
}
 
}
−
// or if this is true, this code is executed //otherwise this will be executed
+
 
−
// LOGICAL OPERATOR
+
</pre>
−
if(a>0 && a<10){ } // BOTH statements must be true = AND
+
 
−
if(a<10 || a>100){ } // EITHER statement must be true = OR // FOR LOOP // your BEST friend for repetition... your BEST friend for repetition
+
===OPERATEURS LOGIQUES===
 +
<pre>
 +
if(a>0 && a<10){ } // Les DEUX instructions doivent être vraies = AND
 +
if(a<10 || a>100){ } // Soit l'un, soit l'autre = OR  
 +
</pre>
 +
 
 +
===POUR BOUCLER===
 +
<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++){
−
// looping events go here! point(i*5, 10); // i produces a unique number on every loop, use it!
+
// les événements en boucle vont ici!
−
} // int i starts at 0; as long as i is less than 100, the following loops; add 1 to i on each loop // MISC
+
point(i*5, 10); // i produit un numéro unique sur chaque boucle, utilisez-le!
−
foo = "pic_" + num + ".png"; // connect variable + "string" with plus signs saveFrame("output-####.png"); // save a PNG bitmap image
+
} // int i commence à 0; tant que i est inférieur à 100, les boucles suivantes; ajouter 1 à i sur chaque boucle
 +
</pre>
 +
 
 +
===AUTRE===
 +
<pre>
 +
foo = "pic_" + num + ".png"; // connecter une variable avec une "chaine" en utilisant le signe +
 +
saveFrame("output-####.png"); // sauvegarder une image Bitmap PNG
 +
</pre>

Version actuelle datée du 25 juin 2020 à 13:48

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
Récupérée de « http://wiki.lesfabriquesduponant.net/index.php?title=Processing&oldid=13993 »