Processing JS Projects

Processing is a great way to get started in computer programming, and excellent as a way of developing very professional, artistic and educational interactive graphics. It can be used on various platforms (e.g. Windows, Linux and Mac) and you can even make Java Applets with it to put on your website. However, wouldn't it be wonderful to be able to program interactive content into your website using processing, taking full advantage of the new canvas tag in HTML5? Well you can, using Processing.js, which is a version of Processing written in JavaScript. Below are some projects written using Processing.js to illustrate just how powerful it is.

Please note that the pages below require you to be using a web browser that supports HTML5, otherwise the content will not run. If you have an older browser, particularly Internet Explorer (IE), please consider accessing these pages with a newer browser such as Firefox, Chrome, Safari or IE9.

Bouncy: This is a simple example of how to add a colourful animation to your web pages uses Processing.js. Basically, a randomly sized ball bounces around in a colourful animation.

Canvas with form: One of the nice things about HTML pages is the ability to have form elements that allow users to interact with web content. Here a Processing.js canvas and HTML form communicate with each other to demonstrate how to add form elements to your programs.

Cube 3D for WebGL: If you have a WebGL enabled browser maybe you'd like to see what a 3D rotating cube looks like running on a HTML5 canvas under processing.js? If so, this page shows just that and provides a quick example of how to do 3D web-based graphics. However, it won't work on non-WebGL browsers :(

Random graph: Why have static images to show off your data graphs when you can make them into interactive data? This page gives a simple example of how to make an animated graph using Processing.js to get you started in making your web graphing even more exciting.

Random Guage: Why have simple numbers on your web page when you can have a nice dial guage instead? This page provides an example of doing just that, with a guage and pointer that moves occasionally to a new random value.

Sierpinski Triangle: Fractals are an amazing part of science, and allow the creation of extremely complex images from very simple starting points. This page demonstrates that by drawing a Sierpinski Triangle using very simple Processing.js code and a random drawing method.

Spirographics: Do you remember the SpiroGraph toys, which allowed you to make fascinating multi-coloured patterns using pens and plastic discs? If so you may like to try an interactive version called Spirographics, which you can find on this page.

Virtual graffiti: GML (Graffiti Markup Language) is a great format for sharing electronic art with a feel for time in the brush strokes. This page demonstrates how to embed GML into your webpages using Processing.js so that you can share your digital masterpieces.

Virtual walk: GPS devices are very useful for recording a track, whether on foot, flying, cycling, or driving. However, wouldn't it be nice to view GPS data with the element of time included to give a sense of speed? This page demonstrates how to do that using Graffiti Markup Language.

Wave mixer: Understanding how waves combine can be quite daunting, because it relies on understanding complex math interactions. This page illustrates a simple educational program to demonstrate the effects of convoluting two sinusoidal waves.