Processing
Révision datée du 25 juin 2020 à 11:57 par Antonydbzh (discussion | contributions) (→ATTRIBUTS DE STYLE DE BASE)
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); // places single point on canvas based on x and y values 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
TYPES DE VARIABLES
int foo = 1; // integer or whole number (1, 2, 3, 4, ...) 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
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