Using Web technolgies as a medium for motion graphics was maybe not on the mind of Tim Berners-Lee when he came up with the WWW. For the past few months I’ve been working on a project that does just that.
Web folks–especially those of us working on the front-end of things–tend to be a bit consumed by tools and process. I sometimes get fatigued by the near constant chatter of new frameworks, build tools, package managers, plugins and on and on. I enjoy those tools and their benefits, but when I get worn down by them I need something to help pull me up and remind me why I love working on the Web. Our tools and processes are just means. I needed to work on something that would allow me to focus 100% on the end. Where the code creating it was unimportant. Where I could do things the long, hard, stupid way. And where I could bend and break best practices. That’s what I set out to do with what became Overawe.
I’m no stranger to using HTML/CSS to build projects that exist a bit outside the norm. Until now I’ve considered these projects “experiments”. They seemed like a way to try out new–at the time–CSS features. I think I’m beyond that point. Things like CSS animations are here to stay. With Overawe–and other projects like it I’ll do–I’m not experimenting with CSS anymore. I’m choosing the web as my preferred medium for creating art. HTML, CSS, and JavaScript are my paintbrushes and web browsers are my canvases. And how cool is that? There's not a single, fixed size, always-the-same canvas. Each browser and each operating system and each computer that runs Overawe will run it a bit different. This is due to feature implementation, processor strength, etc. It’s also different based on each viewers' preferences. What size is their screen? Are they running their browser in full screen or presentation mode? Do they have a slow network connection? Do they have a bunch of other programs running that will cause Overawe to stutter?
For each one of the questions and many others, there is an effect on the project and how each viewer experiences it. I think that's incredible. Some people will hate it because it doesn't appear to do anything. For some it will run the same as it does for me on my local development server. I have no control over it and that makes it fun.
The idea for the format came from those cool MTV identities. You know, the short clips they play between segments. If you're not familiar, here’s an hour of them . I wanted to make something similar by pairing graphics with short audio clips. Each section is independent of the others. With some of them I have an idea about what it means and what I’m saying with it. Others, I made just because they give me chuckle.
Coming up with each section would be sporadic. Sometimes I would sit down and just start writing words and phrases that popped into my head. Other times I would be walking or taking shower or just doing other things and an idea for a section would come into my head. The process was loose. Once I had a phrase or an idea I'd hop into Photoshop and just play. I tried not to spend too much time on any one section. I would just throw together text and images and apply whichever styles and filters felt right at the time. I didn't worry about “mistakes”. Because this project was about creating a little world of it's own, there are no mistakes. Whatever ended up on the screen was supposed to be there in that form.
While I don’t want this article or poject to be defined by the means of creation, I do want them to be available to anyone curious. As with most of my projects, you can access the source code on Github. All the animations are done using CSS. I did make use of the Web Audio API to fiddle with the audio clips. Each one is different, but I do things like speed up or slow down playback, add distortion, and apply high and low band filters. This is another area that gets interesting in different browsers. The Web Audio API is implemented different across browsers so the audio sounds different depending on which one you're using.
This was a lot of fun. Any time I get to sit down and create my own little world is good time. If no other person saw this but me, it’s still served it’s purpose. It allowed me to just make a thifng without the normal internal debates about if I was doing every little thing the "right" way. I encourage everyone to do the same regardless of the medium.
http://lab.tylergaw.com/overawe
https://github.com/tylergaw/overawe
Thanks for reading