This has become an integral part of 3 Sided Cube. The encouragement and time to work purely on whatever their heart desires, all while getting a little reprieve from the normal hustle and bustle from the normal workload is a welcomed treat. Whether they opt to go the “innovation” or “education” route, that invaluable time to focus purely on whatever it is that intrigues them is pretty rad.
The sky’s the limit when it comes to Freeish Time. We got to sit down with Kev, our BRILLIANT Web Team Lead, and panda enthusiast to chat about his latest foray into Freeish Time…
What inspired your innovation time?
There are tonnes of cool technologies that would allow us to do this!
There, of course, was also the option of going completely rogue and doing it all vanilla HTML / js without the help from any particular framework.
I’ve always been excited about the prospect of building something fun and interactive on the web and this was my opportunity!
Talk us through what you did
I listed out some of the requirements I had for what I was building:
- Not a game
- The user must be able to tap/throw away distractions in order for the video to carry on and for the skydiver to complete his jump
- The user must be able to tap on the landing area to complete the jump
- The user must have some intro into what they are doing and some explanation of what is happening.
Given those requirements, I was able to settle on using https://www.pixijs.com/. it was simple enough that I could render a video on screen and other interactable elements.
After implementing a video I was able to overlay those interactive elements over the top of it to control the state of the video. So if the user hasn’t swiped away all of the distractions the video would remain paused until they have completed the task!
Finally, I had to overlay text at certain points within the video – this was as simple as the framework provided the ability to do so.
What were the key learnings?
Pixi js was super simple and fun to learn! It isn’t a ridiculously complicated one, so it was super easy to smash out a prototype like the above. It was great to dip my toe in the water with, but I think in the future, I would want to find a framework more advanced that would give me a lot more to work from. So if this comes up again down the line, I’d do further research into other more feature-rich libraries.
Were there any challenges?
The one big challenge that I had was getting the prototype to scale nicely between desktop and mobile. Everything in the interactive video is positioned relative to the size of the video, so that had to be calculated on each resize of the screen.
It was also super hard to come up with realistic distractions! I originally tried gifs of planes and birds but it looked a bit pants! We eventually settled on emojis, as emojis can be representative of SO much, (thoughts, feelings, emotions, communication) they worked well to also be distractions!
How can you use this within your role at 3 Sided Cube?
I could totally use this within my web role to develop more fun and adventurous websites that delight our users!
As always, it is so awesome to sit down with a fellow Cube and pick their brilliant brain! See you the next time one of us is innovatin’