Champions Chess Tour Logogenerator
Together with Schjærven Reklamebyrå, we developed a logo generator for Play Magnus and Chess24's new online initiative - Champions Chess Tour.
Schjærven developed the visual concept for the Champions Chess Tour in 2020. Central to the visual profile was the idea that the logo should be a visual representation of a specific chess game, capturing the drama move by move and forming a unique visual pattern. The logo consists of an 8x8 grid representing the chessboard, with the moves drawn in their actual positions. Through gradients, a sense of direction is created, and over time, old moves gradually fade out to give a sense of progression.
The designers at Schjærven had already created a sketch of the logo, but manually placing all the moves in Adobe Illustrator was time-consuming. In addition, there was a need for animated versions for use on the web, in films, and in TV broadcasts.
Technology
- Vue
- GSAP
- ffmpeg
- Slim
- Netlify
Generators
Fortunately, chess players are nerds too! 🤓 Already in 1993, a file format was created to represent a chess game, Portable Game Notation (PGN). Along with chess.js, an opensource JavaScript library for reading and validating chess moves, we quickly had an engine to play through the moves in a chess game.
The next (and biggest) challenge was to recreate the visual expression that Schjærven had created in a way that allowed us to both extract a still image from a given move, and an animation showing all or parts of a game. We decided to draw the moves on a canvas element and use GSAP to build timelines for the different moves and the game as a whole. This made it possible to generate bitmap versions of the logo up to 32767x32767 pixels from any point in the game. 😲
We wrapped it all in a Vue application to control all the different parameters in the engine. With the help of the application, designers at Schjærven and Chess24 can easily and enjoyably experiment their way to final logo versions for the different games.
Export
A key requirement for the delivery was the ability to export both still images and videos of the logos for use in printed media, commercials, TV broadcasts, and integrated on the web.
While still images practically created themselves (canvas.toDataURL() 🎉), we had to build a separate server application to assemble the videos. We settled on using the micro-framework Slim as a lightweight and efficient layer over ffmpeg, which handled the heavy lifting. This made it possible to export the finished films in optimized formats such as MP4/h264 for direct use on the web, and in high-quality formats like Prores 4444 for further productions.
Finally, we facilitated the embedding of a logo animation directly on a webpage using a simple embed code.
The Tournament
The Champions Chess Tour gathered the entire world elite in chess in its first season. With five million hours watched and 19.5 million live views, it became the most-watched online chess tournament of all time. Additionally, the tournament was broadcasted on countless TV stations and promoted in various media.
During the European Design Awards 2021, the project won gold in the categories "Motion Logo" and "Digital Miscellaneous". 🥳
