Processing

De Les Fabriques du Ponant
Révision datée du 25 juin 2020 à 13:30 par Antonydbzh (discussion | contributions) (FONCTIONS D'INTERACTION)
Aller à : navigation, rechercher

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 // 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

MATH

+ - * / // add, subtract, multiply, divide = basic math operations
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
foo ++; //similar to above, however only adds 1 each time (also works with --)
abs(); // absolute value, useful when comparing two numbers with subtraction 
floor(); // convert a float into an int
if(foo %2==0){ }; // checks if number is even (2 « or multiple of any other value)

HASARD !

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'

CONDITIONS

a == b // a is EQUAL to b (note the use of two == signs) 
a != b // a is NOT EQUAL to b
a > b // a is GREATER than b
a < b // a is SMALLER than b
a >= b // a is GREATER or EQUAL to b 
a <= b // a is SMALLER or EQUAL to b

TEST CONDITIONNEL

// if / or
if(a == b){
// if ‘a’ IS EQUAL to ‘b’ all code in between these { } will be executed
}else{
// if NOT this code will be executed (note: an else{} is not always needed)
}
// if / ifelse / or
if(a == 1){
// if ‘a’ is equal to 1, this code is executed
}else if(a == 2){
// or if this is true, this code is executed
}else if(a == 3){
// or if this is true, this code is executed    
}else{
//otherwise this will be executed
}

OPERATEURS LOGIQUES

if(a>0 && a<10){ } // BOTH statements must be true = AND
if(a<10 || a>100){ } // EITHER statement must be true = OR 

POUR BOUCLER

your BEST friend for repetition... your BEST friend for repetition
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!
} // int i starts at 0; as long as i is less than 100, the following loops; add 1 to i on each loop 

AUTRE

foo = "pic_" + num + ".png"; // connecter une variable avec une "chaine" en utilisant le signe + 
saveFrame("output-####.png"); // sauvegarder une image Bitmap PNG