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!

Processing vs P5.JS vs Processing.py - Which To Choose?

Processing is the programming language designed specifically to make it easy for artists to create algorithmic art.

Yes, I know .. it has a terrible name, that confuses anyone who says "processing" ... but apart from that it is very good. It's used in the leading art colleges and universities, and

Here is a nice introduction to Processing by the inspirational Daniel Shiffman @shiffman.

Welcome to Processing 3 from Processing Foundation on Vimeo.

Processing vs p5js vs Processing.py vs ..

Originally Processing was one language which came with it's own editor and runtime (the thing that ran your code and showed the images or animation).

That thing was based on Java, which was stable, and available on many platforms - Windows, Mac, Linux, and others too.

In recent times, the community has started to create different versions of Processing. The leading alternatives are p5js and processing.py. P5js is Processing implemented in Javascript, and works through web browsers. Processing.py still runs on Java but tries to have a more Python-like syntax, with the aid of Jypthon.

Which to choose for our Make Your Own Algorithmic Art?


Let's look at the pros and cons.

Processing

Advantages:

• The original and primary implementation of Processing.
• Lots of existing guides, tutorials, books for Processing.

Disadvantages:

• Needs specific software to be installed to create art. 
• Anyone who wants to see the creations also need to install the client - which is unreasonable.

p5.js

Advantages:

• Creation of art does not need special software. 
• Consumption of art does not need special software - only a modern web browser, which means works can be viewed on computers, laptops, tablets, smartphones... even tony things like Raspberry Pis, popular in schools and kids code clubs.
• Works can be hosted easily on the web.
• Based on javascript which has huge adoption and huge effort to continuously improve it's performance. 
• Is an official project of the Processing Foundation - and therefore receives full backing (and quality control).

Disadvantages:

• Debugging the code is not as intuitive or effective as the main Processing - you're effectively using the browser's javascript console to see errors for a clue to the bug.

Processing.py

Advantages:

• Python is the best language for new comers to learn. It is easy to learn, easy to read, very applicable, has huge adoption and community. Many kids in primary schools are learning it to support the UK's new curriculum. Huge enterprises like Google use Python. It's also the de facto standard for data science, with a rich set of libraries.
• The Python version of Processing has much simpler and easier syntax - no horrible curly braces or semi-colons to deal with. 

Disadvantages:

• Relatively new, with fewer resources and guides, and some are actually out of date and don't work.
• Some issues and bugs still present.
• Based on the same Java application as main Processing, and so needs it for both creation and consumption.
• Lots of useful Python libraries don't work as the implementation is actually Jython.

The Right Choice: p5.js

The choice wasn't easy.

I would have loved the simplicity and beauty of Python. Given the intended audience of readers who may be first-time coders, or those who are just not very confident - Python is by far the best language to learn. Far better than the less friendly javascript-like syntax of p5.js.

The next most important concern was accessibility. P5.js is based on web technologies which are standard in almost every computer from a laptop to a smartphone. No need for special software to create algorithmic art. And even more importantly, no need for special software to view and interact with the created art. Working over the world's most pervasive, open and democratic technology platforms - the web - is a huge plus for p5.js ... even if the syntax isn't ideal, and the debugging is not that friendly.

So the winner is ...

Welcome!

Hi and welcome!

This is a blog that will document progress on a new book Make Your Own Digital Art.

It'll be a book designed to be accessible, gentle, and fun .. aiming to

• encourage artists to code and create algorithmic digital art
• encourage technologists to express their own art.

The author (me) also organises the Algorithmic Art meetup, and the associated blog that writes up the session.

Draft Cover of Make Your Own Algorithmic Art