Loops, creative coding.

Replacement technique with 2D grid of objects


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 came up with this gif as example for this tutorial :

digits version

In the gif the positions of the boxes on one axis (x-axis) never change, and it moves along another axis (y-axis). We’re going to use a 2D grid of boxes of size 70 x 4. The idea is that every object (box) will take the place 4 boxes later along y-axis.

First let’s make the grid of boxes and show them.

Here is some code to draw that :

There’s already the setup to render the animation although boxes 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 boxes.

boxes still

Now let’s use replacement technique with our grid taking the next grid position when time is increased by 1.

In Box class :

We get something like this :

moving boxes

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 box class that will determine when a box starts moving upwards :

The variable “changer” is 0 before p==delay, then its value increases to 1 until p==delay+1.7, then its value stays at 1. So this is used to translate the height of our boxes. The result looks like this :

introduced delay

Let’s try to have a delay that changes according to the y index so that the grid is less apparent.

Maybe I can make this formula logical by saying that when y and yIndex increase, we want the box to move later, so with more delay.

delay with yIndex

Now let’s add some gaussian noise to the delay of each box to get something that looks more complex.

gaussian delay

To make this a bit more exciting we can use the easing function I found here : easeOutElastic.

Easing functions basically distort values between 0 and 1 and can be useful to get nice transitions. Here it’s directly applied to the “changer” variable.

use of easing

Then I’ve done something with colors :

The pow on changer is a subtle change to have colors changing faster at the beginning (so it matches better the motion). Here is the result :

color changes

Now, because we can do more random stuff for each object than the gaussian noise, I thought : let’s add some digits :) You could also give a random color to each box, different easing, etc…

The Box class with the digits (very few changes) :

digits version

One thing I sometimes do is to have a parameter of each object that changes with 1D noise and the “p” variable in this code (and with a different seed for each object).

The “changer” thing is not necessary at all : you can just have objects evolving with the parameter p. The grid is a quite abstract structure, it doesn’t have to look like a grid 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 last gif :

PS : Here’s a pretty similar gif I made :

constructing column gif

Also obviously :

rolling grid

Tutorials list