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.
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.