Processing

Processing est un langage de programmation pour écrire/créer des images, des animations et de l’interaction. Les auteurs du langage parlent de faire des esquisses (sketches) avec du code. Vous écrivez une ligne, puis une autre, puis encore une autre, et ainsi de suite. Le résultat est un programme qui génère votre création.

Processing existe sous deux déclinaisons :

  • le langage Processing, inventé en 2001, ayant pour objectif de rendre la programmation graphique interactive plus facile et basé sur le langage java.
  • le langage p5.js qui a pour objectif de réinterpréter Processing pour le web en utilisant JavaScript et HTML.

Les deux déclinaisons sont très proches, mais dans ce dossier, nous ne traiterons que de la déclinaison p5.js.

Pour commencer, vous allez devoir dessiner une enveloppe conforme au modèle ci-dessous :

Comment faire ?

  • Ouvrez l’éditeur p5.js en ligne en utilisant le bouton situé en bas de la page.
  • Ouvrez le guide complet pour trouver les commandes à utiliser.
  • Définissez une page de 800 x 600 pixels (canvas)
  • Dessinez l’enveloppe avec des lignes noires.

Une variable stocke une valeur en mémoire afin qu’elle puisse être utilisée par la suite dans un programme.
Une variable peut être utilisée plusieurs fois dans un programme.
La raison principale pour utiliser des variables est d’éviter de répéter sa valeur dans le code. Le code est plus facile à mettre à jour grâce aux variables .

Exercice 1 :

Vous allez créer 2 variables :

  • largeur : La largeur d’un rectangle
  • hauteur : la hauteur d’un rectangle

Les variables seront à déclarer au début de votre code.
Les dimensions de ce rectangle sont indiquées dans les valeurs affectées aux variables largeur et hauteur.

Voici le code qui trace un rectangle :

Recopiez ce code, puis changez les valeurs des 2 variables : Les dimensions de votre rectangle doivent changer en fonction des valeurs.

Exercice 2 :

A partir du code déjà réalisé, vous allez devoir coder le dessin d’une enveloppe, mais cette fois-ci elle devra avoir des dimensions qui varient en fonction des valeurs que vous affecterez aux variables largeur et hauteur :

Exercice 3 :

En reprenant le code de l’exercice 2, ajouter 2 autres variables (x et y) qui permettrons de positionner l’enveloppe à différentes coordonnées de la page.

Une fonction va vous permettre de créer un bloc de programmation sur mesure dans lequel vous pourrez ajouter autant d’arguments que vous le souhaitez, pour un résultat donné :

 

Par exemple, pour la fonction carré = x*x, si x = 3, alors carré = 9, etc…
En p5.js, on peut alors coder cette fonction comme cela :

function carré(x) { // Le nom de la fonction avec ici un seul argument qui sera ‘x’
        text (x * x, 50,50) ; // La commande qui va afficher le résultat de x * x avec les coordonnées 50,50 sur la page}

 

Pour appeler la fonction, il suffira de faire :

carré(5) ;

 

Dans ce cas, le nombre 25 s’affichera sur l’écran.

Le programme complet que vous pouvez recopier et essayer :
 

Exercice 4 :

Créez une fonction qui dessinera une enveloppe en différents endroits de la feuille.
Les paramètres de l’enveloppe seront :
– x : la position en X
– y : la position en Y
– largeur : La largeur de l’enveloppe
– hauteur : sa hauteur

La fonction sera donc créée comme ceci :
function enveloppe (X,Y,Largeur,Hauteur) {
       les commandes de votre fonction
}

Ensuite, vous dessinerez 4 enveloppes de différentes tailles et à différents endroits de la page.

Choisissez une des oeuvres dont vous trouverez le descriptif dans la page de présentation (lien en bas de cette page) et essayez de la reproduire le plus fidèlement possible en utilisant le langage p5.js.

Avant de commencer, faites valider votre choix par l’animateur.

Important :

SI vous tentez d’éxécuter un code qui contiendra certaines erreurs, il se peut que l’éditeur en ligne se retrouve bloqué. Et dans ce cas, vous risquez de perdre tout votre travail.
Pas cool ! 😉
Pour éviter cela, il suffit d’ouvrir l’éditeur de texte Sublime Text qui est installé sur l’ordinateur, et de régulièrement faire des copier/coller de votre code dans cet éditeur.

Accès au guide complet :

Accès à l'éditeur en ligne :

Accès aux oeuvres d'art :