particle-wise
After the fractal-wise exercise, today we’re going to do some particles!
have you ever seen those amazing demos created by the guys after Processing ? if not check processing they are great !
some of the most compelling processing demos are done by using particles and particle systems.
basically using particles means that instead of drawing the beautiful images by calculating what colour every pixel must be, for example using mathematical formulas (like the fractal we did the other day), a particle system works by definig some laws (force, acceleration, velocity) that work on some particles. Then you creat the beautiful images by creating a set of forces that evolve with time affecting a set of particles. That gives the dynamics of the demo. Then changing the colours of the particles, or adding some smoke around each particle, you can create very beautiful renders.
For example, to create a fountain, you would define a point that creates particles and gives them some force that pushes the particles up and right (to the top-right), then you define a gravity force that slowly makes the particles decelerate and got down, until they disappear.
you can also do particles that follow the mouse, and you can blur the particles to create a feeling of smog, or fire !
I started learning particles when I first saw this blobsalad this guy also wrote this article on particle systems which (as he says) was inspired by this article
but I like to do things differently, thus I did my own implementation after reading the articles and the code.
I think mine is more performant and thus you can have more particles without degrading movement smoothness.
basically what I did for this is to have a singleton object with a couple of arrays holding the X,Y position of each particle, the forces being applied, the velocity (or not? I think velocity is not needed thanks to verelet integration, only the previous X,Y position), then each particle only needs to know its index in the arrays of the Singleton when you do particle.getX or getY. Because the Singleton does the computations for verelet integration in every frame render, it can go very fast because it only uses javascript Numbers indexed in an array (Fast), while you can still use a Particle in an object-oriented fashin like particle.getX,getY or particle.paint().
Then when you have the particles, you define constraints among them. That means defining something like “particle A and B must always be at a distance of 5” and when that constraint is violated (because your particles are smashing against the frame of the canvas) then a force appears that opposes to the violating constraint, thus if the distance is increasing it attracts the particles together, and viceversa.
When you have particles and constraints you can define a rectangle (4 particles, 4 constraints) and you have a moving rectangle, but to keep it in the rectangle shape you need to add a constraint that keeps the two disconnected particles at a distance (the hypotenuse of the triangles that compose the rectangle). You can then create more complex forms by defining more particles and constraints among them.
I’d like to explain more about the paricle systems but have no time now. Just check out the examples I created:
example 1 with my particle engine example 2 with an adaptation of the particle system from blobsalad example 3 with an adaptation also