Processing

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 // grabs the X mouse coordinates, int variable
mouseY // grabs the Y mouse coordinates, int variable
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
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

FONCTIONS D'INTERACTION

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
void keyReleased(){ } // will only trigger once when key is released
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
of most concepts on this page, be sure to visit: www. processing.org/reference/
where you'll find this + much much more! 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