Creating a screensaver with P5.js

While I have found some general frameworks that allow packaging HTML5 code into a screensaver, most of which based on WebKit, I would like this thread to be a point of information gathering and discussion about all best practices, frameworks and tricks to create screensavers with P5js.
So if you have some expertise or you share this interest or you’ve some work to show off, your contribution will be greatly appreciated.

not sure if javascript is the best option for desktop apps. but most of the platforms support a webview of some sort where you can run canvas and javascript. the easiest option is probably electron (cross platform wrapper for node/javascript/chrome).

Javascript is definitely not the way to go to create a screensaver from the scratch but it’d be great to be able to turn some work you did in P5js to a screensaver with the least possible hassle.

Then I guess electron is your friend:

Have you ever tried to compile a P5js based project? Does it work well?

in general you can do everything, that you can do in chrome (based on the chromium that comes with the version you download). plus you can have a bunch of desktop like features like proper fileIO and so on. you can also create frameless windows.

1 Like
1 Like

Hello @spacewarper and @deerfeeder! I’d love to learn more about your attemps with making p5.js into a screensaver.

I’ve been playing around creating screen savers with Processing (not p5.js), simply because it was more straightforward. I managed to make it work in a Windows environment, and I will soon test in Mac.
My solution is based on a bunch of forum posts and documentation pages, and I feel it’s easy to reproduce and plug into an existing sketch - these are important aspects because I would like to reuse the screensaver in a workshop, where participants might have little coding experience. In other words, I would like to spend the creative effort making the sketch, which is the main product, and turning it into an screen saver is the packaging or “gift wrap” :slight_smile: I can publish it to Github, let me know if you’re interested.

I think it is still better to do it with processing( performance wise). Use p5.js when you want something in the browser. Elektron would add a bunch of other stuff to your app and it eats up a bunch of memory.

hello @deerfeeder, I agree, better (and easier) doing with Processing. I saved my results and conclusions in Github, if someone is interested. My solution required including a custom main(String[] args) to the sketch code, and this has some side-effects, which I detailed in the repository.

There is also a few non-trivial details to get it to work in Windows settings dialog, which required the JNA library for accessing Windows API - non-trivial, but it can be reused with small effort :slight_smile:

Hello @haschdl
I get this error : “No library found for com.sun.jna.platform.win32.WinDef” with or without export.
Inside the IDE my appli is working good but not in screensaver mode of course (mainRENAME => main).
Softwares : Processing (3.5.2), W10 and JNA(5.2) are the latest release.
You example “processingscreesaver_windows” doesn’t run anymore
Can you help me please

I found this in the Processing subreddit and it works perfectly (even with a local file).

1 Like