Processing for the masses - p5js on steroids

Very recently I have discovered The Coding Train YouTube channel. At first, it was kinda weird for a moment, but after two or three videos I was completely sold! I wanted that power of Processing for me! And I wanted it NOW!

As usual in those nice, academic cases, tooling support is, let's just say, somewhat lacky. There is a playground you can use to, well,... play around, but any sort of serious work requires a proper setup with TypeScript, ESLint, proper IDE support for in-place documentation and code completion. I don't think there's a single person on the planet that knows all there is to Processing, is there?

And so, now, ladies and gents... (drummroll) Badum-tss! Here it is! The all-mighty all-in-one with a cherry on top template you can use NOW!

npm create -y from-github padcom/p5 hello-world

You then need to install packages (as with any npm-enabled project):

cd hello-world
npm install

and you're ready to start coding (assuming you do have vscode installed):

code .
npm start

In a matter of seconds, you're coding in a TS-enabled, ESlint-backed, full-blown development environment with features you never even dreamed about, but might also be quite familiar to you if you are a frontend developer. In essence, everything that Vite.js supports is supported.

Ok, buuuuut... HOW MANY SECONDS?!

padcom@padcom:~/learning/p5$ rm -rf ~/.npm hello-world

At this stage, my local installation is totally fresh, nothing's cached. So we go with the worst-case scenario:

padcom@padcom:~/learning/p5$ time npm create -y from-github padcom/p5 hello-world
create-from-github version 0.0.4 by Matthias Hryniszak <padcom@gmail.com> 

cloning https://github.com/padcom/p5 ...
cloning https://github.com/padcom/p5-template ...
cleaning up hello-world ...
configuring hello-world ...
done.

real    0m5,003s
user    0m0,875s
sys 0m0,116s
padcom@padcom:~/learning/p5$ time npm i --prefix hello-world

added 165 packages, and audited 166 packages in 14s

36 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

real    0m14,205s
user    0m2,648s
sys 0m0,476s
padcom@padcom:~/learning/p5$

That's about 20 seconds. I call that acceptable, especially that it will save me a lot of time later.

But ok, you don't do that to have just one project, do you? You'd want to use that opportunity and start 10, 20 or a 100 small projects, some will live forever and ever, some will die 10 seconds after they were created.

Here's how fast it is to create the next project:

padcom@padcom:~/learning/p5$ rm -rf hello-world
padcom@padcom:~/learning/p5$ time npm create -y from-github@latest padcom/p5 hello-world
create-from-github version 0.0.4 by Matthias Hryniszak <padcom@gmail.com> 

cloning https://github.com/padcom/p5 ...
cloning https://github.com/padcom/p5-template ...
cleaning up hello-world ...
configuring hello-world ...
done.

real    0m1,209s
user    0m0,603s
sys 0m0,054s
padcom@padcom:~/learning/p5$ time npm i --prefix hello-world

added 165 packages, and audited 166 packages in 1s

36 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

real    0m1,218s
user    0m1,529s
sys 0m0,307s
padcom@padcom:~/learning/p5$ 

Less than 3s to have a new project ready to work. Sounds like a winner to me ;)

And the cherry on top I promised?

How about in-editor debugging with step-by-step code execution?