Procedural animations - 5

(Русская версия)
We had a sine at previous time... and today we continue with something similar. Circle and ellipse! Hypnotic animations, simple equations, a lot of code and math - yeah, we call it "procedural stuff". Prepare some cookies, tea and a sofa... Let's make some beauty!
Like this:



There is no common formulae and tricks. Let's concentrate on some specific things! Will be a lot of fun here. Because always we have really specific tasks like "do animation like that". So, let's try this stuff today too.

Strange chain

Let's start with this strange animation:

It seems, that the movement is interesting but really chaotic. But it is not. There is a circle behind this movement. Let's draw this helpful circles and all is clear now:

The rotation of each circle we can write with a single line of code:

circles[i].rotation = (Math.cos(timeValue - Math.PI) + 1) * 90;

Awesome? Yeah!
If we do it iteratively with all circle we will get entire movement!
And again: single line of code! one equation! Great!

Sponge circles

Continue with another strange thing... I can look at it infinite! Do you agree?

We have two movement here:

• periodic up-down movement
• disappearing circle at the top, and appearing circle at the bottom

And also bottom circles have a little bit 3D effect.
So, the base position of all ellipses - is a cosine function :) But there is a phase offset:

_y = cos( i / count * Math.PI ) * 90;

Ok, what about radius of each ellipse? Here is an equation for this (yeah, sine again):

_r = sin( i / count * Math.PI );

Time for animation! Additional cosine for "_y" will help:

20 * cos(i / count * Math.PI * 1.5 + time * 2 * Math.PI / 2);

To reduce some code, let's implement variable angle = i / count * Math.PI and now we can rewrite equations like this:

_y = cos( angle ) * 90 + 20 * cos(angle * 1.5 + time * 2 * Math.PI / 2);

_r = sin( angle );

Remember about disappearing circle? It's all about changing sizes. During changing "angle" variable with time we get this disappearing effect:

angle = (i + time / 2) / count * Math.PI;

Ok... and one more thing: 3D effect! The fact is that we have to increase ellipse's height at the bottom. This additional perspective will cause visual 3D effect.
And now we have the complete equations set for the whole movement:

angle = (i + time / 2) / count * Math.PI;
perspective = (1 - angle / Math.PI) * b / 3;
_y = Math.cos( angle ) * 90 + 20 * Math.cos(angle * 1.5 + time * 2 * Math.PI / 2);
_r = Math.sin( angle );
graphics.drawEllipse(-_r * a/2,
                           -_r * b/2 + _y,
                            _r * a,
                    _r * (b + perspective ));

I'm really sorry - too much math here...)))

Flower with circles

Let's relax and make colourful flower:

Here we have a lot of circles... they are moving to a center at the beginning, and then going outside with the flower form. The fact is that all circles centers are on another circle. And this circle radius is changing all the time. Huh... here is the math for x and y:

Radius = r * (Math.cos(time) + 1) / 2;
circles[i].x = Math.cos(i / (count) * Math.PI * 2 + time * 1 ) * Radius;
circles[i].y = Math.sin(i / (count) * Math.PI * 2 + time * 1 ) * Radius;

Where

r - is the maximum distance for circles

Radius - the current distance from the center

i - the current circle's index

count - the circles amount... yeap! we can change this value in the demo and get another flower, like this for example:

As always we have a problem with start/stop pauses. And make them as always while manipulating with the time:

animationTime += 1/stage.frameRate;
time = Math.pow(Math.sin( animationTime * 1), 7) * Math.PI;

After this, in all code "time" is really non-linear stuff! (7th power!)

Magic...

Source code

That's it, you can grab the source code here.

The end

Ok, today it was like relax... simple specific procedural animations.
If you like stuff like this - comment it. I'm glad to read your feedback!

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