Processing : Différence entre versions

De Les Fabriques du Ponant
Aller à : navigation, rechercher
(DÉCLARATION CONDITIONNELLE)
Ligne 4 : Ligne 4 :
 
La feuille de triche 1 de tout PROCESSING.ORG
 
La feuille de triche 1 de tout PROCESSING.ORG
 
===STRUCTURE DE BASE===
 
===STRUCTURE DE BASE===
 +
<pre>
 
void setup(){ // les insctructions dans cette fonction ne jouée qu'une foi pendant l'initialisation.
 
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  
 
void draw(){ // toutes les instructions ici sont jouées en boucle à environ 60 images par seconde  
 
}
 
}
 +
</pre>
 
===COMMENTAIRES + DEBUG===
 
===COMMENTAIRES + DEBUG===
 +
<pre>
 
/*
 
/*
 
this is a multiline comment.
 
this is a multiline comment.
 
nothing between here will be run or executed */
 
nothing between here will be run or executed */
 
// this is a single line comment println(foo); // writes the value of 'foo' to the console, use to learn value of variable!
 
// this is a single line comment println(foo); // writes the value of 'foo' to the console, use to learn value of variable!
 +
</pre>
 
===ATTRIBUTS DE STYLE DE BASE===
 
===ATTRIBUTS DE STYLE DE BASE===
 +
<pre>
 
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
 
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
 
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
 
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
Ligne 19 : Ligne 24 :
 
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
 
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
 
loop(); // resumes looping
 
loop(); // resumes looping
 +
</pre>
 
===FORMES DE BASE===
 
===FORMES DE BASE===
 +
<pre>
 
point(x, y); // places single point on canvas based on x and y values
 
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
 
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
 +
</pre>
 
===TYPES DE VARIABLES===
 
===TYPES DE VARIABLES===
 +
<pre>
 
int foo = 1; // integer or whole number (1, 2, 3, 4, ...)
 
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
 
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
 +
</pre>
 
===INTERACTION===
 
===INTERACTION===
 +
<pre>
 
mouseX // grabs the X mouse coordinates, int variable
 
mouseX // grabs the X mouse coordinates, int variable
 
mouseY // grabs the Y 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(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
 
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
 +
</pre>
 
===FONCTIONS D'INTERACTION===
 
===FONCTIONS D'INTERACTION===
 +
<pre>
 
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 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
 
void keyReleased(){ } // will only trigger once when key is released
Ligne 36 : Ligne 49 :
 
of most concepts on this page, be sure to visit: www. processing.org/reference/
 
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
 
where you'll find this + much much more! cc teddavis.org 2011 – fhnw hgk ivk
 +
</pre>
 
===PROPRIETES UTILES===
 
===PROPRIETES UTILES===
 +
<pre>
 
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
 
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
 +
</pre>
 
===MATH===
 
===MATH===
 +
<pre>
 
+ - * / // add, subtract, multiply, divide = basic math operations
 
+ - * / // 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 += 5; // value = it's current value + 5, used for constant motion in draw loop (+, -, *, /) foo = foo + 5; // same as above, but requires more code
Ligne 44 : Ligne 61 :
 
abs(); // absolute value, useful when comparing two numbers with subtraction floor(); // convert a float into an int
 
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)
 
if(foo %2==0){ }; // checks if number is even (2 « or multiple of any other value)
 +
</pre>
 
===HASARD !===
 
===HASARD !===
 +
<pre>
 
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'
 
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>
 
===CONDITIONS===
 
===CONDITIONS===
 +
<pre>
 
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 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 GREATER than b
 
a < b // a is SMALLER 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
 
a >= b // a is GREATER or EQUAL to b a <= b // a is SMALLER or EQUAL to b
 +
</pre>
 
===TEST CONDITIONNELLE===
 
===TEST CONDITIONNELLE===
 +
<pre>
 
// if / or
 
// if / or
 
if(a == b){
 
if(a == b){
Ligne 67 : Ligne 90 :
 
}
 
}
 
// or if this is true, this code is executed //otherwise this will be executed
 
// or if this is true, this code is executed //otherwise this will be executed
 
+
</pre>
 
===OPERATEURS LOGIQUES===
 
===OPERATEURS LOGIQUES===
 +
<pre>
 
if(a>0 && a<10){ } // BOTH statements must be true = AND
 
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
 
if(a<10 || a>100){ } // EITHER statement must be true = OR // FOR LOOP // your BEST friend for repetition... your BEST friend for repetition
Ligne 75 : Ligne 99 :
 
} // int i starts at 0; as long as i is less than 100, the following loops; add 1 to i on each loop // MISC
 
} // int i starts at 0; as long as i is less than 100, the following loops; add 1 to i on each loop // MISC
 
foo = "pic_" + num + ".png"; // connect variable + "string" with plus signs saveFrame("output-####.png"); // save a PNG bitmap image
 
foo = "pic_" + num + ".png"; // connect variable + "string" with plus signs saveFrame("output-####.png"); // save a PNG bitmap image
 +
</pre>

Version du 25 juin 2020 à 12:19

Présenbtation

CheatSheet

La feuille de triche 1 de tout PROCESSING.ORG

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

/*
this is a multiline comment.
nothing between here will be run or executed */
// this is a single line comment println(foo); // writes the value of 'foo' to the console, use to learn value of variable!

ATTRIBUTS DE STYLE DE BASE

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
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)
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
loop(); // resumes looping

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 CONDITIONNELLE

// if / or
if(a == b){
// if ‘a’ IS EQUAL to ‘b’ all code in between these { } will be executed
}else{
}
// 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){
         // if NOT this code will be executed (note: an else{} is not always needed)
 }else{
}
// or if this is true, this code is executed //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 // FOR LOOP // 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 // MISC
foo = "pic_" + num + ".png"; // connect variable + "string" with plus signs saveFrame("output-####.png"); // save a PNG bitmap image