Canvas with form

Your browser doesn't support HTML5, which is required for this web page to work properly. Please consider trying again with the latest version of a HTML5 capable browser, such as Firefox, Chrome, Safari or IE9.

Foreground colour:

Background colour:

Circle size:

 

Being able to run Processing.js sketches on a web page is really exciting, but I wanted to be able to add GUI elements (like buttons and drop down boxes). Basically, I wanted users to be able to interact with my graphics using a HTML form, but searching for a tutorial turned out to be fruitless. However, I was lucky enough to find a website that talked about sharing variables between Processing.js canvases, which helped enormously. You can find that website at http://bocoup.com, and it's well worth a look.

To find out how the example above works, you'll need to view the source of this web page, which you can do on a desktop PC or with a source viewer app on a mobile device. You'll see that I've used the same approach as bocoup.com for creating a global JavaScript variable in a script within the head of the HTML. However, as I wasn't trying to communicate between two Processing.js canvases, I added onClick() events to the HTML form button elements, with JavaScript code to set the global variables.

Those global variables are then read in the Processing.js draw() function, which then changes the colours to concur with the form elements. The draw() function also checks the state of the circle size drop down box, using standard JavaScript. Yes, you really can add JavaScript code within the sketch! On that basis you may wonder why I decided to add the global variable to the head of the HTML, rather than just reading the colour button states directly. The reason is just that it makes the code simpler: why keep polling the button states in Processing.js when there's a perfectly good event driven method available for the HTML buttons :)

However, the really exciting thing happens if you tap the image. Not only does that change the size of the circle, but it also changes the size selection form element to agree with the new circle size. How cool is that for two way communications between Processing.js and a HTML form! That was quite easy to do because the ability to include JavaScript code within a Processing.js sketch means we can set HTML form elements directly, rather than just being able to read them.

Being able to communicate two ways between Processing.js and HTML forms opens up many exciting possibilities for dynamic and interactive web pages. Hopefully this page will help you make some of your ideas a reality :)