# Programmation sous Processing
## L’orthographe en programmation sous Processing.
### le ; (semicolon)
Suivant le langage de programmation on termine chaque phrase de programmation ou expression par un ; ceci afin de transformer l’expression en instruction.
### Les accolades { }
Les accolades sont utilisées pour encadrer un bloc de code ou une fonction.
### les commentaires //
Ecrire un mémo dans les blocs de programme qui ne sera pas éxécuté.
exemple :
```java!
// 1er bloc de programme
void setup()
{
size(200,200);
// instructions du bloc setup
// instructions
}
// second bloc
void draw() {
// instructions du bloc draw
// instructions
}
```
## Les variables primitives
### Définition
En informatique, les variables associent un nom (le symbole) à une valeur ou un objet, elles contiennent l’information utile.
Exemple:
`a=2;`
Qui est équivalent à "je mets 2 dans la variable a" ou 2->a
### Les différents types de variable
#### Les entiers (int)
Un entier naturel est un nombre positif, négatif ou nul permettant fondamentalement de dénombrer des objets.
Syntaxe :
`int nom_variable;`
Exemple :
Intéger le code suivant dans le bloc `void draw()`
```java!
int a; // Declare variable 'a' of type int
a = 23; // Assign 'a' the value 23
int b = -256; // Declare variable 'b' and assign it the value -256
int c = a + b; // Declare variable 'c' and assign it the sum of 'a' and 'b'
```
##### Exercices 1.1.1
Afficher le contenu de la variable c à l'aide de l'instruction `print()` dans la sortie texte.
Bibliothèque des intructions.
https://processing.org/reference/
Rq : Si vous voulez voir apparaitre une seule fois le résultat intégrer le code dans le bloc `void setup()`
### Les décimaux (float)
Les nombres à virgule sont les nombres les plus souvent utilisés dans un ordinateur pour représenter des valeurs non entières.
Syntaxe :
`float nom_variable;`
Exemple :
```java!
float a; // Declare variable 'a' of type float
a = 1.5387; // Assign 'a' the value 1.5387
float b = -2.984; // Declare variable 'b' and assign it the value -2.984
float c = a + b; // Declare variable 'c' and assign it the sum of 'a' and 'b'
```
##### Exercices 1.1.2
Trouver en utilisant la fonction print la précision de la variable float. Nombre de chiffres après la virgule pour lequel le résultat du calcul est bon.
### Les caractères (char)
Variable contenant un caractère ou un symbole
Syntaxe :
`char nom_variable;`
Exemple:
```java!
char m; // Declare variable 'm' of type char
m = 'A'; // Assign 'm' the value "A"
```
### Les chaînes de caractères (string)
Variable contenant une série de caractère.
Syntaxe :
`string nom_variable;`
Exemple :
```java!
String str1 = "CCCP";
char data[] = {'C', 'C', 'C', 'P'};
String str2 = new String(data);
println(str1); // Prints "CCCP" to the console
println(str2); // Prints "CCCP" to the console
```
### La sortie graphique
Le sens des axes peut être différent des conventions.
##### Exercices 1.3
Retenter de réaliser la figure de la précédente séquence.
En utilisant les variables protégées `width` et `height` de largeur et de hauteur de la fenêtre
Compléter le code suivant
```java!
void setup() {
size(640, 380);
// L'instruction size(..) nitialise automatiquemenet
// les variables 'width' et 'height'
// idem-->
//width=640
//height=380;
}
void draw() {
strokeWeight(4); // Default
stroke(255,0,127);
//Utiliser les variables protégées `width` et `height` dans les instructrions line
line(....);
line(....);
}
```
##### Exercices 1.4
Vérifier en changeant la taille de la fenêtre que la figure géométrique respecte la forme définie.
## Le programme principal
On définit sous processing un setup `void setup()` et un programme principal `void draw()`, nous allons voir par la suite comment appeler des fonctions créées par l'utilisateur à l'intérieur du programme principal.
Exemple:
-----
Ci-dessous vous trouverez les commentaires et du code
On définit dans le setup les constantes liées au programmes. Ici en l'occurrence on définit la taille de la fenêtre d'affichage.
```java!
void setup()
{
size(200,200);
}
//On défini une variable global valable pour toutes les fonctions ou sous fonctions
int i=10;
//On défini le programme principal appelé void draw()
void draw()
{
efface();
carre(100,100,i);
i=i+20;
if (i>200) i=10;
}
```
Vous remarquerez qu'à l'intérieur de ce programme principal on appel des fonctions `efface();` et `carre(100,100,i);` que l'on ne trouve pas dans la bibliothèque de référence de processing. Ces fonctions ont été créées par l'utilisateur et nous allons voir comment les réaliser
## Les fonctions
Les fonctions se trouvent à plusieurs niveaux dans le langage Processing et comme dans tout autre langage de programmation. Vous les utilisez sans le savoir lorsque, par exemple, vous utiliser la commande line(xa,ya,xb,yb); vous utilisez une fonction qui détermine une trajectoire entre 2 points et dessine pixel par pixel ce trajet.
Vous allez donc vous même pouvoir définir vos propres fonctions.
### Fonction sans passage de paramètre
Prototype: Le prototype définit la manière et la syntaxe à uiliser pour réaliser une fonction.
```java!
void Nom_De_La_Fonction()
{
instruction1;
instruction2;
....
}
```
`void ` :
Signifie que la fonction ne renvoie aucune valeur.
`Nom_De_La_Fonction()`:
Le nom de la fonction suit les mêmes règles que les noms de variables :
:::info
* le nom doit commencer par une lettre
* un nom de fonction peut comporter des lettres, des chiffres et les caractères _ et & (les espaces ne sont pas autorisés !)
* le nom de la fonction, comme celui des variables est sensible à la casse (différenciation entre les minuscules et majuscules)
:::
`instruction1;` :
Défini la première instruction contenu dans la fonction
##### Exercices 1.5
---
Réaliser un programme qui dessine une maison, (un carré+un triangle) en complétant le programme ci-dessous.
:warning:
:::danger
la fonction
```javascript!
void maison() {
}
```
doit uniquement contenir des instructions `line(...)`.
Vous avez donc 6 instructions `line(...)` à placer.
:::
```java!
void setup()
{
size(200,200);
}
//On défini la fonction de dessin d'une maison appelé void maison()
void maison()
{
//instructions line(.....) pour déssiner la maion
//...
}
//On défini le programme principal appelé void draw() qui appel la fonction maison
void draw()
{
maison();
}
```
---
### Fonction avec passage de paramètre
Prototype:
```java!
void Nom_De_La_Fonction(type1 argument1, type2 argument2, ...)
{
instruction1;
instruction2;
....
}
```
`type1 `:
Représente le type de valeur que la fonction recoit (char, int, float...)
`argument1` :
Représente le nom donné à la variable utilisé dans la fonction.
##### Exercices 1.6
Réaliser un programme qui dessine une maison, (un carré+un triangle) en complétant le programme ci-dessous
:warning:
:::danger
* Le prototype de la fonction maison est la suivant
`maison(int x1, int y1)`
* x1 y1 sont les coordonées du coin bas gauche de la maison.
* la fonction maison doit uniquement utiliser l'instruction line.
:::
```java!
void setup()
{
size(200,200);
}
//On défini la fonction de dessin d'une maison nomée void maison()
void maison(int x1, int y1)
{
//instructions pour déssiner la maion
//...
}
//On défini le programme principal appelé void draw() qui appel la fonction maison
void draw()
{
maison(0,height);
maison(10,height-10);
}
```
---
##### Exercices 1.7
Réaliser un programme qui dessine une maison, (un carré+un triangle) en complétant le programme ci-dessous
:warning:
:::danger
* Le prototype de la fonction maison est la suivant
`maison(int x1, int y1, int taille)`
* x1 y1 sont les coordonées du coin bas gauche de la maison.
* taille correspond à la taille de la maison(la base et la hauteur).
* la fonction maison doit uniquement utiliser l'instruction line.
:::
```java!
void setup()
{
size(200,200);
}
//On défini la fonction de dessin d'une maison nomée void maison()
void maison(int x1, int y1, int taille)
{
//instructions pour déssiner la maion
//...
}
//On défini le programme principal appelé void draw() qui appel la fonction maison
void draw()
{
maison(0,height,50);
maison(60,height-10,80);
//etc..
}
```
---
### Fonction avec passage de paramètre et retour de paramètre
Prototype:
```java!
type_de_donnee void Nom_De_La_Fonction(type1 argument1, type2 argument2, ...)
{
instruction1;
instruction2;
....
return(donnee);
}
```
`type_de_donnee ` :
Représente le type de valeur que la fonction est sensée retourner (char, int, float...)
`return(donnee);`
indique la variable ainsi que sa valeur retournée au programme principal suivant, bien sur, le type indiqué dans le prototype de la fonction. Le programme principal interprétera lui une valeur.
Appel de fonction
Pour exécuter une fonction, il suffit de faire appel à elle en écrivant son nom (une fois de plus en respectant la casse) suivi d'une parenthèse ouverte (éventuellement des arguments) puis d'une parenthèse fermée :
`Nom_De_La_Fonction(argument1, argument2);`
Remarques :
le point-virgule signifie la fin d'une instruction et permet au navigateur de distinguer les différents blocs d'instructions
Si jamais vous avez défini des arguments dans la déclaration de la fonction, il faudra veiller à les inclure lors de l'appel de la fonction (le même nombre d'arguments séparés par des virgules !) Nom_De_La_Fonction(argument1, argument2);
## Synthèse
##### Exercices 1.7
On vous demande de réaliser une fonction réalisant un trait d'épaisseur 10 pixels à l'aide d'une fonction. La fonction réalisant le trait de 10 pixels doit être appelée dans le void draw() de votre programme principal.
:::danger
* Le prototype de la fonction maison est la suivant
`trait(int x1, int y1, int x2, int y2)`
* x1 y1 sont les coordonées du 1er point.
* x2 y2 sont les coordonées du sedond point.
* la fonction trait doit uniquement utiliser l'instruction line.
:::
Donner l'ensemble de votre code.
Vous réaliser toujours cette même fonction mais cette fois ci l'on veut passer en paramètre les coordonnées des 2 extrémités du trait. Votre fonction doit ressembler au prototype suivant grossir-trait(int xa, int ya, int xb, int yb)
et doit réaliser un trait de 10 pixels entre ces 2 points.
Donner l'ensemble de votre code.
Vous devez réaliser une fonction qui dessine une maison, c'est-à-dire un carré avec un rectangle. Cette fonction accepte en paramètre les coordonnées du point
maison(int xa, int ya)
et doit réaliser un trait de 10 pixels entre ces 2 points.
Donner l'ensemble de votre code.
Sign in with Wallet
Connect another wallet