A JavaScript Particle-System Animation to Illustrate Fractional Distillation

Intrigued by my foray into the world of generative design using p5.js, I decided to convert a Flash animation that I did for Citgo, back in 2012, into a JavaScript animation. I had two goals – teach myself more about Processing and Javascript and explore the benefits of designing a system rather than an animation.

You can see the animation here. Some caveats – this is not yet responsive on mobile and I have yet to test it on Windows/IE. I have tested it in Safari, Chrome, Firefox and iOS.

In fractional distillation, crude oil is heated, it evaporates, and rises in the column until it reaches its condensation point – at which point it is extracted from the system. Since different compounds have different boiling and condensation temperatures, various petroleum products, from propane gas to asphalt, can be separated from the crude. The system shown here is a bit simplified, but it is good for showing the basic concept.

While I have by no means simulated the system, I did approach it as a simulation, rather than an animation. I started with a basic p5.js particle system and adapted it to fit my needs. Each particle is of a particular type – with an associated image, condensation point and velocity. The system continuously creates particles with a random distribution of particle types – kerosene, diesel fuel, fuel oil, etc. They are given an upward acceleration and their paths are random, but controlled by an envelope of values – horizontally-constrained as they rise through the column and vertically-constrained as they move through the outflow tubes.

The approach is very different from ActionScript. With ActionScript, it was about animating individual particles in loops that gave the appearance of a particle system. If I wanted to add another outflow tube to the process in ActionScript, I would have had to duplicate and adjust an animation loop. With this simulated approach, I can just push a new particle type into the particles array, along with its parameters. If I wanted to change the speed, I would have had to add or subtract keyframes and adjust all the particles accordingly. Now I can just change a variable to make one particle type go faster than the other.

I also created a "Feed Stock System" object that I used to manage the crude oil stock level and that I was going to use to manage the firing of the furnace. I wanted the particles' speed to be dependent on the state of the furnace – they would be dormant until the boiler was ignited and the temperature became hot enough in the column and they would fall back dormant again when the boiler was turned off. Alas, paying work calls and I must leave that for another time.

Take a look at the animation. Help yourself to the code and Illustrator file. I'm trying to learn, so JavaScript critiques are welcome. If you are trying to learn, I have commented the code and included a chart that I made to help me understand the flow of the program.

Also, if you are interested, take a look at my portfolio. I am looking for a position at the intersection of creativity and coding.