Allow p5 classes (like `p5.Color`, `p5.Vector` etc.) to be used outside of the browser (node, deno, bun etc.)?

[RobinBoers]

Topic

Hi, I'm building a multiplayer game using p5js. I would like to use the same classes for vectors and colors etc (like p5.Color, p5.Vector) on the server-side as on the frondend, but when I include them like this:

import { Color, Vector } from "p5";

I get the following error:

ReferenceError: Can't find variable: window
      at /home/robin/projects/102/node_modules/p5/lib/p5.min.js:2:541617
      at a (/home/robin/projects/102/node_modules/p5/lib/p5.min.js:2:513)
      at /home/robin/projects/102/node_modules/p5/lib/p5.min.js:2:555
      at /home/robin/projects/102/node_modules/p5/lib/p5.min.js:2:458110

I'm starting the server like this:

bun run src/server/main.ts

I think it would be cool to be able to use the classes that don't necessarily need the browser/canvas outside on other places too.

Maybe I'm just really dum and this is already possible? I also completely understand if this is out of scope for p5js, but I thought I'd ask :)

I can also split these classes into a seperate library/NPM package.

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[limzykenneth]

@RobinBoers The current internal design of p5.js does not account for internal classes to be used like this, although I agree that it will likely be useful to have. We are currently exploring what the next major version of p5.js would be and I have some plans for redesigning how internal modules work. I can certainly look into incorporating this idea potentially. 2.0 is still a bit of a long way away though, so this will not be something you will be able to do very soon.

[RobinBoers]

Hi @limzykenneth, thank you for the quick response. I think I'll just create a seperate package containing just p5.Vector and p5.Color for now.

[limzykenneth]

@RobinBoers If you got something working, do share and I may base future work on what you have. Thanks.

[kjhollen]

Another side effect of this could be making it easier to work with color in p5.js in general. Right now, it's not possible to put a simple assignment statement like this in the global scope of a sketch:

let c = color(255, 128, 128);

in the global scope. This produces an error, and is a difficult technicality to explain to beginner students. If this request could also fix this issue, I think it would be a lot easier to teach/learn how to work with color in p5.

[dhowe]

any further discussion/thinking on supporting basic classes (color, vector, font) outside of the p5 context ?

[RobinBoers]

I got something very basic working for my game project.

p5.Vector works (which was my main use case, as I'm calculating physics on the server), but p5.Color depended on some internal magic, if I remember correctly. So I just gave up and ended up passing hexidecimal color strings back and forth between the client and server.

https://github.com/dupunkto/p5-node

[limzykenneth]

@dhowe There hasn't been much yet but it is something I am still interested in exploring for p5.js 2.0. With additional interest and discussion from the community there probably can be a more fleshed out idea.

My current thinking is that for the math/numerical stuff it is relatively straightforward to do, however for things like p5.Color where my current idea is to leverage CSS where possible or p5.Font where I would prefer to leverage browser implementation as much as possible, a version that needs to be used outside of the browser will need its own implementation of those features where we lean on browser implementations. 2.0 will likely introduce flexibility to patch different versions of different use case but the actual implementation of either case I still have not had the chance to work out.