JAVASCRIPT et PROCESSING

(actualisé le ) par administrateur


1. Qu’est-ce que Processing ?


Processing a été créé à l’origine à destination des artistes, pour leur offrir un moyen simple de création numérique sans entrer trop profondément dans les subtilités d’un "vrai" langage de programmation.

Ce langage permet donc principalement de dessiner des formes variées, des images, exécuter des animations, mais également de gérer les interactions avec un utilisateur ( clavier, souris,..).
Il permet également de jouer du son et des vidéos.

Il existe une version "standalone" de Processing, c’est à dire sous forme d’un logiciel indépendant, qui permet en plus de générer des éxécutables directement utilisables.

Nous utiliserons cependant ici la version de Processing qui s’intègre et s’exécute directement dans un navigateur web ; il s’agit d’une librairie, écrite en JavaScript, nommée Processing.js.
Cette bibliothèque permet de réaliser pratiquement toutes les mêmes actions que la version logicielle.


2. Quelques mots sur JAVASCRIPT


2.1. Qu’est-ce que JAVASCRIPT ?

JavaScript est un langage de programmation complètement lié au langage HTML.

Le développeur internet code ses pages HTML en y intégrant des sources JavaScript. Le visiteur, par l’intermédiaire de son navigateur, charge le code des pages.
C’est le navigateur qui interprète le code HTML et JavaScript.

Ce langage permet d’étendre les fonctionnalités du langage HTML :

  • récupération de données de formulaire ;
  • calculs ;
  • créer des objets sur la page, avec des propriétés et des méthodes et leur associer des actions en fonction d’événements déclenchés par le visiteur (passage de souris, clic, saisie clavier, etc...) ;
  • de manière générale, gestion de l’interaction avec l’utilisateur...

Les concepts de ce langage sont les mêmes que ceux rencontrés en Python, C++,... :

  • variables ;
  • boucles ;
  • conditions.

2.2. Comment intégrer du code JavaScript dans une page HTML ?

Il y a plusieurs endroits où il est possible d’intégrer du code JavaScript :

  • directement dans le corps de la page
  • en en-tête de page
  • dans un fichier séparé (c’est le choix adopté ici)

La structure classique d’une page HTML contenant du JavaScript est la suivante :

Les fichiers contenant du code JavaScript ont pour extension .js.

Le chemin peut être celui vers un fichier local ( sur le PC de l’utilisateur ) ou vers un fichier sur un serveur distant.

2.3. Utilisation de PROCESSING

Comme indiqué précédemment, nous n’aborderons en fait pas la programmation JavaScript, mais utiliserons un ensemble de bibliothèques nommé Processing.js qui vous permettra de coder dans une page web.

Pour pouvoir utiliser Processing.js, il faut :

  • créer un répertoire qui contiendra toutes les ressources nécessaires ;
  • récupérer sur la page Download du site processingjs.org la dernière version de la bibliothèque : choisir la version Production. Attention, ne pas cliquer sur le lien mais faire Clic Droit > Enregistrer sous et télécharger le fichier dans le répertoire créé.
  • copier-coller dans ce répertoire le fichier HTML + les ressources éventuelles ( images, fichier CSS,...) décrivant la page que vous avez précédemment écrite.

Pour pouvoir utiliser et exécuter du code Processing dans une page HTML il faut rajouter dans le fichier de la page :

  • une ligne dans l’en-tête (balises head ) :
  • une ligne à l’endroit où l’on veut afficher l’élément écrit en Processing :

Ce code correspond à :

  • un lien vers la bibliothèque Processing ( qui est en fait un gros fichier JavaScript...) ;
  • un nouvel élément HTML nommé canvas, qui correspond à une zone de dessin : c’est là que les scripts Processing afficheront le résultat de leur exécution.

On remarque que la balise canvas "pointe" vers le nom d’un fichier d’extension .pde : il s’agit du fichier dans lequel vous écrirez votre code ; il faudra donc le créer dans le répertoire et faire en sorte qu’il porte le même nom ( ici : mon_code.pde ) que dans le fichier HTML...

Le code sera exécuté en lançant la page HTML dans un navigateur.


3. Les animations en Processing


3.1. Les bases du langage

  • Dans un premier temps, nous utiliserons Processing comme un langage similaire à Python utilisé en mode "interactif", où toutes les instructions s’exécutent les unes à la suite des autres jusqu’à la fin du programme qui s’arrête alors.
  • Dans un deuxième temps, nous verrons cependant qu’il est possible de réaliser des animations avec Processing en écrivant un script comme en Python...

Plutôt qu’un cours présentant toutes les possibilités du langage, vous utiliserez un manuel en ligne très bien fait, qui présente progressivement les différents concepts du langage.
Ne lisez pas tout d’un trait, mais "piochez" plutôt dans ce manuel les informations qu’il vous faut...

Attention, ce manuel est fait pour la version "logiciel" de Processing, c’est à dire celle qui s’exécute dans un programme à part et pas dans un navigateur web...
Certaines notions sont donc absentes de Processing.js, mais les concepts du langage sont les mêmes...

3.2. Créer des animations

La structure d’un sketch (programme) Processing destiné à faire des animations contient deux fonctions principales :

  • la fonction setup(), exécutée une seule fois au démarrage du programme et dans laquelle on place des instructions d’initialisation
  • une boucle draw(), qui exécute en boucle toutes les instructions qu’elle contient.

  • Contenu de la fonction setup()

La fonction setup() va recevoir toutes les instructions qui ne doivent être exécutées qu’une seule fois au lancement du programme, comme par exemple :

l’instruction size() qui définit la taille de la zone de dessin
une instruction background() qui définit la couleur de fond
l’initialisation de certaines variables globales
....

  • Contrôle de la vitesse d’exécution de l’animation

La fonction draw() est équivalente à une "image" de l’animation ; par principe, elle est exécutée un certain nombre de fois par seconde, correspondant donc au nombre "d’images" par seconde de l’animation.

La valeur de ce nombre est paramétrable dans la fonction setup(), à l’aide de l’instruction frameRate() :

...où XX représente le nombre de fois où la fonction draw() est exécutée par seconde ; par défaut cette valeur est de 30, et on peut donc la diminuer pour ralentir l’animation ou l’augmenter pour l’accélérer...

Remarques :

L’animation d’un objet qui se déplace dans un plan est toujours basée sur le même ensemble de trois étapes "jouées" en boucle :

  • on dessine l’objet à une position (la fonction ellipse() permet de dessiner par exemple un cercle) ;
  • on l’efface en utilisant la fonction background() ;
  • on modifie les coordonnées d’affichage de l’objet (plusieurs variables seront nécessaires : cordonnées de la position (x, y) et de la vitesse (Vx, Vy)).

La succession rapide de ces étapes donne alors l’illusion du mouvement.

Application : écrire un sketch qui fait se déplacer une "balle" dans une zone de dessin, et qui la fait "rebondir" sur les "parois".

  • On utilisera deux variables ( x et y par exemple) pour les coordonnées de la balle.
  • On utilisera deux variables ( vx et vy par exemple ) qui contiendront le sens et la vitesse de déplacement horizontaux et verticaux de la balle ; ces variables pourront donc contenir des valeurs négatives.

3.3. Quelques exemples

Activités 1

Activités 2

Activités 3

4. Tutoriels sur Processing

Voici quelques vidéos permettant de découvrir la programmation avec Processing. Vous pourrez trouver beaucoup plus d’exemples sur la chaîne YouTube de l’auteur.