- p5.js é uma biblioteca JavaScript gratuita e open source que permite começar a aprender programação e criar arte na web
- Tem como público artistas, designers, iniciantes e educadores, e o projeto tem uma comunidade inclusiva no centro
- Em vez de aumentar indiscriminadamente os recursos, adota uma direção que abre exceção para funcionalidades que contribuam para melhorar a acessibilidade
- Oferece Reference, exemplos, editor web e vídeo introdutório interativo, permitindo começar imediatamente a aprender e criar com animação, áudio e WebGL
- Download, doações, participação na comunidade e acesso ao p5.js 2.0 beta estão reunidos em um só lugar, servindo como porta de entrada tanto para aprendizes quanto para contribuidores
p5.js para programação e arte
- p5.js é uma biblioteca JavaScript gratuita e open source para aprender programação e criar arte
- Dá boas-vindas a diversos usuários, como artistas, designers, iniciantes e educadores
- O projeto é conduzido com foco em uma comunidade inclusiva e orientada ao cuidado
- Há exemplos de atividades como o Coding Club para pessoas com mais de 50 anos na Coreia e workshops em Nairobi e NYC
- A política de adição de recursos é relativamente clara
- Com exceção de recursos que aumentem a acessibilidade, novos recursos não são adicionados
Caminhos para começar a aprender e criar
- Reference: documentação de referência da biblioteca p5.js
- Examples: espaço para aprender p5.js por meio de exemplos
- Start Coding: editor do p5.js para começar a programar diretamente na web
- interactive video: vídeo introdutório interativo que aborda animação, áudio, WebGL, acessibilidade e formas de contribuir
- Download Library: download da biblioteca p5.js
Comunidade e participação
- Community: página para acompanhar as atividades da comunidade p5.js
- Donate: caminho para doações de apoio ao projeto
- p5.js 2.0 beta: site beta separado para conhecer a nova versão p5.js 2.0
1 comentários
Opiniões no Hacker News
O principal motivo de este link estar no HN agora parece ser o novo site do p5.js
Em 2023, o Sovereign Tech Fund concedeu à equipe do p5.js 450 mil euros em financiamento para “melhorar a estrutura da documentação e a acessibilidade do p5.js”, e o resultado que vemos agora parece ter saído desse investimento
Pessoalmente, acho que houve resultado. Ficou muito mais fácil navegar e buscar no site, e as informações também ficaram mais úteis. Por exemplo, vale comparar a documentação antiga e a nova sobre como usar o editor do p5.js e o canvas com um leitor de tela
[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...
Eu já usava Processing há uns 10 anos, e ele já era muito fácil; no p5.js também foi fácil encontrar bugs ou implementações ausentes. Foi possível portar quase tudo de forma praticamente idêntica, mas não foi 1:1, e tive que aprender algumas APIs
Em termos de desempenho, p5.js não chega nem perto de d3 ou three.js. Sinceramente, em 2024, me pergunto quanto sentido o p5.js faz fora de uma ferramenta educacional. Animações web hoje parecem mais fáceis de fazer com CSS3 moderno e bibliotecas auxiliares, e também parece possível ter um fluxo simples saindo de um app vetorial gratuito para CSS
Mesmo em trabalhos que exigem cálculos em nível de pixel, não há uma forma fácil de usar a GPU com eficiência. Por isso, o financiamento de 450 mil euros parece bem estranho, especialmente por ter sido destinado a um framework que não é tão popular
Mas não gosto do layout em telas grandes. O tutorial linkado [1] usa parágrafos de largura fixa alinhados à esquerda, então metade direita da tela fica vazia. Por outro lado, elementos como a visão geral da documentação de referência [2] se estendem pela tela inteira em 4 colunas; fica ok quando a janela do navegador está reduzida para metade da largura da tela, mas fica difícil de ler quando maximizada
[1]: https://p5js.org/tutorials/p5js-with-screen-reader/
[2]: https://p5js.org/reference/
Como a newsletter tem cerca de 175 mil assinantes, links incluídos ali frequentemente chegam à primeira página do HN algumas horas depois. É quase impossível provar uma relação real, mas vejo isso como uma das partes interessantes de como links se espalham dentro do ecossistema
O novo site é mais otimizado para mobile e permite ler mais conteúdo com conforto em telas de alta densidade. Faz bastante sentido que o p5.js esteja recebendo nova atenção, e os vídeos relacionados do Coding Train também valem a pena
O ChatGPT conhece P5.js muito bem; se você pedir “escreva um programa em P5 que desenhe uma senoide e permita ajustar a fase com um slider”, ele faz na hora
Com ChatGPT e P5.js, criei uma ferramenta de design para equilibrar 5 massas ao redor de uma circunferência; a ideia era construir um arco magnético rotativo com menos travamento harmônico
Dá para arrastar os vértices do pentágono: https://editor.p5js.org/spDuchamp/full/zgtkE2xik
Resultado impresso em 3D: https://www.instagram.com/p/Cr4ZXGztY27/
É um site realmente bonito. Achei surpreendente que a seção About tenha omitido que isso herda as ideias do Processing
Talvez p5.js agora tenha ficado mais famoso que Processing, ou mais famoso do que Processing foi no passado
Uma das principais reclamações dele era que o projeto p5.js tomou conta da Processing Foundation e reduziu o desenvolvimento do Processing
Na época em que era bem difícil manipular pixels em algo como um canvas dentro de uma página web para criar experimentos visuais interessantes, ele era uma ferramenta muito sensata, além de legível e acessível para artistas com pouca experiência em programação
Na faculdade, me diverti muito brincando com p5.js, e antigamente até criei um pequeno autômato celular: https://ezhik.me/beyond184/
Por coincidência, a obra que primeiro despertou meu interesse por arte digital — como uma homenagem divertida à computação — também usava p5.js: https://baku89.com/work/ffff?lang=en https://animethemes.moe/anime/subete_ga_f_ni_naru_the_perfec...
Uma das coisas mais difíceis como programador é atravessar todo o boilerplate antes de colocar o primeiro pixel na tela, e o p5.js resolve isso muito bem, permitindo focar mais no lado criativo do “creative coding”
Eu não usaria p5.js para “desenvolvimento de software grande de verdade”, mas, quando quero fazer um sketch, é a primeira ferramenta digital à qual recorro
Conheci essa biblioteca alguns anos atrás graças a Daniel Shiffman
Os vídeos dele foram essenciais para meu crescimento como programador
É uma biblioteca muito boa para criar jogos rapidamente
Fiz uma pequena simulação de água com p5.js, e gostei muito de como o p5 é fácil de aprender
[1]: https://github.com/trungdq88/summer
O Processing, que originalmente era baseado em Java, inspirou muitas bibliotecas
Hoje em dia, dá para encontrar bibliotecas mais ou menos compatíveis na maioria das linguagens populares
Como projeto de verão, escrevi uma versão para Racket: https://docs.racket-lang.org/manual-sketching/
A maior inspiração foi o canal do YouTube de Daniel Shiffman, “The Coding Train”. Ele tem um faro para escolher problemas e algoritmos visualmente interessantes, e seu entusiasmo é incomparável
https://thecodingtrain.com/
Usei bastante p5.js até em trabalho profissional, mas, para quem está pensando em usar agora, acho bom saber o que aconteceu com um dos cofundadores da foundation e criador da linguagem Processing original, que serviu de base para o p5
https://news.ycombinator.com/item?id=37760363
Sabendo o que sei agora, me arrependo de ter apoiado o trabalho da Processing Foundation
Em uma época com tantas APIs gráficas de alto desempenho, dá para entender por que Processing/p5 pareceu estagnado por anos, sem grandes mudanças. Um desfecho triste
Gosto muito de P5.js. A comunidade OpenProcessing tem milhares de trabalhos incríveis que podem ser vistos, clonados e modificados facilmente
Uso principalmente Python, mas mexer aos poucos em programas P5.js me ajudou a aprender JavaScript
[1] -- https://openprocessing.org/discover/#/trending
No playground do p5.js, você pode escrever e executar código no navegador, e também pode criar uma conta para salvar seus sketches de código
https://editor.p5js.org/nonoesp/sketches/ruSYeEUEH