Procedural animations - 3 (ENG version)

(Russian version)
Hey! I make procedural animations faster, than I can write tutors about them. So, today we will code really simple physical particles. We can you them for different simulations: sand, snow, ash... But let's call today's animation "sugar". And it looks like this:

Is it a procedural animation?

Oh, yeah! Particle animation is procedural too! We use code to move particles... nowadays we have a lot of applications to make particle effects. So, many people don't pay attention about procedural roots of the particle animation... Anyway I'd like to say a few words about particles and why you should use it in everyday life :)

What is a "particle"?

Often animation contains more than one object, but a cloud of objects. Smoke, rain, fire, snow... And entire effect has a lot of little objects inside it. Smoke particle, raindrop, fire spark, snowflake - here we have examples of particles. These particles can move separately or they can influence to each other.

Why is it useful?

Of course we can draw anything! Except me, of course, because I can't draw at all... I mean an artist can. But there is another thing. Often we want to have infinity loop of the animation. Start a fire and have a burning torch for a long time. And I think a drawing process of these loop-kind animations is really complicated!
We don't have such loop-problem with particles! Yeah! Code creates and destroys particles each second and we could have nice animated camp fire forever on the screen. Such a great bonus!

"Sugar"

Each particles in todays demo - is just an ordinary white square. Particles move vertically down, touch a floor and other particles go piled on top... The interesting thing, that particles interact with each other.
How we should do it with a code? I'm going to share really simple way with you.

The main idea in a few points

Be ready to this!
Each particle checks three neighbours under it. (left, center and right)

• Center space is empty? Great - let's go down!
• Center space is busy by another particle? Let's check the left space... empty there? great - move there. 
• Left space is busy? Let's check the right space. Empty -> move!
• Right space is busy? So... there is no choice - let's stay on previous position and don't move at all. 

Magic! There is no math, physics or any equation! Awesome!

How to store the list of particles

Yeah, the most tricky thing - how to implement this process and how to store the particles. There is a question: "How we can get to know, is there a particle under another particle??" Try to check all particles and compare positions? Yeah, we could... but it's too slow.
So, we make a matrix for entire space. In each cell of the matrix will be a particle or a null-value (for empty space).
So we can check the neighbours really fast and simple:

Particles in the left-down position:   matrix[i - 1][j + 1]

...center-down position:        matrix[i][j + 1]

...right-down:  matrix[i + 1][j + 1]

When we should create a particle...

This part is really simple. Let's start a timer and then after a few milliseconds we will create a new particle. Then restart the timer and wait for another period of time. With this logic we will have equal "ticks". Ok, let's create and start particle (or maybe a batch of particles) on each tick.

Idea extending

Yeah, we have sugar simulation... and why is it useful? And I'd like to say here: "no! this is not just sugar simulation!" We can change our process and get another stuff and animations.

• Sticky snow. If one particle touches another - let's stop the first particle.
• Water. If there is no space for a particle (left, center and right space are busy) don't stop the particle, but move it to the left direction.
• Fire. Particles go up and don't interact with each other.

And more... with this method we can get really interesting animations! Try it and experiment with the process!

Source

I don't know, where I can upload and nicely store my code.
So now I've uploaded the source code here. Click "copy code to clipboard"... and that's all! Now, all you have to do is paste code to an empty project to a first frame. Yes, that's all! After that you will en unstoppable sugar animation. Enjoy! :)

Сообщения, схожие по тематике: