Hi! I’m Ben Greenier — I’m an engineer at Microsoft working to create awesome open source projects with our partners. We get to create software to help solve really tricky problems, and share our stories as we go. This means that as part of my job I get to play with lots of new technologies, learn how to use them, and help other folks do the same.
Over the last month I’ve been working to build a community around live-coding. For me, live-coding has always been really inspiring — being able to share ideas and processes with others in real time is magical. I think that learning and doing things together helps get everyone on the same page. Since my work both professionally and personally is often open source and therefore very collaborative in it’s nature, I wanted to take the time to give live-coding a try. It’s been a really interesting journey so far, and I’m excited to keep learning and sharing! ✨
One of the things folks have asked me is how I created my transitional animation that I display when stream is starting or ending. I wanted to take some time to share how I made it, the tools I used, and the thought process behind using them. The final result is pictured above, and animated below.
Finding inspiration
I think it’s really important to think about what kind of content can inspire you — for me I’m really into typography and simple minimal graphics. I also knew I wanted to create something that was easily loop-able and reusable for more than just my stream. I really enjoy moonmoon’s stream starting graphic and knew I wanted to create something equally loop-able but with some clean text.
For a font, I knew I needed to use something I was licensed to use (obviously) and since I pay for Adobe CC, I get access to many typekit fonts as a part of that bundle. I started looking for a font there that I could use to create something pretty unique. Eventually, I settled on Variex.
Finally, I knew I wanted a small graphic that meant something to me. I regulary use the zap emoji (or lightning bolt, depending on who you talk to) to show strong work ethic, progress, and energy. That felt like a natural fit since live coding on stream represents similar themes in my life.⚡️
Drafting in Illustrator
Since we’re creating stream visuals, most folks (myself included) tend to think of video editing software as the likely path. However, after I spent some time really thinking about what I was going for here, I realized I wanted something with more room for interaction. Ideally, I wanted something I could use for a rebrand of my website as well. This led me toward using web technologies that run in a browser to create the animated bits, and using Illustrator to generate SVG, a scalable type of image that can be rendered and manipulated in browsers. Let’s take a brief look at the design process — keep in mind, I had already spent the time to brainstorm, so this process wasn’t too tricky.
After that was done, I just exported the layer as SVG. Since SVG is now valid in most browsers as part of the DOM, the resulting XML is all I needed to be able to render the new static logo in a browser.
Building for the web
Alright, so given the above static content, the next step was thinking about how I would animate the components. I still wasn’t quite sure exactly how I would choose to animate them... however, I knew that my options might be limited by available tools so I started there. I was familiar with SVG.js, and knew that I could use it to do some advanced stuff — but I wasn’t sure it would be easy to create a timeline of events that could loop. In hindsight, I think this would have been possible, but I’m very glad I kept looking.
Eventually I stumbled onto anime.js. Not only did anime have great timeline and looping features, but it’s homepage became the final piece of inspiration for the visual. It features an animation of the text “anime” being written from left to write, with overlapping letters! I was very impressed with the effect (seriously, check it out) and already had overlapping letters, so I decided to give it a shot.
Implementing the animation with anime.js was pretty simple, and the only struggle I had was how to appropriately toggle on and off the “lightning bolt” elements of my design at the correct time. This was tricky because leaving them visible the whole time caused them to be written as part of the animation like the other text…I wanted a different look. The “lighting bolts” in the design are supposed to flash into existence after all the text has been written. They should come from the N’s in my name — since the “lighting bolt” and the capital N looked very similar. I ended up relying on timing events in the update callback to make the “lighting bolts” appear and disappear. It isn’t very pretty code, but it yields the right visual.
Since anime.js had built in looping support, making everything reverse when the animation completed, and start again when it reached the beginning was quite easy! I just passed direction: 'alternate', loop: true to our anime.js timeline instance.
Final results
I’m really happy with the final result! I think it brings together the elements I’d decided to focus on, and provides a simple loop-able graphic that I can play before and after stream. I usually combine this with some music and additional text (if needed) to give folks time to warm up or cool down!
I hope this post can begin to answer the questions about how my visual was made, where it runs, and how I’ll likely continue to approach making visuals in the future. If you have questions, drop a comment below! 😎
I’ll continue to post about my adventures streaming development, including any new content that makes it’s way into the broadcast. Further, if live streaming development and product design is interesting to you (especially as it pertains to video games), follow me on twitter and tune in on twitch! 📺🚀
