I’ve used Processing for many years, but never the more recent Javascript version created by Lauren McCarthy, p5.js.
The tutorials seem like a logical place to start, so lets begin with “Hello p5.js”.
The video is super fun! Lauren and Dan make a great team. Most exciting of all is that the video is interactive – allowing you to click and interact with the tutorial as it is playing. Starting with shape drawing and quickly moving onto flocking behaviours as well as connecting to web services (such as the wind direction in New York) to control those said flocking circles the tutorial gives you a great quick overview of the platform – including a great sound generation via mouse demo.
Being open, the source code for the interactive video is even available here.
The next on the was “Get Started”. The tutorial starts with an instruction to download p5.js complete. After doing that I added the files to my Git repository for the project in a folder called “p5_js_GetStarted” and pushed them to GitHub using the following commands:
git pull git add . git commit -m "Adding p5.js Get Started tutorial" git push
After some circle drawing code, I added the following code to add interaction:
function setup() {
createCanvas(640, 480);
}
function draw() {
if (mouseIsPressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}
Using Sublime Text‘s Reindent function kept everything tidy. Below is a screen grab of the result, or you can try it for yourself.
The third tutorial in the list was “p5.js overview“.
This tutorial was hosted on GitHub and deals with a basic “Hello World” program, creating a canvas to draw upon, drawing into different HTML containers, working with native HTML5 canvas functionality, mouse and touch interaction, asynchronous calls and file loading – where my code started to break. After doing some digging I realised that I needed to run a local server in order to load my lovely “cat.jpg” file.
As I knew I’d be using it for another project, I decided to try Node.js. After some more digging, I realised that it would be best to install it via Homebrew, which I already had on my computer. As I’ve just updated to OS 10.12 aka “macOS Sierra” I had to do some updating of Homebrew, and found a nasty issue. After following the proscribed fix (which won’t happen if you just do a new install of Homebrew), I was ready to install node.js, by typing:
brew install node
In my terminal. I could then run the following two commands to verify that everything had installed correctly:
node -v npm -v
The versions that I had installed were 6.7.0 and 3.10.7 respectively. NPM stands for the Node Package Manager – NPM helps you with installing other Node.js code to your local filesystem, or wherever you happen to have Node.js installed.
After installing Node http-server, I ran it in my HelloWorld folder, pointed my web browser to http://localhost:8080/ and saw:
Hurrah! I uploaded it to my GitHub Pages account, so you can try it for yourself.
After trying making a Loading Screen and Instantiation / namespace experiments, I’m ready to move on to the next tutorial, “p5.js and Processing“.