Processing for the masses - p5js on steroids
Tags: p5js, javascript, typescript, algorithms
Published: 2023-06-22 22:46:14

Very recently I have discovered [The Coding Train](https://www.youtube.com/@TheCodingTrain) 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](https://processingfoundation.org/projects) 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](https://editor.p5js.org/) 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](https://p5js.org/reference/), 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](https://vitejs.dev/) 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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ljug17qhap1h2rrmit3.png)

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?

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6gxkk25uwmhyjrh9r6k5.png)