Clubs, festivals and tours have closed worldwide due to pandemic. In an industry dominated by steaming where musicians rely on touring for almost all of their income, these shutdowns have lead to a real crisis for musicians and live music venues. In an effort to adapt, many musicians have turned to virtual concerts.
But without a shared connection between audience and performer we miss something. My final JS project is an experiment in restoring that shared experience: a collaborative framework for fans to create the visuals for virtual concerts TOGETHER.
In Collab Visuals, fans share visual “seeds” which create animation on the main screen. Intuitive controls allow for real time visual tweaks and effects. A Rails backend supports thousands of fans seamlessly. A Javascript frontend built on ThreeJS and WebGL means no app to download - and smooth performance on laptops, tablets, and phones. Even when we are apart, we can create something together.
The animation in Collab Visuals is driven by a cellular automata algorithm. Collab Visuals is inspired by the classic cellular automata - John Horton Conway’s Game Of Life - which dates back to 1970. At the most basic level, cellular automata revolve around each cell in the matrix determining the next step in their “life” by looking at their neighbors. How many are there? How old are they? How old am I? The answers to these questions drive the future state of each cell. I brought my perspective as a designer and animator to the project, integrating an element of managed randomness to each of the rules, to avoid the static and repeating nature found in many cellular automata.
Collab Visuals runs on a wide range of hardware - performance is good even on mobile phones or older laptops. The WebGL acceleration enabled by ThreeJS is critical in delivering good fame rates, but it wasn’t a magic bullet. My initial class architectures featured a “maximal” cell object that described every possible aspect of the cell. I quickly learned that this approach absolutely killed performance - loops through a massive matrix of bloated cell objects lead to the twin death knells of straining laptop fans and horrible frame rates. I had to pare down my central cell class until I had a system that ran smoothly even on my old iPhone 7. Performance took a lot of work - and that performance is the part of the project that I'm the most proud of.
For past projects, I’d used the Bulma framework for front end styling. But this time, I had to create a more complex UI that allowed users to create their visual seeds. This meant a custom frontend build on a base of Bootstrap - which lead to rounds of frontend testing and revision to get the system working on both Chrome and the all important WebKit. Creating a good solution required deep dives into CSS Grids and other front end frameworks not covered in the curriculum.