Processing JS Projects
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.