# Creating a screensaver with P5.js

**URL:** <https://discourse.processing.org/t/creating-a-screensaver-with-p5-js/261>\
**Category:** p5.js\
**Created:** [May 22, 2018, 1:18pm UTC](https://discourse.processing.org/t/creating-a-screensaver-with-p5-js/261 "2018-05-22T13:18:46Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![spacewarper](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/spacewarper/32/152_2.png) [@spacewarper](https://discourse.processing.org/u/spacewarper)\
**Post date:** [May 22, 2018, 1:18pm UTC](https://discourse.processing.org/t/creating-a-screensaver-with-p5-js/261/1 "2018-05-22T13:18:46Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![deerfeeder](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/deerfeeder/32/149_2.png) [@deerfeeder](https://discourse.processing.org/u/deerfeeder)\
**Post date:** [May 22, 2018, 1:26pm UTC](https://discourse.processing.org/t/creating-a-screensaver-with-p5-js/261/2 "2018-05-22T13:26:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![spacewarper](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/spacewarper/32/152_2.png) [@spacewarper](https://discourse.processing.org/u/spacewarper)\
**Post date:** [May 22, 2018, 1:28pm UTC](https://discourse.processing.org/t/creating-a-screensaver-with-p5-js/261/3 "2018-05-22T13:28:52Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![deerfeeder](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/deerfeeder/32/149_2.png) [@deerfeeder](https://discourse.processing.org/u/deerfeeder)\
**Post date:** [May 22, 2018, 1:31pm UTC](https://discourse.processing.org/t/creating-a-screensaver-with-p5-js/261/4 "2018-05-22T13:31:11Z")

</div>

Then I guess electron is your friend:

> **[Electron | Build cross-platform desktop apps with JavaScript, HTML, and CSS.](https://www.electronjs.org/)**
>
> Build cross-platform desktop apps with JavaScript, HTML, and CSS.

---

<div class="post-metadata">

**Author:** ![spacewarper](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/spacewarper/32/152_2.png) [@spacewarper](https://discourse.processing.org/u/spacewarper)\
**Post date:** [May 22, 2018, 1:46pm UTC](https://discourse.processing.org/t/creating-a-screensaver-with-p5-js/261/5 "2018-05-22T13:46:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![deerfeeder](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/deerfeeder/32/149_2.png) [@deerfeeder](https://discourse.processing.org/u/deerfeeder)\
**Post date:** [May 22, 2018, 2:01pm UTC](https://discourse.processing.org/t/creating-a-screensaver-with-p5-js/261/6 "2018-05-22T14:01:12Z")

</div>

> [@spacewarper](#):
>
> 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.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 22, 2018, 5:49pm UTC](https://discourse.processing.org/t/creating-a-screensaver-with-p5-js/261/7 "2018-05-22T17:49:03Z")

</div>

> **[Can i import my stuff into wallpaper engine?](https://Discourse.Processing.org/t/can-i-import-my-stuff-into-wallpaper-engine/153)**
>
> \*\*Welcome 🙂 \*\* My name is Luc(16) and last week I installed processing. the past week I have been making quite some stuff with processing already. I showed what I made to a couple of friends and asked me if I would be so kind to get the application...

---

<div class="post-metadata">

**Author:** ![haschdl](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/haschdl/32/1082_2.png) [@haschdl](https://discourse.processing.org/u/haschdl)\
**Post date:** [August 8, 2018, 10:01am UTC](https://discourse.processing.org/t/creating-a-screensaver-with-p5-js/261/8 "2018-08-08T10:01:07Z")

</div>

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” 🙂 I can publish it to Github, let me know if you’re interested.

---

<div class="post-metadata">

**Author:** ![deerfeeder](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/deerfeeder/32/149_2.png) [@deerfeeder](https://discourse.processing.org/u/deerfeeder)\
**Post date:** [September 5, 2018, 2:10pm UTC](https://discourse.processing.org/t/creating-a-screensaver-with-p5-js/261/9 "2018-09-05T14:10:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![haschdl](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/haschdl/32/1082_2.png) [@haschdl](https://discourse.processing.org/u/haschdl)\
**Post date:** [September 23, 2018, 4:31pm UTC](https://discourse.processing.org/t/creating-a-screensaver-with-p5-js/261/10 "2018-09-23T16:31:56Z")

</div>

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 🙂

> **[haschdl/processingscreensaver\_windows](https://github.com/haschdl/processingscreensaver_windows)**
>
> An experiment in creating screen savers for Windows from Processing - haschdl/processingscreensaver\_windows

---

<div class="post-metadata">

**Author:** ![gege17](https://avatars.discourse-cdn.com/v4/letter/g/e36b37/32.png) [@gege17](https://discourse.processing.org/u/gege17)\
**Post date:** [January 26, 2019, 7:22pm UTC](https://discourse.processing.org/t/creating-a-screensaver-with-p5-js/261/11 "2019-01-26T19:22:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GGERKK](https://avatars.discourse-cdn.com/v4/letter/g/b38774/32.png) [@GGERKK](https://discourse.processing.org/u/GGERKK)\
**Post date:** [March 22, 2019, 1:13am UTC](https://discourse.processing.org/t/creating-a-screensaver-with-p5-js/261/12 "2019-03-22T01:13:43Z")

</div>

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

> **[liquidx/webviewscreensaver](https://github.com/liquidx/webviewscreensaver)**
>
> Mac OS X Screen Saver powered by a Web View. Contribute to liquidx/webviewscreensaver development by creating an account on GitHub.