Using p5.js with node, nwjs, express?

anurup

Hello!

Can p5.js be used to create a desktop app?

A related question - and this might possibly be the wrong place to ask - is what exactly is the difference between node, nwjs and express?

I can programme in p5.js but I would like to be able to create a desktop app using it as I mentioned earlier, and my lack of knowledge on that doesn't help. Nor does scouring the web to understand the same. p5 was easy to learn, but these extraneous things are confounding!

I found a p5 module for npm (or should that be an npm module for p5?).

Can I do :

var p5 = require('p5');

function setup() {
   ....
   ....
}

function draw() {
   ....
   ....
}

and then execute that with node sketch.js?

Or is that laughably off?

Does using express/nwjs add to the agony or alleviate it in any way? Again the aim is to create a desktop app as node/nwjs is advertised to do.

Thanks in advance for your patience and for any helpful advice.

anurup

Also, while I am at it with the questions, how does one "include" a library like p5collide2d to be used in the desktop application?

Thanks again!

jeremydouglass

You seem to be asking how to write a desktop app using web technologies like javascript -- for example, including the p5.js library.

There are dozens of ways -- here is a list of some of them:

• https://stackoverflow.com/questions/109399/can-you-do-desktop-development-using-javascript

...for example, Electron:

• https://electron.atom.io/

...and here are different example boilerplates for doing p5.js in Electron (untested):

• https://github.com/remyroez/electron-p5-boilerplate
• https://github.com/garciadelcastillo/electron-p5js-quick-start

The second one includes example instructions in the README for using npm to install dependencies into the Electron project.

GoToLoop

• p5.js is a library focused on drawing on a canvas, which is an HTMLCanvasElement:
  https://Developer.Mozilla.org/en-US/docs/Web/API/HTMLCanvasElement
• AFAIK, only browsers have the tag <canvas>.
• Although it's still possible to open a browser to run a stand-alone web app, you're better off coding in Processing instead when targeting the desktop.

jeremydouglass

@GoToLoop -- in an Electron app I believe that you just create a canvas element, e.g. during setup:

• https://github.com/remyroez/electron-p5-boilerplate/search?q=canvas
• https://github.com/garciadelcastillo/electron-p5js-quick-start/search?q=canvas

GoToLoop

I think the now defunct p5.js IDE was coded targeting Electron.
But IMO, I still believe coding in Processing Java is the less painful way for desktop apps. ~O)

anurup

Thank you both for your answers. I will track down the links.

@GoToLoop : What does the p5 module for npm do?

@jeremydouglass : I was leaning towards nwjs because of its code obfuscation feature

GoToLoop

I believe the p5 NPM module is just for running headless tests. :(|)