How We Created 36 Unique WebGL Demos in 36 Days
In 2019 our studio participated in the annual 36 Days of Type event; a creative challenge hosted on Instagram where artists are invited to create a graphic or video for each character of the Latin alphabet, once a day, for 36 days straight. Keen on showing off our creative development prowess, Reflektor created an interactive sketch for each of the 36 characters and published the results in a stunning website eventually went on to win our first set of studio awards.
We learned a lot from that initial crack at the challenge. The 36 Days of Type challenge provided the perfect learning opportunity for our developers to get comfortable with web creative coding tools like p5, Three.js, and canvas-sketch. Also, making time for community-driven side projects like these serve as a fantastic marketing opportunity, and the design of the project helped us to stretch the limits of our brand identity.
When March rolled around last year, we were finally prepared to tackle the 36 Days challenge again. We had learned a lot in the two years since the last edition of 36 Days of Type — not to mention launching the new Reflektor brand and crafting multiple award-winning websites with our partners — however, we realized that we would have to step up our game this time around to reflect these accomplishments.
So. How did it go? You may ask. Well! Check out all the new fully-interactive letters and numbers on our new 36 Days of Type website, with a custom NFT marketplace!
Step 0: Planning
Although collective excitement about 36 Days was in the air at Reflektor, we all recognized the need to do some upfront planning before we could jump into the project. So, we took a moment to outline some of the challenges that were ahead.
- First, we should aim to improve the visual quality of the letters, and try to create a set of design rules as early as possible.
- Second, we would need to find a way to provide enough time for the developer team to get familiar with new creative development tools. We would also need to be able to schedule a letter coming out every day (including weekends).
- Lastly, we would need to find a way to keep the studio and the rest of our client projects running smoothly while working on this experimental project at the same time.
Once we had all of the challenges clearly defined, a clearer picture of our game plan began to emerge. The following sections are a step-by-step breakdown of our approach as they happened.
Step 1: Creative Direction
In this phase, we decided on establishing a coherent look and feel for each letter. We teamed up with creative director Martin Szomolanyi to create a set of moodboards and style frames. Miro really helped with this task, as it allowed us to pull in images and gifs in real-time.
These exercises helped us narrow down three key points to accomplish with our design system:
- All letters should be Reflektive™ in some way. The materials and shaders used should feel futuristic, shiny, and iridescent.
- The letters should not conflict or blend together when assembled in the Instagram grid.
- The geometry of the letters should lend themselves to popular creative coding techniques, and should be made up of multiple smaller components so we can manipulate and animate each piece.
Step 2: Typography and Models
Next was the task of building a set of 3D letter models to use for each demo. Considering that we needed to anticipate some of potential interactions and animations for each letter, we opted to build a set of tools in Blender that allowed us to generate a fragmented letter model using the popular Voronoi algorithm.
This style of geometry allows for a lot of creative flexibility for animating each individual letter fragment’s scale, position, and velocity to create unique effects, not to mention it already looks really cool by itself.
Step 3: Javascript Tooling
Projects like these allow our developers to experiment with the hottest new technologies in a lower-stakes environment. In our case, we were excited to try out the TroisJS library, a declarative Three.js wrapper for Vue (our frontend development framework of choice.) Using TroisJs, we could declare our 3D scenes using HTML-like markup which is not only easier to understand than the typical giant block of code that Three.js requires, but also made it trivial for us to build out a set of templates and components to make creating a new letter as simple as changing a couple of properties in our code.
Declarative 3D libraries have really picked up steam over the last couple of years. There is React Three Fiber for React and even Svelte Cubed for Svelte. We’re expecting that these styles of libraries are set to grow in the future as front-end developers start to get more comfortable with 3D.
Step 4: Getting to Work
Everyone on our team was assigned letters throughout the month and was given about a week between letters with plenty of time for brainstorming, research, and execution. We already met twice a day to discuss our ongoing projects with each other, so naturally, we used that time to critique each other’s work and make suggestions for simple design changes as well different creative coding techniques to implement. One thing that helped guide the ideas of our team is a simple “x is for y” prompt (one great example being “S is for Sakura”.) This style of prompt was really helpful for generating ideas but we were careful to not get too prescriptive with that pattern, especially for the numeric characters (0–9).
In the end, our team’s creativity was astonishing. Our developers quickly expanded on the templates and design system that we had established early on. You’ll start to see some of our more creative letters closer to the end of the challenge when each developer started to get more and more comfortable with the tools.
That being said, on the days when we knew that we wouldn’t have quite enough time for a uniquely creative letter we often swapped in a letter using our template, which often only took about an hour to put together. These conditions gave our developers the flexibility to spend more time on their demos if needed while keeping up with the pace of the challenge.
Letter Highlights:
H — Heat - Default Letter
Made super quickly using tools and framework created earlier
M — Manga/Magma - Miko
Custom modelling, post-processing effects
O — Orb - Sean
Custom shaders, combining code from the Three.js examples library
U — Universe - Shiqi
Animation, PBR workflow to create metal like materials, cool composition
Y — Yin-Yang - Max
Motion design and seamless loops
S — Sakura - William
Japanese minimalism and boid particle systems
6 - Stephane
Custom shaders and render passes
8 - LokLok
Custom shaders and Effect Node
9 - Luc
Raymarching technique, no geometry approach
Wrapping Up
At times, this project got quite hectic, but we managed to pull through thanks to a lot of the hard upfront planning work put in at the beginning of the project. That being said, we really learned a lot and were surprised to find that some of our assumptions were completely blown away. Here are some key findings:
- All of the upfront planning for the design system of each letter was very helpful, but with so many cooks in the kitchen it was hard to nail down a specific look. With such an open-ended project… why should you? Especially considering that once the wheels got rolling our team still impressed with dozens of super creative and unique designs.
- Having lots of extra breathing room for certain more complicated effects really helped, especially given lots of other tasks were on the go. It’s proven to be critical to have a backup plan on days when someone needs just a little bit of extra time.
- Schedules and deadlines helped give us the necessary motivation to get started, and helped us to recognize the need to ask for help if we needed it before it was too late.
- When you can’t be with your team in person to help with teaching, having examples and a well-documented framework ready to go were essential.
What’s next for Reflektor?
While our work schedule picked right back up after the 36 Days Challenge, we’ve slowly picked away at the challenge of making the demos interactive, as well as wrapping the project up in an interface that allows us to display the letters altogether. Here’s the finished product, please check it out here when you get a chance!
Another element we’ve cooked up is the ability to purchase the letters as NFTs. We’re really looking forward to exploring the Web3 space in 2022 and feel like there’s lots of opportunity for projects running on the blockchain to exist in the metaverse.
Who knows, maybe we’ll be able to take our learnings from our 2021 take on 36 Days of Type and tackle it again in 2022. I guess you’ll have to follow us and find out!
