Pretty Animations

These past few days I’ve been working on the animation generator. Here’s a result:

I wrote a generator in C (which will later be the code used on the main board) which has a generate_frame function which will generate the next frame of a procedural animation. The generate_frame function can be called an arbitrary amount of times.

The code can export the frame to a file, which is then read by my animation simulator script I wrote for blender.

The simulator takes a few secondes to read the frames (5 secondes for a 500 frames animation for instance), and can then display the animation in real time (same as in the gif)

The simulator can also render high quality realistic animations as the one you can see in our project presentation , but even a small animation will take a day of rendering

Here’s all the concepts / techniques I have been working on right now (most of them are already implemented) which the generator uses:

Virtual Petals

The virtual petals are the petals you appear to be seeing go down (age) on our phyllo animations. In my code I allow multiple virtual petals to be at the same location, in order to allow multiple patterns to overlap.

Source petals

I call source petals the furthest upward virtual petals on our phyllo, which all form a circle centered around the pole. When the petals are aging, these petals may be the sources of the spirals we see. A source petal can extend the spiral towards the center in a clockwise or counter-clockwise direction, and it will try to do that at each frame generation.

Color Blending

In order to have overlapping patterns, I have implemented multiple standard color blending algorithms: screen, multiply, addition, divide and normal.

Easing Functions / Interpolation Functions

Constant colors are a little boring, for our animations each virtual petal will be assigned a special color structure which allows for nice color transitions.

This structure contains a list of colors at certain times, and an easing function. An easing function will allow a wide variety of smooth transitions between each color.

That way, each virtual petal can for instance smoothly turn itself on, and then oscillate between multiple colors.

I used this library to have all of the easing functions in C, which conveniently uses the Do what the fuck you want to public license.

Gamma Correction

Because of how our eyes work, we will have to use gamma correction to get accurate colors on our LEDs. We will probably adjust the gamma coefficient for each color, hopefully all the LEDs will have approximately the same color. After we have adjusted the gamma coefficient, we can use a 256 big lookup table instead of computing the gamma correction for each color every time

Color Palettes, and HSL encoding

To get nice looking animations, it will probably be a good idea to define a few color palettes containing colors that go well together. Since we have only 78 colored petals, if we start using random colors it will look quite messy, and we won’t really be able to distinguish the patterns.

Since we don’t want to have only constant colors, we need a way to vary a color so that it still works well with the color palette it comes from. In order to do this we can encode the colors using the Hue-Saturation-Luminance color space to easily manipulate them, and then convert them back to RGB.

This will take a little more computation, but we are using the STM32H743 processor which is very powerful, and we have 1 / 30th of a second to generate each frame, which should be plenty enough time.

Pseudo Random Generator

To generate pseudo random numbers I’m using the mt19937 algorithm, with this free to use c implementation. We will probably use the system time as the seed.

To be continued…

The shapes I’m using right now are spirals, but it might also look quite good to have circles and disks on the phyllo (even not centered ones). We can also implement something that adds some nice contours around our shapes. It might also be cool to have shapes moving at a different speed than the petals are, or in the opposite direction.

There’s a lot of potential to make some really awesome looking animations, but it is quite challenging as the whole thing can quickly become very messy looking since we only have 78 colored petals to work with.

Here’s another animation with a little bit of randomness:

Leave a Reply

Your email address will not be published. Required fields are marked *