The replacement technique was already explained and illustrated in the previous tutorial. This one shows both how to use it with objects that have random parameters, and also with a 2D grid structure: something I have used a lot.
I chose this gif as example for this tutorial:
In the gif the positions of the tiles on one axis (x-axis) never change, and it moves along another axis (y-axis). We’re going to use a 2D grid of tiles of size 70 x 4. The idea is that every object (tile) will take the place 4 tile later along y-axis at the end of the loop.
First let’s make the grid of tiles and show them.
Here is some code to draw that:
There’s already the setup to render the animation although the tiles don’t move yet. I also already rotated the view as it is at the end. I made gifs at 50 fps (delay=2). L defines the size of the tiles.
So far it looks like this:
Now let’s use replacement technique with our grid taking the next grid position when time is increased by 1.
In Tile class:
We get something like this:
It does not look amazing but we’ve got a nice structure behind and a large part of the work is done.
Let’s introduce a delay member in the Tile class that will determine when a tile starts to flip:
changer is 0 before p=delay, then its value increases to 1 until p=delay+2.5, then its value stays at 1.
So this is used to rotate the tiles around X axis. The result looks like this:
Let’s try to have a delay that changes according to the y index so that the 4x70 grid structure is less apparent.
Maybe I can make this formula logical by saying that when y and yIndex increase, we want the tile to move later, so with more delay.
The fix looks like this:
Now let’s add some gaussian noise to the delay of each tile to get something that looks more complex (and by the way the delay is a bit decreased with a constant).
To make this a bit more exciting we can use easing functions, you can find some on this page.
Easing functions basically distort values between 0 and 1 and can be useful to get nice transitions. Here it’s directly applied to the
Then I’ve done something with colors:
changer variable, and not
elasticChanger, is used to change colors. That’s why I use two different variables)
Here is the result:
Because we can do more random stuff for each object than the gaussian noise, I thought about using different digits. You could also give a random color to each tile, random different easing, random size/shape, etc…
The Tile class with the digits (very few changes):
One thing I sometimes do is to have something in each object that changes with 1D noise and the “p” variable in this code (and with a different seed for each object).
Important: The “
changer” thing that is used here to trigger something is not necessary at all for 2D grid replacement loops: objects are more generally changing with the parameter
The grid is a quite abstract structure, it doesn’t have to look like as much as a grid as here, and I use the same technique to make some tunnel gifs.
Thanks for reading and I hope you found this interesting or helpful.
Here is the entire code for the above finished gif of this tutorial:
Here’s a pretty similar gif I made:
Also this one:
Tutorials list Next tutorial