- p5.js est une bibliothèque JavaScript open source gratuite qui permet de commencer à apprendre à coder et à créer de l’art sur le web
- Elle s’adresse largement aux artistes, designers, débutants et éducateurs, avec au cœur du projet une communauté inclusive
- Plutôt que d’ajouter des fonctionnalités sans limite, le projet adopte une approche qui fait exception pour les fonctions contribuant à améliorer l’accessibilité
- Une Reference, des exemples, un éditeur web et une vidéo d’introduction interactive sont proposés pour commencer immédiatement à apprendre et créer avec l’animation, l’audio et WebGL
- Le téléchargement, les dons, la participation à la communauté et l’accès à la bêta de p5.js 2.0 sont réunis au même endroit, servant de point d’entrée aussi bien pour les apprenants que pour les contributeurs
p5.js pour le code et l’art
- p5.js est une bibliothèque JavaScript open source gratuite pour apprendre à coder et créer de l’art
- Elle accueille des utilisateurs variés, notamment des artistes, des designers, des débutants et des éducateurs
- Le projet est animé autour d’une communauté inclusive et attentive aux autres
- Parmi les exemples d’initiatives figurent le Coding Club en Corée pour les plus de 50 ans, ainsi que des ateliers à Nairobi et à New York
- La politique d’ajout de fonctionnalités est relativement claire
- À l’exception des fonctions qui améliorent l’accessibilité, aucune nouvelle fonctionnalité n’est ajoutée
Où commencer à apprendre et créer
- Reference : documentation de référence de la bibliothèque p5.js
- Examples : espace pour apprendre p5.js à travers des exemples
- Start Coding : éditeur p5.js pour commencer à coder directement sur le web
- interactive video : vidéo d’introduction interactive couvrant l’animation, l’audio, WebGL, l’accessibilité et la façon de contribuer
- Download Library : télécharger la bibliothèque p5.js
Communauté et participation
- Community : page pour découvrir les activités de la communauté p5.js
- Donate : lien de don pour soutenir le projet
- p5.js 2.0 beta : site bêta distinct pour découvrir la nouvelle version p5.js 2.0
1 commentaires
Avis de Hacker News
La raison principale pour laquelle ce lien se retrouve maintenant sur HN semble être le nouveau site web de p5.js.
En 2023, le Sovereign Tech Fund a accordé à l’équipe p5.js une subvention de 450 000 € pour « améliorer la structure et l’accessibilité de la documentation de p5.js », et le résultat visible aujourd’hui semble venir de cet investissement.
Personnellement, j’ai l’impression que cela a porté ses fruits. La navigation et la recherche sur le site sont devenues bien plus faciles, et les informations plus utiles. Par exemple, il vaut la peine de comparer l’ancienne et la nouvelle documentation sur l’utilisation de l’éditeur p5.js et du canvas avec un lecteur d’écran.
[1] - STF announcement/progress - https://p5js.org/events/stf-2024/
[2] - Using p5 with a screen reader (old version) - https://archive.p5js.org/learn/p5-screen-reader.html
[3] - How to Use the p5.js Web Editor with a Screen Reader (new) - https://p5js.org/tutorials/p5js-with-screen-reader/
[4] - Writing Accessible Canvas Descriptions (new) - https://p5js.org/tutorials/writing-accessible-canvas-descrip...
J’utilisais déjà Processing il y a une dizaine d’années et c’était déjà très simple ; avec p5.js, il était aussi facile de tomber sur des bugs ou des implémentations manquantes. Le portage a pu être fait presque à l’identique, mais pas en 1:1, et il a fallu apprendre certaines API.
Côté performances, p5.js n’est pas du tout proche de d3 ou de three.js. Franchement, en 2024, je me demande quelle pertinence p5.js peut avoir en dehors d’un outil éducatif. Aujourd’hui, l’animation web semble plus facile à faire avec du CSS3 moderne et des bibliothèques d’appoint, et un flux simple allant d’une application vectorielle gratuite vers du CSS semble aussi possible.
Même pour des travaux nécessitant des calculs au pixel près, il n’existe pas de moyen simple d’utiliser efficacement le GPU. Du coup, cette subvention de 450 000 € me paraît assez étrange, surtout parce qu’elle a été attribuée à un framework qui n’est pas particulièrement populaire.
En revanche, je n’aime pas la mise en page sur grand écran. Le tutoriel lié [1] est composé de paragraphes alignés à gauche en largeur fixe, ce qui laisse toute la moitié droite de l’écran vide. À l’inverse, des éléments comme l’aperçu de la documentation de référence [2] s’étirent sur tout l’écran en 4 colonnes ; c’est correct quand on réduit la fenêtre du navigateur à la moitié de l’écran, mais difficile à lire une fois maximisée.
[1]: https://p5js.org/tutorials/p5js-with-screen-reader/
[2]: https://p5js.org/reference/
Avec environ 175 000 abonnés, il arrive souvent qu’un lien inclus là-bas se retrouve quelques heures plus tard en première page de HN. Il est quasiment impossible de prouver un lien réel, mais je trouve que cela fait partie des aspects amusants de la diffusion des liens dans l’écosystème.
Le nouveau site est mieux optimisé pour mobile et rend davantage de contenu lisible sur les écrans à haute densité. Il est tout à fait compréhensible que p5.js attire à nouveau l’attention, et les vidéos Coding Train associées valent également le détour.
ChatGPT connaît assez bien P5.js : si on lui demande « écris-moi un programme P5 qui trace une sinusoïde et permet d’ajuster la phase avec un slider », il le produit tout de suite.
Avec ChatGPT et P5.js, j’ai créé un outil de conception pour équilibrer 5 masses sur une circonférence, destiné à fabriquer un archet magnétique rotatif réduisant le verrouillage harmonique.
On peut faire glisser les sommets du pentagone : https://editor.p5js.org/spDuchamp/full/zgtkE2xik
Résultat imprimé en 3D : https://www.instagram.com/p/Cr4ZXGztY27/
C’est un très beau site web. Je suis surpris que la section About omette le fait qu’il reprend les idées de Processing.
Peut-être que p5.js est désormais plus connu que Processing, ou même plus connu que Processing ne l’a été à son époque.
L’un de ses principaux griefs était que le projet p5.js avait pris le contrôle de la Processing Foundation et réduit le développement de Processing.
À l’époque où il était assez difficile de manipuler des pixels dans un canvas intégré à une page web pour créer des expériences visuelles intéressantes, c’était un outil vraiment pertinent, lisible et accessible même pour des artistes ayant peu d’expérience en programmation.
À la fac, je me suis beaucoup amusé à jouer avec p5.js, et j’avais même créé un petit automate cellulaire moi-même : https://ezhik.me/beyond184/
Par coïncidence, l’œuvre qui m’a fait m’intéresser pour la première fois à l’art numérique, une sorte d’hommage réjouissant au computing, utilisait elle aussi p5.js : https://baku89.com/work/ffff?lang=en https://animethemes.moe/anime/subete_ga_f_ni_naru_the_perfec...
L’une des choses les plus difficiles, en tant que programmeur, c’est de traverser tout le boilerplate avant d’afficher le premier pixel à l’écran ; p5.js règle ça plutôt bien et permet de se concentrer davantage sur l’aspect créatif du « creative coding »
Je n’utiliserais pas p5.js pour du « vrai développement logiciel à grande échelle », mais quand j’ai envie de faire un sketch, c’est le premier outil numérique vers lequel je me tourne
J’ai découvert cette bibliothèque il y a quelques années grâce à Daniel Shiffman
Ses vidéos ont été essentielles dans ma progression comme programmeur
C’est une assez bonne bibliothèque pour créer rapidement des jeux
J’ai réalisé une petite simulation d’eau avec p5.js, et j’ai vraiment apprécié à quel point p5 est facile à apprendre
[1] : https://github.com/trungdq88/summer
Processing, à l’origine basé sur Java, a inspiré de nombreuses bibliothèques
Aujourd’hui, on peut trouver une bibliothèque plus ou moins compatible dans la plupart des langages populaires
J’ai écrit une version pour Racket comme projet d’été : https://docs.racket-lang.org/manual-sketching/
Ma plus grande source d’inspiration a été la chaîne YouTube de Daniel Shiffman, « The Coding Train ». Il a le don de choisir des problèmes et des algorithmes visuellement intéressants, et son enthousiasme est incomparable
https://thecodingtrain.com/
J’ai beaucoup utilisé p5.js dans un cadre professionnel, mais si vous envisagez de l’utiliser aujourd’hui, il vaut mieux savoir ce qui est arrivé à l’un des cofondateurs de la foundation et au créateur du langage Processing original, sur lequel p5 est basé
https://news.ycombinator.com/item?id=37760363
Maintenant que je sais ce que je sais, je regrette d’avoir soutenu le travail de la Processing Foundation
À une époque où il existe autant d’API graphiques performantes, je comprends pourquoi Processing/p5 a donné l’impression de stagner pendant des années sans grand changement. Triste fin
J’aime vraiment P5.js. La communauté OpenProcessing regorge de milliers d’œuvres formidables qu’on peut facilement consulter, dupliquer et modifier
J’utilise surtout Python, mais bidouiller petit à petit des programmes P5.js m’a aidé à apprendre JavaScript
[1] -- https://openprocessing.org/discover/#/trending
Dans le playground de p5.js, on peut écrire et exécuter du code dans le navigateur, et aussi créer un compte pour enregistrer ses sketches de code
https://editor.p5js.org/nonoesp/sketches/ruSYeEUEH