All Blog Posts

Freeish Time: Interactive Video

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.

Innovation

Freeish time blog

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?

I have always been so interested in what the web can do, and I’m always seeing epic stuff online for games and interactive websites that are just so cool! Something that springs to mind is at a JavaScript conference years ago, I was given a business card with a QR code and when you scanned it, it went to her website and had a 3D avatar of her holding her business card on the page. It was such an ingenious, interactive way to play with virtual reality. I like the idea that this was something completely different on the web, you don’t have to stick to just standard words on a page. The inspiration was to look at how we can use the web to create an interactive video.

There are tonnes of cool technologies that would allow us to do this! 

For example:

https://threejs.org/ 

https://www.pixijs.com/ 

https://phaserjs.com/ 

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

To start with I specified out what the actual requirements were, this allowed me to pick an appropriate javascript framework to manipulate a video.

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!

Pixi js is great for anyone wanting to dip their toes into WebGL and HTML5 canvas manipulation!

Kevin Borrill

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 January 29, 2021

Give us the seal of approval!

Like what you read? Let us know.

1

Tags