Developer
May 3, 2024·3 min

Creative Dev : procedural animation using Blender Geometry Nodes

Cover illustration - Creative Dev  - BeTomorrow - Article

On the betomorrow.com website homepage, we feature five of our expertise areas, each of which has to have its associated animation. They have to be unique but not too different: the goal is to convey the sense that all expertises are at work in harmony on a given project.

We tried a few different approaches, and we realized that for these animations to look consistent, they had to be made with some kind of systematic process or recipe.

François Morellet, Pi et Plis (Noir) - 2008
François Morellet, Pi et Plis (Noir) - 2008

When art meets technique

Our artistic direction for the entire website revolves around the fusion of design and technology, with the guiding principle being the phrase "Build digital masterpieces". This reference to art and architecture is foundational and notably resonates with artistic movements that incorporate mathematics, such as concrete art, fractal art, or kinetic art, often employing geometric patterns, repetitions, and iterations.

The mathematical aspect conveys a sense of technical mastery while imparting a classic, elegant, timeless style.

Reference board for the new betomorrow.com website
Reference board for the betomorrow.com website

For 3D animation, we almost exclusively use Blender at BeTomorrow. A relatively recent addition is Geometry Nodes, a powerful tool to procedurally generate and transform geometry. In this context, “procedural” means that we can use maths and algorithms rather than having to do everything manually. This used to be possible only in Python, but is now available using a node-based workflow, similar to other professional tools for procedural generation like Houdini.

Geometry Nodes power

In addition to visual coherence, another reason for using procedural generation is to create looping animations, which can be quite challenging to achieve manually. The advantage of mathematics is that, no matter how complex a formula may be, if it is associated with a periodic function as input, such as a sine wave, the motion will always remain periodic.

Optimized for legibility

Since these animations are used as backgrounds, all the text on top has to be readable. This can be challenging with animations containing a lot of geometric detail. The solution was a combination of lighting adjustments - making the text-heavy areas appear dimmer - and the use of depth of field, a technique borrowed from photography where the focal point of the camera is adjusted to selectively blur some portions of the screen.

Final animation used as background

Towards new explorations

Finally, there are a lot of benefits with using a non-destructive workflow when you’re exploring. When you’re not sure about the visual density, the composition, the rhythm, it’s really convenient to be able to make structural changes until late in the process without having to start from scratch. Just before rendering the final version, we sat with our Brand Designer and made some crucial changes that would not have been possible otherwise.

Non-destructive workflow allows structural parameters to be changed right up to the end of the creation process

Conclusion

As a Creative Developer at BeTomorrow, I'm interested in tools that facilitate the meeting of technology and design. One of Blender's strengths is that it integrates both visual creation tools for artists and more technical tools such as code and nodes. The development of Geometry Nodes and its increasingly powerful rendering engines opens many doors that we're excited to explore more in the future !

3 min

Thank you for reading this article.

Our website uses cookies
Our website uses cookies to measure our audience, track performance during advertising campaigns and provide the best experience.