If you don’t know what “DevFest” is, it’s a worldwide event lead by the GDG community. You can have a look here DevFest With Google.
Each year we work very hard to provide the best experience for our attendees. We try to make DevFest Nantes the most accessible (only 90€ for 2 days with food, goodies, party, conference, …). And one of the things I’m responsible for is the Countdown! Indeed, if you already go to Google I/O, you know that when you are waiting for the launch of the keynote, Google prepares a nice Countdown animation to let you play with the other attendees! We love so much this experience that we tried to create ours to keep that spirit. In this article, I will try to share those countdown and try to explain to you what I’ve learned with each of them.
Before I started to write my own Countdown, I first reused a public countdown created for Google IO 2011: HTML5 Countdown Finale. It works pretty well but it was not linked to our graphical Theme. That’s why I started in 2014 to create my own countdown
Before starting to think about “Interactivity” I had to take time to check that everything works well! That’s also our mantra in DevFest Nantes, always build better over something strong! So for the first Countdown, I started following the KISS approach: No Framework, No modules, just a simple HTML with a little bit of CSS.
The basic idea of this Countdown was to animate the DevFest Nantes t-shirt.
This project allowed me to think about the mandatory steps of Countdown :
- Play music until the countdown is over
- Launching a video when the countdown is over
Behind this 2 steps is hidden a basic complexity. How to check the current time without blocking the UI? How to play both music and video?
For the first year, I didn’t use the best solution: setInterval but it’s something that won’t block the UI! Today, I prefer to use requestAnimationFrame. Indeed, one of the most important points is is to avoid blocking the event loop.
Playing a song
For the second problem, even if there is a Web Audio API a simple <audio> tag hidden in the page does the job very well! In 2014, there wasn’t the restriction of autoplay policy so I could easily play a sound with this code :
The only challenge I faced was with the CSS. To play with the good text transformation. So for this HTML:
You will have this CSS:
This gives you this result
And the last thing to do was to animate the text at the bottom of the tower. I used the marquee tag because it’s targeted to animate text in a box! Here, the problem comes to the fact that I have 2 faces in my tower and I want to give the impression that the text “slides” around the tower. To create this effect, I had to use 2 marquee and play a timeout that corresponded to the duration of the move of the text.
Here is the result :
As you can see, there are lots of things to enhance. But it does the job, a unique countdown linked to DevFest Nantes identity!
Code & demo
You can find the code here: CountDown DevFest 2014.
If you want to see it in action, have a look here CountDown 2014
In 2015, the DevFest Theme was the retroGaming. So again, the countdown was inspired again by the t-shirt :
The idea was to simulate a real “Space Invaders”. As the t-shirt shows a space invader destroying Google technologies logos. I tried to animate the spaceship in order to destroy the last logo at the last second.
Or have a look at this conference from Jake Archibald about event loop:
When you want to deal with resources in video games, it’s recommended to use ‘sprite’ image. ‘Sprites’ let you download all resources in one time. As HTTP2 is not present everywhere. It’s better to download 1 file than several. The browser cannot open more than 6 (for chrome) separated threads for download, so favor the one big cookie download.
When you deal with ‘sprites’ images, you have to position your cursor when you draw. With this technique, you will minimize the number of assets loaded in memory and gain time on your first load.
The main idea is to position your cursor and draw it your context:
In my case, I created a map to have a reference for each logo in the sprite. This map allowed me animate each logo and keep a reference of its original position in the sprite :
Using a key will let me have a reference of each sprite.
Animate the matrix
What I will display on the screen is a grid of 3 rows of 8 logos. Each logo will have a position in the grid and will move between at maximum from 4 steps in the x axis and 1 step in the y axis.
So to play with the grid, I kept a reference of all the logos in a matrix.
A good practice is to separate the data processing and the data rendering!
In my case, I just want to render a snapshot of the grid. So when I start the initialization the countdown, I start several setInterval. Each one has its purpose and will separate the different logics.
As you can see, runAnimation is the only method that renders something on the screen and that’s very important because, I don’t have to do complex calculation, or complex code! In this method, I’m just focused on the rendering.
The destruction of a logo
One of the challenges was to be sure that all logos would be destroyed at the end of the countdown. I tried to make this as automatic as I can. The first thing that is done when the countdown starts is to calculate a few elements :
- The interval between each destruction : (Now — Final time) / Number of logos
- The maximum duration in which a spaceship will be under the current logo
- A random order of destruction that will construct a dynamic stack of destructions orders (one row at a time).
All those calculations let me have a dynamic countdown that will destroy everything at the right time!
Code & Demo
You can find the code here: CountDown DevFest 2015.
If you want to see it in action, have a look here CountDown 2015