P5.JS with Electron JS— Making Generative Art Distributable on Mac and Windows

Jay (Vijayasimha BR)
Random Pink Hula
Published in
2 min readNov 19, 2021
screenshot of the Desktop App on Mac

The more I spend time with P5.JS, the more I keep getting ideas about what could I do with the stuff I am creating?

One option is to put up the final images/renders on my Behance Profile. Use the images like I would images in any other project.

Another super cool option is to make them into ‘night time’ screensavers. Like one of those ‘calm’ apps that you can get. A lot of times, at night time, I would prefer to just play some music and have some random visualiser running on my screens.

Why not?

Sure, I could deploy my P5.JS code on a website. That’s cool. Still, it’s a browser. At the end of the day, an app is always better than a browser. You have more control, runs offline and you could optimize it as much as you want.

That is when, I got the next question. I have so many P5.JS projects (and I keep adding more and more. If you are curious, check out my GitHub Folder about P5.JS) and I wish to put them into a desktop app?

(yes, folks are more into mobile, but I am more interested in large displays, and desktops is where I wish to live)

That is when, I remember reading about Electron. Electron helps put web code into desktop apps on Mac and Windows (and also Linux, but…nah). So, I headed over to the Electron website, and 2 hours later, I have this.

a simple Mac App running on top of Electron

It was that easy. Yes, it does not have any input. It does not have any fancy features.

But, it runs as an app. As of now, it is good enough for me. If I can get this published on the app store of Windows and Mac, that’s enough for me.

As always, code for this is available on Github.

I work as a full time freelance coding tutor. Hire me at UpWork or Fiverr or Stack Overflow. My personal website is here. Find more of my art at Behance and Unsplash.

--

--