UPDATE: I removed the processing.js from the head, because it meant unneccessary page load on the blog and because P5.js. It also works, if you put it in the article, like I did here, after the “more”-break, so that it only loads when someone is actually viewing the post that contains the Processing example.
Some notes about Processing
Creative Coding MOOC
Since last week there is a course about creative coding on Futurelearn, held by John McCormack from the Monash University. It started great and was already very successful in motivating the participants to combine art and programming. The language of choice is Processing, a Java-based language, that provides easy access to the kind of functions that are usually needed to make art on the computer.
Showing Processing on the web
Since art wants to be seen, there is of course a need to have a way of showing the code and its running examples to others. Processing already comes with some ways to do that. You can for example build an android app from your code or a standalone Java-Program. But the way to go, to show something to an audience today qould of course be the web.
Openprocessing and sketchpad
Two websites are explicitely dedicated to the cause of showcasing Processing-sketches: Openprocessing and Sketchpad. Both provide not only the possibility to share your existing sketches and show them online, but also to create new ones online.
But what, if your website is done the hacker way, if it is an octopress blog on github?
Basically it’s the same as using Processing.js on any other html-page.
Where to put the Processing.js?
Where is the head of my template?
Making your sketches a comfortable home
To have some order in my files, I decided to make a folder with the name “processing” for all the sketches, that I might want to share with the world. Of course also in the “source” folder. Now I can put any sketch that I want to include in a blogpost in this folder and load it into a canvas-element, just like this:
<center> <canvas data-processing-sources="/processing/tutorial.pde"></canvas> </center>
This is the a sketch from the “getting started” tutorial on the processing site and on this blog it looks like this: