Processing + Javascript =
C'est quoi ?
P5.js est une bibliothèque Javascript dérivée de Processing, un environnement de développement open-source basé sur le langage Java. Orientée vers la programmation créative, p5.js permet de concevoir toutes sortes de compositions visuelles et offre de vastes possibilités d'interactivité ; on peut manipuler tous les éléments d'une page web, les inputs de l'utilisateur ainsi que diverses sources (audio, vidéo, etc.).
Comment ça fonctionne ?
Observez le code ci-dessous :
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8"/>
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
Un projet p5.js consiste en un fichier .js écrit en Javascript (ligne 9) auquel on fait référence dans la zone body d'un fichier HTML.
Dans ce dernier, on doit également faire référence au fichier de la bibliothèque p5.js (lien CDN ou fichier externe) dans la zone head du fichier HTML (ligne 4).
On peut donc visualiser un projet en consultant le fichier HTML qui le contient, avec un navigateur web (en ligne ou hors ligne).
Oooooh...
OMG !!!
Comment s'y mettre ?
On peut commencer à développer des projets p5.js de plusieurs façons :
- En écrivant le code dans n'importe quel éditeur de code (et en faisant référence à la bibliothèque p5.js dans le fichier HTML, comme mentionné précédemment).
- En écrivant le code dans l'éditeur de code en ligne de p5js.org (les fichiers HTML, CSS et .js sont déjà créés, il ne reste qu'à écrire).
Envie d'essayer ?
Dans les slides verticales ci-dessous, vous allez pouvoir vous familiariser avec p5.js grâce à quelques exercices simples qui passent en revue les bases de la bibliothèque.
À chaque exercice, essayez de modifier le code afin de reproduire l'image présentée.
Exercices recréés d'après p5.js sandbox par George Benainous.
Pour des tutoriels plus exhaustifs, la section Learn de p5js.org ou l'introduction par Bérenger Recoules sont des références extrêmement utiles.
Background — Fill — Stroke
Rectangles — Ellipses — Stroke weight
Triangles — Transparency
Arcs
Vertex
Rotate
Bounce
Random
Loops (for)
Trop compliqué ?
Il est erroné de penser que p5.js n'est accessible qu'aux programmeurs expérimentés. Même si le talent de certains peut s'avérer intimidant, il faut garder à l'esprit que p5.js bénéficie d'une grande communauté de personnes bienveillantes qui créent des tutoriels, qui aident volontiers les débutants et qui partagent souvent leurs travaux, avec une philosophie open-source.
Voici un site où trouver de nombreux travaux d'autres utilisateurs : openprocessing.org.
Mais quel intérêt ?
En plus de l'apprentissage de la programmation, p5.js est un outil qu'on peut utiliser dans de multiples contextes d'enseignement.
Dans les slides verticales ci-dessous, vous trouverez quelques exemples d'applications pédagogiques possibles (physique, maths, géographie, langues...).
"Motions of Glowing Particles under Universal Gravitation" par Dama (2018)
Programmation = Art ?
La question est subjective, mais un des atouts de p5.js est la possibilité de créer de l'art génératif/algorithmique.
Ainsi, on pourrait imaginer que des outils tels que p5.js puissent par exemple être utilisés dans les écoles, intégrés aux cours d'arts plastiques, ce qui représenterait une excellente opportunité de développement de la littératie numérique des élèves.
Au-delà de la programmation, les projets des slides 10 et 12 pourraient servir de base à diverses activités pédagogiques (couleurs, abstraction, symétrie, polygones, etc.).
Vraiment trop compliqué ?
La slide suivante illustre un aménagement didactique accessible et intéressant pour donner à comprendre un projet algorithmique sans connaissances préalables.
Vous pourrez constater qu'en ajoutant une interface utilisateur à un projet existant, même les plus débutants peuvent ainsi modifier facilement les variables d'un code complexe, sans bases théoriques, ce qui favorise l'expérimentation et permet d'initier des situations d'apprentissage par un processus de dévolution.
Merci pour votre attention !
MALTT, Université de Genève, 2023
Présentation créée avec Reveal.js
Third-party code :
Ressources :
- Exemples de p5js.org
- "Magical trail shader" par Jason Labbe
- "WebGL Fluid Simulation" par Pavel Dobryakov
- "p5.js sandbox" par George Benainous
- "Displace" par rch_u
- "Grid of maths equations with interpolation" par Bérenger Recoules
- "Random Walker" par Kevin Workman
- "Wavy Line Art Maker" par Steve's Makerspace