Brendan Dawes
The Art of Form and Code

Using p5.js and Phantomjs to create images on the fly

I've been actively using Processing since 2003 – it's at the core of what I do and the work that I make. Yet I've always wanted something similar that I could use on a server so to speak; have code run, create beautiful graphics and then save the resultant image to the server. When p5.js appeared I started to have a play around and after some false starts I managed to combine p5.js and Phantomjs to create exactly that. Presently I'm generating an image every hour which gets uploaded to my Twitter profile banner. What follows is not so much a tutorial, more of an overview of the steps I went through to get this working.

Download P5.js

I'm going to presume here that you know something about programming with Processing. If it's all new to you I highly recommend you visit hello.processing.org Anyway, this doesn't use Processing in the end product but instead p5.js, a native Javascript library built with the same core ideas of Processing. It's really easy to port stuff over you've written in Processing to p5.js. Head on over to p5js.org and download the library together with the example to get started.

Install Phantomjs

Once you've done that, and hopefully you've got some nice stuff happening in the browser with p5 you're then going to want to be able to export the graphics you create onto your web server. There's actually a few ways to do this, one involving using canvas.datatoUrl method and then posting to another script, but the method I used involves Phantomjs. Phantomjs is a "headless WebKit scriptable with a JavaScript API". Think of it like a browser that can run on your server, load web pages, and best of all, make screen captures. Now depending on what server-side scripting language you want to use will alter how you install Phantomjs on your server. Personally I still like a bit of PHP so I went with the lovely php-phantomjs. You'll need to follow the instructions on that site to install it on to your server.

So now we have p5.js doing it's thing and we have Phantomjs installed on the server ready to screen capture the output of your amazing p5.js coding. Now this is were I hit a problem. Everything was working fine in the browser, with the p5.js graphics working great, yet when I tried to capture the screen with Phantomjs it just wouldn't render. After seeing the console output from Phantomjs it turned out that the Javascript implementation that Phantomjs uses is not exactly like the one in your browser. The main problem being that prototype.bind() is not supported, yet it's part of p5.js. I wasn't giving up and I knew that some clever person had probably written a workaround. Sure enough there was one I found on Stackoverlow and I simply pasted this code into the top of the p5.js Javascript. Now everything was working!

The php-phantomjs site has examples of creating screen captures from web pages. Just use one of those examples and point the page to capture to your wonderful p5.js stuff. All being well this should render out an image to your server.

I went a stage further and created an image every hour using a cron job on the server which then then gets uploaded as my Twitter profile banner. I'm not going to go into cron here as there are a load of examples on the web. Oh one thing I should say is Codebird is a great php library for interacting with Twitter.

I hope that gives you some pointers to how to capture images created with p5.js. Lots of potential!

Grab the source code for the sine waves

The source code and working example for creating sine waves with P5.js can be seen here. Just refresh the page to get a different outcome each time.