Time for the latest and greatest to come out of Freeish Time! Just to refresh your memory, “Freeish Time” is the opportunity for our Cubes to focus on their passion projects and innovate outside of their work commitments.
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…
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!
I listed out some of the requirements I had for what I was building:
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.
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.
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!
I could totally use this within my web role to develop more fun and adventurous websites that delight our users!
Pixi js is great for anyone wanting to dip their toes into WebGL and HTML5 canvas manipulation!
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’
Published on January 29, 2021, last updated on March 31, 2021