So here's a simple processing demo I did a while ago, ported to p5.js, a library allowing you to essentially write processing in JavaScript, using an HTML canvas! As you will see when running the demo, JavaScript performance is not really where you'd like it to be when doing animation :) The JavaScript engine of your browser makes a huge difference here. I recommend running this in Chrome, it's quite noticably faster than Firefox.

Click here to run the demo

Source code 

Shows how to create a lit sphere with just one vertex and a custom shader. The demo creates a few point sprites and an animated point light circling around the "spheres". Saves a lot of geometry!

Of course, if the viewer moves with respect to the geometry, you still see the same texture. So it is perfect for rendering the moon, which always shows the same face to us.

Click here to run the demo

To examine the source code, right-click into the popup window, where your browser should offer you to view the source of the current frame.

Demonstrates how to implement articulated structures (i.e., things like trees or limbs) in processing. Uses processing.js to run in the browser. Push the big red button and see what happens!

Click here to run the demo

Source code

This shows a combination of an IFS (iterated function system) and a particle system. In an IFS, points are attracted towards a fractal shape by iterating the positions over a set of affine transformations. The original algorithm starts with just one random point and plots its current position over a series of randomized transformations. In this example, I instead start out with a number of randomly distributed particles, which are then given target positions by running the IFS transformations.

When the general shape has settled, one additional iteration is performed every few seconds. It's instructive to see how particles are warped from one place on the fractal shape to a completely different position.

The demo is implemented in Processing using processing.js. With 5000 particles moving around, performance depends on your browser and hardware. Unfortunately, PShape support is not yet complete in processing.js, which would probably help to speed this up.

 

Click here to run the demo