return to table of content

p5.js

rikroots
8 replies
10h15m

I think the key reason why this link has been posted to HN now is because p5js has a new website? Back in 2023 the Sovereign Tech Fund gave the p5js folks a €450k grant[1] "to enhance p5.js Documentation organization & accessibility" and this seems to be some of the results of that investment.

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...

larodi
3 replies
6h7m

Recently did a digital ad entirely in processing and then ported it to p5js. In my experience with it…

* 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.

zyklonix
0 replies
4h56m

These are some great insights! Thanks for summarizing them. It will save me a lot of time in the future. I would love to see this digital ad! Is it public?

ralusek
0 replies
2h20m

Regarding performance, I once had an experience that I never bothered to look into. I made a cool little interactive simulation in the p5js sandbox; ran flawlessly. I then copy pasted it into a codesandbox, and it was choppy and abysmal. I checked the version numbers and how it was being included and couldn’t see anything obvious. Maybe codesandbox has some isolation that is taxing? Like I said, never looked into it.

j45
0 replies
2h10m

p5.js ability to spark beginners while being reasonably capable is what stands out to me.

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.

petercooper
1 replies
8h11m

We also featured it quite prominently in yesterday's JavaScript Weekly. With ~175k subscribers, things we include often make it to HN front page hours later. It's next to impossible to actually prove the connection.. but it's just part of the fun of how links spread around the ecosystem for me :-)

slorber
0 replies
2h41m

Impossible yet it often happens the same old link gets featured everywhere at the same time :)

kapep
0 replies
8h20m

It's nice that they keep the old site available as https://archive.p5js.org/

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/

j45
0 replies
2h14m

The old site was decent and already mobile responsive.

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.

_spduchamp
8 replies
5h43m

ChatGPT knows P5.js pretty well so you can ask "Write a P5 program that plots a sine wave and let's me control phase with a slider." and it does it.

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/

zyklonix
4 replies
4h50m

I am fascinated with this. What is it used for?

zyklonix
2 replies
4h34m

Did you transform a coat stand into an awesome futuristic instrument??? So glad I asked. Brilliant work. This should be in the HN front page!

_spduchamp
1 replies
4h12m

Yup. That's exactly what I did.

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...

evanjrowley
0 replies
3h4m

Purchased! Excellent find on HN today.

potatoman22
2 replies
4h48m

Imagine a procedurally generated game via using an LLM to continually program new content for the game.

jckahn
1 replies
4h43m

That seems pretty soulless and uninteresting.

dr_dshiv
0 replies
3h41m

That sounds like a challenge worth taking up. (How to operationalize the soulfulness, though?)

Centigonal
4 replies
9h51m

This is a really pretty website! I'm surprised that they decided to take out the part in the About section mentioning that this is a continuation of the ideas from Processing - I guess maybe now P5.js is more popular than processing is/was?

noduerme
1 replies
9h14m

I really loved proce55ing as a mini language. I think it made a ton of sense in a world where it was fairly difficult to manipulate pixels inside something like a canvas inside a webpage if you wanted to make an interesting visual experiment. And it was also very readable and accessible to artists with little programming experience.

layer8
0 replies
3h45m

Why the past tense?

bmitc
1 replies
6h1m

I'm surprised that they decided to take out the part in the About section mentioning that this is a continuation of the ideas from Processing

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.

phforms
0 replies
19m

Some more context: Ben Fry posted a thread on X in 10/2023[1] where he announced and explained his decision to resign from the Processing Foundation.

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.

[1]: https://x.com/ben_fry/status/1709400641456501020

javaunsafe2019
3 replies
10h11m

I tried the examples on a recent iPhone and all of them didn’t work :(

tymscar
1 replies
10h4m

I tried first 5. All work on 15 pro max

contrast
0 replies
8h24m

I tried the first 5 on my 15 pro max. First one didn’t work at all. They all stopped working if I pressed “play” on the example, giving the impression they’re broken.

dopidopHN
0 replies
2h56m

I’m on a 2016 IPhone 5S and it works ?

whywhywhywhy
1 replies
5h50m

I've used P5.js in a ton of my professional work although would suggest anyone interested in using it today know what happened with one of the founders of the foundation and creator of the original Processing language P5 derived from.

https://news.ycombinator.com/item?id=37760363

Knowing what I know now I regret supporting the work of Processing Foundation.

password4321
0 replies
5h14m

Looks like the Processing Foundation got Mozilla Foundation'd.

trungdq88
1 replies
10h51m

Pretty cool library to quickly build a game out of. I've built a small water simulation [1] with p5.js and really like how simple it is to learn p5.

[1]: https://github.com/trungdq88/summer

alabhyajindal
0 replies
10h43m

Very cool!

sjdonado
1 replies
3h41m

Really good library and documentation, helped me to jump into animations in no time.Got this https://cs-games.sjdonado.com/ done in a few days

e40
0 replies
3h36m

On mobile the right third of the board is cut off.

petarb
0 replies
26m

I started learning how to program using Processing about 16 years ago, so P5 and other similar libraries always have a soft spot in my heart. It’s so gratifying for a beginner to write some code and see some shapes move around the screen.

martijnvds
0 replies
9h47m

Kind of sad that this isn't an implementation of Perl 5 in JS

john-tells-all
0 replies
2h44m

I adore P5js -- the community OpenProcessing[1] has thousands of wonderful artworks that are easily viewed, cloned, and modified. I'm mostly a Python guy but making small changes to P5js programs has helped me learn Javascript.

[1] -- https://openprocessing.org/discover/#/trending

jna_sh
0 replies
10h26m

Oh the new website shipped! They’ve been working on this for a while, looking great.

ikesau
0 replies
3h55m

Love p5 - I learned a bunch of new concepts through it: polar coordinate space; thinking in radians; dot products; event-driven programming.

It's one of the fastest ways I know of to make something fun and expressive in code.

alator21
0 replies
9h39m

Daniel Shiffman was the one that introduced me to this library years ago. Their videos were essential to my development as a programmer