Processing
Pour coder un algorithme on utilise un langage de programmation.
Il existe un très grand nombre de langages, nous travaillerons avec le langage Processing.
Processing est un langage et un environnement de programmation open-source Ce language basique offre de très nombreuses possibilités, et laisse libre cours à votre imagination, notamment grâce à sa centaine de librairies disponibles.
Processing offre la possibilité de faire de la 3D, des jeux en réseau, des effets de son et lumière mais aussi bien d'autres possibilités.
Structurer ses codes
Sur votre machine, créez un répertoire (un dossier) nommé processing dans Mes documents. Dans ce dossier créez un autre dossier nommé cours1 Il contiendra tous les fichiers de cette leçon.
Prise en main
Cliquez sur l'icone processing : 
Vous voyez apparaître l'écran ci-dessous.
Cet écran est l'éditeur de processing. L'éditeur d'un langage de programmation nous permet d'écrire ou de modifier un script écrit dans le langage de programmation. C'est en fait une page blanche où nous écrirons notre code.
Processing donne un nom par défaut à votre script, ici sketch_170619a.
Vous allez changer le nom de votre ficher en l'enregistrant dans votre dossier cours1 sous le nom de variables
Poue cette leçon, vous allez créer un dossier cours1 où vous enregistrerez tous les programmes de cette leçon.
Données et variables
Vocabulaires
L'essentiel du travail effectué par un programme d'ordinateur consiste à manipuler des données.
Ces données peuvent être de différents types,
numériques (entier, décimal), alphabétiques, ...
Ces données sont stockées dans des variables.
Avec le langage Processing on déclare le type de variable que nous allons utiliser.
Une variable respecte quelques règles de syntaxe incontournables :
- Le nom de la variable n'est composé que de lettres, majuscules ou minuscules, de chiffres et du symbole souligné .
- Le nom de la variable ne peut commencer par un chiffre.
- Le langage Processing est sensible à la casse, ce qui signifie que des lettres majuscules et minuscules ne constituent pas la même variable (AGE est différent de aGe, elle-même différente de age).
Stocker une valeur à une variable c'est lui affecter une valeur.
Tapez le code ci-dessous :
Ce qui nous intéresse c'est le résulat de ces deux lignes de code qui s'affiche en bas de l'éditeur sur fond noir.
Expliquons ces deux lignes.
Avec Processing chaque instruction ce termine par une point virgule.
A la ligne 1 on déclare la variable a comme un entier avec int et on affecte en même temps à la variable a la valeur 3 en utilisant l'opérateur = , appelé opérateur d'affectation.
Au niveau de l'ordinateur, déclarer une variable déclenche la réservation d'une zone de la mémoire attribuée à cette variable. Le programme peut ensuite lire ou écrire des données dans cette zone mémoire en manipulant la variable.
A la ligne 2 on affiche la valeur de a à l'aide de l'instruction print.
Il existe d'autres types de variable comme :
- les réels que l'on déclare avec float
- les caractères que l'on déclare avec char
- les chaînes de caractères que l'on déclare avec String
- les tableaux que nous verrons dans une autre leçon.
Commenter sert aussi à expliquer son code.
Vous avez remarqué aussi que l'instruction print a été remplacée par println qui permet un retour à loa ligne juste après l'afichage de la variable a si la ligne n'était pas commentée.
Pour mieux comprendre, décommentez les lignes 1 et 2 (on retire les //) et laissez print(a) au lieu de println(a).
Terminer votre script en recopiant les lignes 5, 6 puis 7 et 8 comme indiqué ci-dessous puis exécutez le programme.
Exercice 1 : calculs
Vous allez créer un nouveau fichier que vous nommerez calculs
Recopiez la ligne 1 puis la ligne 2 du script ci-dessous et vous l'exécutez.
Vous tapez les lignes 3 et 4 puis vous exécutez le script. Vous continuez ainsi en exécutant chaque fois après avoir taper deux lignes seulement.
D'autre part, en ligne 1 Porcessing a "collé" les caractères 6 et 3, on appelle cela la concaténation. Alors qu'en ligne 2 il affiche le résultat. Ainsi pour q'un résultat s'affiche vous n'oublierez pas les parenthèses.
Vous remarquerez que processing donne un résultat réel si les valeurs divisées sont elles mêmes écrites en réels, sinon le résultat est entier.
En ligne 7, l'opératuer % est aussi appelé module. Le reste de 7 divisé par 3 donne 1, on dit que 7 modulo 3 est 1.
Exercice 2 : Calculs avec des variables
Allez dans le menu fichier et créez un nouveau fichier que vous enregistrerez sous le nom calculs_variables. Puis tapez le code ci-dessous.
Complétez le script comme indiqué ci-dessous.
Exercice 3 : Expressions
Allez dans le menu fichier et créez un nouveau fichier que vous enregistrerez sous le nom expressions. Puis tapez le code ci-dessous en procédant comme précédemment, vous écrivez deux lignes et vous l'exécutez.
Exercice 4 : A vous de jouer !
Pour le premier exercice ci-dessous vous crérez, le fichier exercice1_1, exercice1 du chapitre 1 puis le fichier exercice2_1 pour l'exercice 2 etc....
- Déclarez trois variables a,b et c que vous affecterez respectivement par les valeurs 3,5 et 7. Puis affichez le résultat de l'expression a-b/c.
On obtiendra l'affichage
- Déclarez deux variables pi et r qua vous affecterez respectivement par les valeurs 3.14 et 10. Déterminer un programme qui donne le périmètre de ce cercle. On rappelle que P=2 x pi x r.
- On souhaite convertir 8 h 35 min 20 s en secondes.
Déclarez trois variables h,m et s que vous affecterez respectivement par les valeurs 8, 35 et 20. Puis affichez le résultat demandé.
On obtiendra l'affichage
Aide : Algorithme - On souhaite convertir 10 000 secondes en heures, minutes, secondes.
Déclarez trois variables h,m et s puis faîtes afficher le résultat demandé.
On obtiendra l'affichage
Aide : Algorithme
On obtiendra l'affichage
Mes premiers dessins
La fenêtre
- En ligne 1 size(largeur,hauteur) définit la taille de la fenêtre, ici 400 pixels pour la largeur et la hauteur.
- En ligne 2 background(Rouge,Vert,Bleu) définit la couleur de fond. Le code couleur est composée de trois nuances : (Rouge, Vert, Bleu), chacune allant de 0 à 255.
Pour obtenir un code couleur on peut utiliser le logiciel de windows Paint en allant sur l'icône Modifier les couleurs.
Pour la suite nous devons savoir que les pixels sur la fenêtre seront reprérés comme l'indique la figure ci-dessous.
Les formes
Les lignes
- La fonction stroke(Rouge,Vert,Bleu) permet de donner une couleur à un trait, ou de donner une couleur autour d'une forme.
- La fonction line(x1,y1,x2,y2) permet de tracer un trait entre deux points, le point de coordonnées (x1,y1) et le point de coordonnées (x2,y2).
- La fonction strokeWeight(epaisseur) permet de préciser l'épaisseur du trait.
Complétez le programme fenetre en copiant les lignes 3 à 7.
Les rectangles
- La fonction fill(Rouge,Vert,Bleu) permet de remplir une forme avec une couleur
- La fonction rect(x,y,largeur,hauteur) permet de dessiner un rectangle, x et y étant les coordonnées du point supérieur gauche
Commentez les lignes 3 à 7 puis complétez le programme comme indiqué ci-dessous.
On peut modifier l'endroit désigné par les coordonnées (x,y). En effet par défaut, x et y sont le coin supérieur gauche du rectangle. Vous pouvez modifier cela en choisissant le centre du rectangle pour les coordonnées (x,y). Pour cela vous utiliserez la fonction
rectMode(CENTER) avant de dessiner le rectangle.
Puis si on veut revenir au choix par défaut on écrira rectMode(CORNER).
Les ellipses
- La fonction ellipse(x,y,largeur,hauteur) permet de dessiner une ellipse ou un cercle, x et y étant les coordonnées du centre.
Complétez le programme en ajoutant la ligne 12 ci-dessous.
Les quadrilatères
- La fonction quad(x1, y1, x2, y2, x3, y3, x4, y4); permet de dessiner un quadrilatère. Pour se faire, il faut passer en paramètres les coordonnées du point supérieur gauche (x1,y1), du point supérieur droit, (x2,y2), du point inférieur droit, (x3,y3) et du point inférieur gauche, (x4,y4).
Complétez le programme en ajoutant la ligne 13 ci-dessous.
Les points
- La fonction point(x,y) permet de dessiner le point de coordonnées (x,y).
Complétez le programme en ajoutant les lignes 14 et 15 ci-dessous.
Le texte
- La fonction text("texte",x,y) permet d'écrire le mot "texte" en commençant au point de coordonnées (x,y).
Complétez le programme en ajoutant les lignes 16 à 19 ci-dessous.
Le triangle
- La fonction triangle(x1,y1,x2,y2,x3,y3) permet de dessiner le triangle comme pour le quadrilatère.
Complétez le programme en ajoutant les lignes 20 et 21 ci-dessous.
L'arc de cercle
- La fonction arc(x, y, largeur, hauteur, début, fin) permet de dessiner un arce de cercle où (x,y) sont les coordonnées du centre et début, fin seront des angles exprimés en radians, 2PI radians = 180 degrés.
- degrees(angle en radians) transforme des radians en degrés : degrees(PI)=180°
- radians(angle en degré) transforme des degrés en radians : radians(180)=PI
Complétez le programme en ajoutant les lignes 20 et 22 ci-dessous.
Formes libres
Plusieurs formes libres peuvent être dessinés par une succession de points en utilisant la suite d'instructions beginShape(),vertex(x,y),...,endShape() . Chaque point se construit par ses coordonnées x et y. La fonction CLOSE dans endShape(CLOSE) indique que la figure sera fermée, c'est-à-dire que le dernier point sera relié au premier.
Complétez le programme en ajoutant les lignes 23 et 31 ci-dessous.
Vous remarquerez à la ligne 24 l'instruction noStroke() qui permet d'obtenir une figure sans contour.
A vous de jouer !
Exercice 5
Créer un fichier maison dans le dossier dessins1 qui dommera le résultat ci-dessous.On déssinera sur une feuille 400x400. Il est conseillé de dessiner sur une feuille pour repérer les points nécessaire à la construction.
Exercice 6
Créer un fichier visage dans le dossier dessins1 qui dommera le résultat ci-dessous.
Exercice 7
Créer un fichier pacman dans le dossier dessins1 qui dommera le résultat ci-dessous.
Exercice 8
Créer un fichier carres_coins dans le dossier dessins1 qui dommera le résultat ci-dessous.
