- p5.js es una biblioteca gratuita y de código abierto de JavaScript que permite empezar a aprender programación y crear arte en la web
- Está dirigida a un público amplio, incluyendo artistas, diseñadores, principiantes y educadores, y en el centro del proyecto hay una comunidad inclusiva
- En lugar de añadir funciones nuevas sin más, sigue una política que hace una excepción con las funciones que contribuyen a mejorar la accesibilidad
- Ofrece Reference, ejemplos, editor web y video introductorio interactivo para empezar de inmediato a aprender y crear con animación, audio y WebGL
- La descarga, las donaciones, la participación en la comunidad y el acceso a p5.js 2.0 beta están reunidos en un solo lugar, lo que lo convierte en un punto de entrada tanto para aprendices como para colaboradores
p5.js para programar y crear arte
- p5.js es una biblioteca JavaScript gratuita y de código abierto para aprender programación y crear arte
- Da la bienvenida a usuarios diversos, como artistas, diseñadores, principiantes y educadores
- El proyecto se desarrolla alrededor de una comunidad inclusiva y orientada al cuidado
- Hay ejemplos de actividades como el Coding Club para mayores de 50 años en Corea y talleres en Nairobi y NYC
- La política de incorporación de funciones es relativamente clara
- Salvo las funciones que mejoran la accesibilidad, no se añaden funciones nuevas
Formas de empezar a aprender y crear
- Reference: documentación de referencia de la biblioteca p5.js
- Examples: espacio para aprender p5.js mediante ejemplos
- Start Coding: editor de p5.js para empezar a programar directamente en la web
- interactive video: video introductorio interactivo sobre animación, audio, WebGL, accesibilidad y cómo contribuir
- Download Library: descarga de la biblioteca p5.js
Comunidad y participación
- Community: página para conocer las actividades de la comunidad de p5.js
- Donate: vía de donación para apoyar el proyecto
- p5.js 2.0 beta: sitio beta independiente para conocer la nueva versión p5.js 2.0
1 comentarios
Opiniones de Hacker News
Parece que la razón principal por la que este enlace está ahora en HN es el nuevo sitio web de p5.js
En 2023, Sovereign Tech Fund otorgó al equipo de p5.js una subvención de 450.000 euros para “mejorar la estructura y accesibilidad de la documentación de p5.js”, y lo que se ve ahora parece ser el resultado de esa inversión
En lo personal, parece haber dado resultados. La navegación y la búsqueda del sitio se volvieron mucho más fáciles, y la información también es más útil. Por ejemplo, vale la pena comparar la documentación anterior y la nueva sobre cómo usar el editor y el canvas de p5.js con un lector de pantalla
[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...
Ya había usado Processing hace unos 10 años y ya era muy fácil; en p5.js también era fácil encontrar bugs o implementaciones faltantes. Se pudo portar casi igual, pero no fue 1:1 y tuve que aprender algunas API
En rendimiento, p5.js no está ni cerca de d3 o three.js. Sinceramente, en 2024 me pregunto qué tanto sentido tiene p5.js fuera de ser una herramienta educativa. Las animaciones web de hoy parecen más fáciles de hacer con CSS3 moderno y bibliotecas auxiliares, e incluso parece posible un flujo sencillo desde una app vectorial gratuita hacia CSS
Incluso en trabajos que requieren cálculos a nivel de píxel, no hay una forma sencilla de usar la GPU de manera eficiente. Por eso el apoyo de 450.000 euros se siente bastante raro, sobre todo porque se asignó a un framework que no es tan popular
Sin embargo, no me gusta la distribución en pantallas grandes. El tutorial enlazado [1] tiene párrafos alineados a la izquierda con ancho fijo, así que la mitad derecha de la pantalla queda vacía. En cambio, elementos como el índice de la documentación de referencia [2] se expanden a 4 columnas en toda la pantalla; se ve bien cuando la ventana del navegador está reducida a la mitad del ancho de la pantalla, pero al maximizarla se vuelve difícil de leer
[1]: https://p5js.org/tutorials/p5js-with-screen-reader/
[2]: https://p5js.org/reference/
Tiene alrededor de 175.000 suscriptores, así que es frecuente que un enlace incluido ahí termine unas horas después en la portada de HN. Es casi imposible probar una relación real, pero lo veo como una de las partes divertidas de cómo se difunden los enlaces dentro del ecosistema
El nuevo sitio está más optimizado para móviles y hace que sea más fácil leer más contenido en pantallas de alta densidad. Tiene todo el sentido que p5.js vuelva a recibir atención, y los videos relacionados de Coding Train también valen la pena
ChatGPT conoce bastante bien P5.js, así que si le dices “escribe un programa en P5 que dibuje una onda sinusoidal y permita ajustar la fase con un slider”, te lo hace de inmediato
Con ChatGPT y P5.js hice una herramienta de diseño para equilibrar 5 masas alrededor de una circunferencia, pensada para fabricar un arco magnético giratorio que reduzca el bloqueo armónico
Se pueden arrastrar los vértices del pentágono: https://editor.p5js.org/spDuchamp/full/zgtkE2xik
Resultado impreso en 3D: https://www.instagram.com/p/Cr4ZXGztY27/
Es un sitio web realmente bonito. Me sorprende que en la sección About hayan quitado la parte que decía que esto heredaba las ideas de Processing
Quizás ahora p5.js ya es más famoso que Processing, o más famoso que lo que Processing fue en el pasado
Una de sus principales quejas era que el proyecto p5.js se había apoderado de Processing Foundation y había reducido el desarrollo de Processing
En una época en la que era bastante difícil manipular píxeles en algo como un canvas dentro de una página web para crear experimentos visuales interesantes, era una herramienta muy razonable, y además era legible y accesible para artistas con poca experiencia en programación
En la universidad me divertí muchísimo jugando con p5.js, e incluso hace tiempo hice mi propio autómata celular pequeño: https://ezhik.me/beyond184/
Casualmente, la obra que primero me despertó el interés por el arte digital, algo así como un homenaje alegre a la computación, también usaba p5.js: https://baku89.com/work/ffff?lang=en https://animethemes.moe/anime/subete_ga_f_ni_naru_the_perfec...
Una de las cosas más difíciles como programador es atravesar todo el boilerplate antes de poner el primer píxel en pantalla, y p5.js resuelve eso bastante bien, permitiéndote enfocarte más en el aspecto creativo del “creative coding”
No usaría p5.js para “desarrollo de software grande de verdad”, pero cuando quiero hacer sketches, es la primera herramienta digital a la que recurro
Conocí esta biblioteca hace unos años gracias a Daniel Shiffman
Sus videos fueron fundamentales para mi crecimiento como programador
Es una biblioteca bastante buena para crear juegos rápidamente
Hice una pequeña simulación de agua con p5.js, y me gustó mucho lo fácil que es aprender p5
[1]: https://github.com/trungdq88/summer
Processing, que originalmente estaba basado en Java, inspiró muchas bibliotecas
Hoy en día, en la mayoría de los lenguajes populares se puede encontrar alguna biblioteca más o menos compatible
Como proyecto de verano, escribí una versión para Racket: https://docs.racket-lang.org/manual-sketching/
La mayor inspiración fue el canal de YouTube de Daniel Shiffman, “The Coding Train”. Tiene muy buen criterio para elegir problemas y algoritmos visualmente interesantes, y su entusiasmo no tiene comparación
https://thecodingtrain.com/
He usado bastante p5.js también en trabajos profesionales, pero si alguien piensa usarlo ahora, convendría que sepa qué le pasó a uno de los cofundadores de la foundation y creador del lenguaje Processing original, en el que se basó p5
https://news.ycombinator.com/item?id=37760363
Ahora que sé lo que sé, me arrepiento de haber apoyado el trabajo de la Processing Foundation
Ahora entiendo por qué, en una época con tantas APIs gráficas de alto rendimiento, Processing/p5 se sentía estancado durante años sin grandes cambios. Es un final triste
Me encanta P5.js. En la comunidad OpenProcessing hay miles de obras geniales que se pueden ver, clonar y modificar fácilmente
Uso principalmente Python, pero retocar de a poco programas de P5.js me ayudó a aprender JavaScript
[1] -- https://openprocessing.org/discover/#/trending
En el playground de p5.js se puede escribir y ejecutar código en el navegador, y también crear una cuenta para guardar sketches de código
https://editor.p5js.org/nonoesp/sketches/ruSYeEUEH