DevLog

Press any key to restart animation.

Explode was my first processing applet. It involves about 15,000 particles. It’s an animation of a particle fireworks effect.

In the setup, 10,000 particles are initialized in an array, using a custom Class. The class holds all the information and functions for the particle, so it allows easy particle management. When initialized, an x, y, and z variable is created for the particle’s coordinates all start at (0,width/4,0) in the format of (x,y,z), with y being up and down. Then another coordinate (px,py,pz) for the tail of the particle. There’s also speed, theta, and phi. These variables controls which direction, and how fast each particle goes. Speed (or in this case, rho), phi, and theta are all spherical coordinates. Rho simply defines the distance from the center, phi is the latitude (along the y axis, up and down), and theta is the longitude (along the x axis, around the sides). They’re randomly assigned when initialized. Last of all, there’s gravity. Gravity simply defines the y velocity (up and down).

All that happens for each frame is that the update function in the particle class is called, for each particle. Before any calculation is done, (px,py,pz) is set to the current coordinate, for the tail of the particle. Afterwards, the new (x,y,z) coordinate is calculated, using the speed, phi, theta, and gravity. These are used to calculate a coordinate on a theoretical sphere around the current coordinate, which ends up being the resulting coordinate.

The resulting coordinate is rotated along the x and z plane 2 degrees clockwise. This adds to the wow factor, and creates the illusion of 3d.

After the coordinates are calculated, the y velocity (gravity) is increased by 0.3, and the speed is decreased by 2% to simulate friction. Then the particle is drawn using an isometric formula.

The isometric formula is pretty simple in concept. It converts our 3D (x,y,z) coordinate to the 2D screen coordinate (x,y). Isometric pretty much means that the sides, x and z coordinates, are rotated 45 degrees along the x axis. In my formula, I simply rotate them 30 degrees. The x axis is adjusted to be 30 degrees diagonal one way (top left to bottom right), and z axis is rotated the other (top right to bottom left). The y coordinate, however, isn’t adjusted. It’s simply added or subtracted according to the x and z coordinates.

When the final on screen (x,y) coordinate is calculated, the color is set according to how far along the particle is along the x axis (top left is darkest, bottom right is lightest), and the particle is drawn.

You can view the app and her source on OpenProcessing (linked above), with the source commented.