3dhtml

Back in 2001 I was taking a Graphics Programming module and thought it would be interesting to try and implement a particle system in Javascript.

The code in these four examples is pretty messy, but it implements a 3D particle system based on the OpenGL graphics pipeline. Thus it implements perspective projection, uses matrix transformations, and has a viewport and rudementary camera model – that doesn't actually completely work properly.

All this is done using JavaScript and HTML elements; thus, compared to Java or Flash is pretty sucky.

CUBE

Plots the corners of a cube and allows you to apply transformations around the 3-axis.

GO »

FIRE

Attempts to (loosly!) simulate smoke using particle decay. As the particles age their properties change.

GO »

FOUNTAIN

Similar to fire, but demonstrates a different path that resembles a fountain. By pausing and rotating the fountain you can see that it is actually generated from a 3D system, rather than a 2D simulation of depth.

GO »

SOLAR

This is a simulation of the inner solar system, based on actual data: the relative sizes, orbital radii and orbital periods are taken from astronomical data.

GO »

« Back to endoflow