At awesome, we’re always trying out new stuff. We love creating experiences that captivate; it’s what we do best, and we have a lot of fun in the process. That’s why we’ve launched awesome. explores; it’s a space for us to share the things we’re testing, trying— sometimes breaking — and creating.
Recently, we explored some new tools and created an immersive experience, which you can try out for yourself
Want to know how we made, and why? We sat down with a coffee — to talk about coffee — as well as the creative process behind it.
First off, why the coffee?
Chris: Like most people in our industry, we’re coffee obsessed. We all need coffee.
Dan: We’ve always talked about launching an awesome. coffee. That’s yet to become a reality — at the moment, it’s more of a fictional concept; it’s about awesome. coffee fuelling our creativity and innovation. We’re always trying to expand our skill sets and set ourselves challenges. Chris wanted to play around with some new tools, so when it came to choosing a subject it made sense to start with coffee.
Chris: Three.js had been on our radar for a while, and we’d seen a few websites using it in really cool ways. That inspired me to make the coffee cup in this environment. I began working on the particle system that would become the steam — basically just independent particles randomly moving at different times and sizes out of this mug. I thought, what if I turn the speed way up? All of the sudden this massive column appears. It’s like — okay, then. That’s awesome coffee.
How did you decide what the awesome. coffee experience would be?
Dan: When it comes to these experiments, we don’t want to take ourselves too seriously. It’s all about being fun and funny. We’ve intentionally got that cheese-y you know, 60’s kind of QVC TV shopping-style introduction. It’s gimmicky, it grabs your attention. You level up your coffee and then all of the sudden it’s hair-metal ‘80s. There’s rock music. You’ve opened the gates of hell. There’s a storm brewing in the sky.
Chris: There is a version out with mountains in the background and hell eagles and crows flying about.
Dan: It was all about playing with transitions and creating this extreme aesthetic juxtaposition. Just flipping between this nice fluffy regular coffee world, where everything is great then all of the sudden, you’re in awesome coffee world and it’s like — this is COOL.
So how did you go about creating this world?
Chris: Using the library, you can start building up basic blocks of geometry. Apply textures, stuff like that. The table, for example. That’s just built up from common primitives — a plane with things built on top of it. To make things that are a bit more complicated we used it’s known as one of the most open-source programmes Three.js, 3D animation software. Which people can use to create film stuff, special effects, all that malarkey. But you can also use it as an open-source modelling tool to create really basic models. And then we can begin to add elements to this landscape.
Dan: A lot of the thinking went into setting this scene and understanding how the user will experience this. Even just having the lightbox there, and the computer in the background — it creates a medium in terms of environment. There’s a degree of storyboarding and making decisions around how everything will fuse together. And having a play with it. Because it’s the first time we’ve used this framework, we need to decide how the user can interact with certain objects. What’s the point of that interaction? What are its limitations? What does it add?
Chris: Like the condensation. That’s an idea we borrowed from somewhere else.
Dan: Adding those rain particles made a really big difference. All of the sudden it felt like you’ve clicked a button and you’re elsewhere; it changes your emotional state. I think it’s all about learning what impact certain things can have. You could add something in that looks cool, but it doesn’t make an impact. So, is it worth keeping?
How does all of this translate into what you do at awesome. for clients?
Chris: It’s that ability to add certain elements to a website. Or being able to create that feeling of immersive-ness as you move around the site, or interact with it. There are so many applications. Even with these steam particles we built — knowing how to do a good particle system that can move into different areas of a page is useful. Alternatively, we could get them to blow up your web page, awesome.coffee-style. Which is of course, what most people want.
Dan: The whole point for us is to be as experimental as we can be. Testing all these things out: around perception, depth of field, setting the scene and this ability to make things more cinematic. It’s all about being able to explore and seeing just how far our skill sets can go. We've begun that conveyor belt of trying new bits of technology and techniques. We’ve definitely learned a lot from the process of making this.
Chris: It’s adding another tool to the tool kit. Once we know what we can achieve, it just inspires us to come up with more ideas — and think about all the other cool things we can do.
Level up your brewage here. Interested to speak to us about this project and tools? Or do you have an awesome idea for us to try? Get in touch and we’ll try and make it happen.