OpenProcessing.org - Coding Without Distractions

I've been thinking quite hard about how to make the first few steps for complete newcomers as easy and as productive as possible.

The Wrong Way

What I don't want is a high barrier at the start - like learning about HTML or Javascript or code editors, or saving files.

What I also don't want is for positive feedback to be delayed until quite late in the book - we don't want to have to go through lots of theory or concepts before we actually code and see something happen.

I was going to settle on downloading p5js, firing up a browser, pointing it at the source html file, using a text/code editor to edit the javascript file, and refreshing the browser to see the results .. all of these steps are not necessariy easy for non-technical artist. Add javascript web console debugging .. and you've lost the audience.

OpenProcessing To The Rescue

Luckily, over recent years, very friendly web sites have emehed, like trinket, codepen and jsfiddle. These allow you to write code directly into the browser and see what it does, without the need for downloading any files, firing up text/code editors, saving files and refrshing your browsers. They're like mini IDEs on the web - and they're fantsatic for testing ideas, sharing code, and really really good for teaching newcomers.

You can use some ofthe popular ones with p5js but they're not quite designed only for p5js.

openprocessing.org

Luckily, openprocessing.org exists - it's just the other other online coding things, but is designed just for p5js. That means things like easy switching between the code and canvas, correct syntax highligthing and even a good attempt at debugging and error messages. And best of all - you can save and shae your sketches.

That's what we'll be using for our book then! .. and move the stuff about hosting your work on the web, workign directly with html and javascript files, to an Appendix.

Here's a taster for what the coding page looks like:

Editing Code

And here's what the resultant sketch looks like:

The Resultant Sketch

.. all this with nothing more than a browser. Perfect for beginners!