- Virtual Petals
- Source petals
- Color Blending
- Easing Functions / Interpolation Functions
- Gamma Correction
- Color Palettes, and HSL encoding
- Pseudo Random Generator
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:
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.
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.
In order to have overlapping patterns, I have implemented multiple standard color blending algorithms: screen, multiply, addition, divide and normal.
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.
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
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.
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: