Using Processing.js with jQuery
In this recipe, we'll take a look at how we can combine Processing.js with jQuery. We'll also use jQuery UI (User Interface), a user interface library built on top of jQuery. This library will enable us to use sliders to control our Processing sketch.
Getting ready
Before you start to write code, you need to download jQuery and jQuery UI. You can get everything on the websites for both projects:
Place minified jQuery and jQuery UI files in the js
directory, together with the minified Processing.js file. Add the reset.css
and style.css
files to the css
folder. The base folder you can see in the following screenshot contains CSS files and some images needed for jQuery UI to work properly. You can find the base
folder inside the themes
folder of the jQuery UI download file.
How to do it...
If all files are in place, it's time to get started. The HTML file looks a little different compared to the one from the Writing sketches...