“The joining or merging of elements to form one mass or whole.” – A study of generative movement, options, and user interface, using Three.js.
Marking the next chapter in my ongoing study of Three.js, ‘Coalescence’ includes a few key elements that I have been wanting to learn how to do, and experiment with, for a while now.
Firstly, I wanted to try implementing a basic light / dark mode functionality. Mostly, just to see what this looked and felt like for potential use in future projects, not just for light and dark mode but also for general colour options etc. In this case because I wanted to achieve a smooth transition between a gradient based background this wasn’t straightforward. I also ended up learning how to transition the colour and opacity of materials and shadows.
I also wanted to try including at least some basic options that could be easily accessible via the user interface. In all cases I have used localStorage to retain and reapply these types of options. If you’re interested in this you can see it in action by closing and reopening the browser window. You can also try opening it up in multiple windows and the options at least, should update in each.
And lastly, something that I have really wanted to do for a while now is figure out how to create animation sequences that loop and cycle between different, randomly generated values. – I’m attracted to the way this creates sequences and combinations that feel less linear and more organic. Lately I’ve been working on some projects that are very much running with this basic foundation which I’m really looking forward to sharing shortly.
