p5.js
p5js.org
p5js.org
In my view, it seems to be paying off - the site feels a lot easier to navigate and search, with more useful information. For example, compare the old[2] and new[3][4] versions of how to use p5js editor/canvases with a screen reader.
[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...
I'm not a fan of the layout on large screens though. The linked tutorial [1] is fixed width left-aligned paragraphs, which makes right half of my display empty. On the other hand, other elements like on the reference overview [2] are stretched in four columns across the whole display which looks ok when the browser window is half my displays width but is hard to read when the window is maximized.
[1]: https://p5js.org/tutorials/p5js-with-screen-reader/ [2]: https://p5js.org/reference/
* processing is still much easier to work, even though p5js seems to catch-up. I did work with it like 10 years ago and it was already very easy
* it was very easy to spot bugs or missing implementation in p5js
* While an almost identical port was possible, it’s not 1:1 and takes learning some APIs
* p5js is not even close to d3 or three.js in terms of performance
* tbh it seems to me lot easier to animate in web with modern css3 and some helper libs, than use p5js. In fact I would see a very straight pipeline from free vector apps into css with very little shading without p5js. Which makes me wonder how is p5js relevant in 2024, apart from educational tool.
* For things which involve pixel level compute there is no easy way to use the GPU efficiently
For me this whole 450k funding is quite bizarre, and in particular the fact it got directed to a not so popular framework.
* the images are generated with midjourney * the transition in this particular one is the export of processing * the track is from Babe Roots' incredible Sufferation Time - https://baberoots.bandcamp.com/track/sufferation-time-babe-r...
the p5js part was more challenging, as I had to only draw every 5th pixel every frame, in order to get some decent performance. but since this is a transition, you can't mention it.
the whole loop is not much, but took a good 6 hours to get together. then another 4-5 go rewrite it for web.
There’s lots of options now, but it hits some outcomes in empowering folks who learned actionscript when it was the only game.
More options today for sure.
BESIDES - Processing is much more mature and more usable with electronics. Really the whole point of p5js and this grant is beyond comprehension for me.
P5 is not designed to solve the same problem as D3. It's for creative coding. It's what kids did on Logo, BASIC, or an a graphing calculator. For that, is brilliant.
It's for a weekend playing making digital art.
It's for teaching math and physics.
It's not something anyone could, would, or should use for any production code. You can't do a11y, i18n, responsiveness, or a million other annoyances that come with real-world coding. It's not a work framework.
It's there for FUN.
(And if you have kids and the to help them out, it's absolutely better than Scratch; marginally slower to get going, but no ceiling)
The new site is more mobile optimized and makes it possible to read more on the higher density screens.
Discovery of p5.js is well deserved, as are the related coding train videos.
I used P5.js with ChatGPT to make a design tool that balances 5 masses on a circumference for creating a rotary magnetic bow with reduced harmonic locking.
Drag vertices of the pentagon... https://editor.p5js.org/spDuchamp/full/zgtkE2xik
Here 3D printed result https://www.instagram.com/p/Cr4ZXGztY27/
Short demo: https://youtu.be/G1ftvw-Y6pk
Open mic set: https://youtu.be/nKFK_OhQv3k
I made an album for falling asleep to that you can find on various streaming music services. Just search "Autonomous Drone Lullabies" by Stefan Powell. It's an album that was made autonomously using an algorithm in Pure Data. It's also here: https://stefanpowell.bandcamp.com/album/autonomous-drone-lul...
There was a schism between Ben Fry and the Processing Foundation, so I would reckon it's political. One of his chief complaints was how the p5.js project had taken over the Processing Foundation and minimized Processing development.
Seems like Processing got left out from expenses despite their large budget, running against their original reason to start the foundation: “I was soon shocked to learn that the Foundation spent nearly $800,000 last year. $0 of that went to Processing 4. This year, the proposed Foundation budget is around $1.2 million. But for Processing, there is budget for just two people: one developer, one community lead. You know what that sounds like? The reason we started a Foundation in the first place. Two people is not enough for any of the Processing software projects (i.e. anything that lives at a http://processing.org domain.)”
I wonder if most of the money went into p5 or the new website or whatever, but it made me a bit sad to see that the original Processing got left behind. It is what got me into programming and there are still lots of good reasons to choose it over p5. I can, however, understand if they prioritised p5 due to the rise of web apps and mobile devices, sharability, JS being everywhere and so on. Maybe it’s nostalgia, but it just doesn’t bring me as much joy as the original.
What are some good reasons to choose it over p5?
As a wonderful coincidence, the piece of digital art that got me interested in digital art in the first place - which is a delightful tribute to computing - also used p5.js: https://baku89.com/work/ffff?lang=en https://animethemes.moe/anime/subete_ga_f_ni_naru_the_perfec...
I think one of the hardest things for me as a programmer is getting through all the boilerplate to put the first pixel on the screen and p5.js solves that pretty well, letting me focus on more on the "creative" aspect of "creative coding".
I probably wouldn't use p5.js for Big Boy Software Development, but whenever I want to sketch, it's the first digital tool I reach for.
As a summer project I wrote a version for Racket:
https://docs.racket-lang.org/manual-sketching/
The main inspiration was Daniel Shiffman's YouTube channel "The Coding Train". He has a knack for picking visual interesting problems/algorithms and his enthusiasm is unmatched.
https://news.ycombinator.com/item?id=37760363
Knowing what I know now I regret supporting the work of Processing Foundation.
2022 (244 points, 57 comments) https://news.ycombinator.com/item?id=33176026
2017 (349 points, 77 comments) https://news.ycombinator.com/item?id=14749527
2014 (381 points, 93 comments) https://news.ycombinator.com/item?id=8144212
There's also Anime.js[2] and Scene.js[3] - but I've never played with them so can't vouch for their usefulness. Both have had code updates in the past year.
(Self-promotion time) I had a lot of fun adding an animation/tween system to my canvas library[4] a while back. Building out the code to run such animations is one thing; making it performant is a very different challenge![5]
[2] https://github.com/juliangarnier/anime/
[3] https://github.com/daybrush/scenejs
[4] https://github.com/KaliedaRik/Scrawl-canvas
[5] SC tween stress test - https://scrawl-v8.rikweb.org.uk/demo/canvas-006.html
This gradient descent visualizer is made with it for example [1] to interpolate the points when the prediction line moves.
Last year, I made a p5.js and Ruby on Rails powered application [1] [2] for my Bachelor's degree that allowed the user to create generative art directly from the user interface, and the experience with that tool was straightforward.
[1] - https://www.facili.art/
It's one of the fastest ways I know of to make something fun and expressive in code.
p5 was a core dependency for Art Blocks, a popular Ethereum art platform that gained popularity due to its asset class of entirely generative artworks.