Champions Chess Tour Logogenerator
Sammen med Schjærven Reklamebyrå utviklet vi en logogenerator for Play Magnus og Chess24 sin nye online-satsning – Champions Chess Tour.
Schjærven Reklamebyrå utviklet i 2020 det visuelle konseptet for Champions Chess Tour. Sentralt i den visuelle profilen var idéen om at logoen skulle være en visuell gjengivelse av et spesifikt sjakkparti, som fanget dramatikken i spillet trekk for trekk, og dannet et unikt visuelt mønster. Logoen består av et 8x8 rutenett som representerer sjakkbrettet, hvor trekkene tegnes inn på sine faktiske posisjoner. Ved hjelp av forløpninger får man en følelse av retning, og over tid viskes gamle trekk gradvis ut slik at man får en følelse av progresjon.
Designerne hos Schjærven hadde allerede laget en skisse på logoen, men prosessen med å sette alle trekkene manuelt i Adobe Illustrator var tidkrevende. I tillegg var det behov for animerte versjoner til bruk på nett, film og TV-sendinger.
Teknologi
- Vue
- GSAP
- ffmpeg
- Slim
- Netlify
![](https://vrsgdweb.imgix.net/images/projects/cct-thumb.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=600&s=c9646e13581c5895548c911e43d322d8 600w, https://vrsgdweb.imgix.net/images/projects/cct-thumb.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=800&s=942a2dc5f5c16ddf6070fb1c25ca500e 800w, https://vrsgdweb.imgix.net/images/projects/cct-thumb.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1000&s=bf6f41500aaa342e9b36a90418d3f09c 1000w, https://vrsgdweb.imgix.net/images/projects/cct-thumb.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1200&s=3e271631e10a54f8af5def81aa2c72d5 1200w, https://vrsgdweb.imgix.net/images/projects/cct-thumb.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1400&s=f84cd42a5f0b2986b106620ba64a22f3 1400w, https://vrsgdweb.imgix.net/images/projects/cct-thumb.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1600&s=eb5448d776154569c1c1f405de62d9a1 1600w, https://vrsgdweb.imgix.net/images/projects/cct-thumb.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1800&s=0e61e28ddc8b15bf75fe55be8a4a8bb3 1800w)
Generatoren
Heldigvis er også sjakkspillere nerder! 🤓 Allerede i 1993 ble det laget et filformat for å representere et sjakkparti, Portable Game Notation (PGN). Sammen med chess.js, et åpent Javascript-bibliotek for å lese og validere sjakktrekk, hadde vi ganske raskt en motor for å spille gjennom trekkene i et sjakkparti.
Den neste (og største) utfordringen, var å gjenskape det visuelle uttrykket som Schjærven hadde skapt, på en måte som gjorde at vi både kunne hente ut et stillbilde fra et gitt trekk, og en animasjon som viser hele eller deler av et parti. Vi landet på å tegne ut trekkene på et canvas-element, og bruke GSAP til å bygge tidslinjer for de ulike trekkene, og partiet som helhet. Dette gjorde det mulig å generere bitmap-versjoner av logoen helt opp til 32767x32767 pixels, fra et hvilket som helst punkt i partiet. 😲
Rundt det hele bygget vi en Vue-applikasjon for å styre alle de ulike parametrene i motoren. Ved hjelp av applikasjonen kan designerne hos Schjærven og Chess24 på en enkel og morsom måte eksperimentere seg frem til endelige logo-versjoner for de ulike partiene.
![](https://vrsgdproxy.imgix.net/https%3A%2F%2Fimage.mux.com%2FLww01m01P2Wdz3E6Al1yv8zrjMvC00Z2V01EO97DTQDOsxw%2Fthumbnail.jpg%3Ftime%3D0%26fit_mode%3Dpreserve?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=600&s=ffd52c8660430dd6bb22652a24d8fea0 600w, https://vrsgdproxy.imgix.net/https%3A%2F%2Fimage.mux.com%2FLww01m01P2Wdz3E6Al1yv8zrjMvC00Z2V01EO97DTQDOsxw%2Fthumbnail.jpg%3Ftime%3D0%26fit_mode%3Dpreserve?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=800&s=d9b82e1fb936f59cbf28219fdd8263ca 800w, https://vrsgdproxy.imgix.net/https%3A%2F%2Fimage.mux.com%2FLww01m01P2Wdz3E6Al1yv8zrjMvC00Z2V01EO97DTQDOsxw%2Fthumbnail.jpg%3Ftime%3D0%26fit_mode%3Dpreserve?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1000&s=64d63d2878c2259f665658eb9ce81382 1000w, https://vrsgdproxy.imgix.net/https%3A%2F%2Fimage.mux.com%2FLww01m01P2Wdz3E6Al1yv8zrjMvC00Z2V01EO97DTQDOsxw%2Fthumbnail.jpg%3Ftime%3D0%26fit_mode%3Dpreserve?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1200&s=2b53358ca5475cbd4fe4ba1875d7f652 1200w, https://vrsgdproxy.imgix.net/https%3A%2F%2Fimage.mux.com%2FLww01m01P2Wdz3E6Al1yv8zrjMvC00Z2V01EO97DTQDOsxw%2Fthumbnail.jpg%3Ftime%3D0%26fit_mode%3Dpreserve?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1400&s=f85bc6b6db01119b6c1337a5209a7944 1400w, https://vrsgdproxy.imgix.net/https%3A%2F%2Fimage.mux.com%2FLww01m01P2Wdz3E6Al1yv8zrjMvC00Z2V01EO97DTQDOsxw%2Fthumbnail.jpg%3Ftime%3D0%26fit_mode%3Dpreserve?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1600&s=96d01d7cf3e686ecc42de3feb4ac40fd 1600w, https://vrsgdproxy.imgix.net/https%3A%2F%2Fimage.mux.com%2FLww01m01P2Wdz3E6Al1yv8zrjMvC00Z2V01EO97DTQDOsxw%2Fthumbnail.jpg%3Ftime%3D0%26fit_mode%3Dpreserve?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1800&s=eb8ea93fe6a576459561c9d9207e39a4 1800w)
Eksport
Et viktig krav til leveransen var muligheten for eksport av både stillbilder og videoer av logoene, til bruk i trykte medier, reklamefilmer og TV-sendinger, og integrert på nett.
Mens stillbilder praktisk talt laget seg selv (canvas.toDataURL() 🎉), måtte vi bygge en egen serverapplikasjon for å sette sammen videoene. Vi landet på å bruke mikro-rammeverket Slim som et tynt og effektivt lag over ffmpeg, som gjorde de tunge løftene. Dette gjorde det mulig å eksportere de ferdige filmene både i optimaliserte formater som MP4/h264 for bruk direkte på nett, og i høykvalitetsformater som Prores 4444 til bruk i videre produksjoner.
Til sist tilrettela vi for at en logo-animasjon kan embeddes direkte i en nettside vha en enkel embed-kode.
![](https://vrsgdproxy.imgix.net/https%3A%2F%2Fimage.mux.com%2FWMTB9FXRD00IsGd3hcCuC2WUy6ScIMuyDa5igX02dH93Y%2Fthumbnail.jpg%3Ftime%3D0%26fit_mode%3Dpreserve?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=600&s=8ea0f78d68a12c97d1f9ac5042fcc42a 600w, https://vrsgdproxy.imgix.net/https%3A%2F%2Fimage.mux.com%2FWMTB9FXRD00IsGd3hcCuC2WUy6ScIMuyDa5igX02dH93Y%2Fthumbnail.jpg%3Ftime%3D0%26fit_mode%3Dpreserve?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=800&s=eecc8960dff39fbc5936fd6ad653f062 800w, https://vrsgdproxy.imgix.net/https%3A%2F%2Fimage.mux.com%2FWMTB9FXRD00IsGd3hcCuC2WUy6ScIMuyDa5igX02dH93Y%2Fthumbnail.jpg%3Ftime%3D0%26fit_mode%3Dpreserve?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1000&s=04aad78c3f814d4bfbd4273ac664c8a1 1000w, https://vrsgdproxy.imgix.net/https%3A%2F%2Fimage.mux.com%2FWMTB9FXRD00IsGd3hcCuC2WUy6ScIMuyDa5igX02dH93Y%2Fthumbnail.jpg%3Ftime%3D0%26fit_mode%3Dpreserve?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1200&s=a1f423208fb2e7979932d3f39b4cd962 1200w, https://vrsgdproxy.imgix.net/https%3A%2F%2Fimage.mux.com%2FWMTB9FXRD00IsGd3hcCuC2WUy6ScIMuyDa5igX02dH93Y%2Fthumbnail.jpg%3Ftime%3D0%26fit_mode%3Dpreserve?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1400&s=2d486655e1a2e46ecb4c449beba96ba7 1400w, https://vrsgdproxy.imgix.net/https%3A%2F%2Fimage.mux.com%2FWMTB9FXRD00IsGd3hcCuC2WUy6ScIMuyDa5igX02dH93Y%2Fthumbnail.jpg%3Ftime%3D0%26fit_mode%3Dpreserve?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1600&s=56a28c56f202c9345e2d684fae5e99c2 1600w, https://vrsgdproxy.imgix.net/https%3A%2F%2Fimage.mux.com%2FWMTB9FXRD00IsGd3hcCuC2WUy6ScIMuyDa5igX02dH93Y%2Fthumbnail.jpg%3Ftime%3D0%26fit_mode%3Dpreserve?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1800&s=46ecdae0000cc173e81a99c1a8160d3e 1800w)
Turneringen
Champions Chess Tour samlet hele verdenseliten i sjakk i sin første sesong. Med fem millioner timer sett, og 19,5 millioner live views, ble den tidenes mest sette online-turnering i sjakk. I tillegg ble turneringen sendt på utallige TV-stasjoner, og promotert i ulike medier.
Under European Design Awards 2021 vant prosjektet gull i kategoriene "Motion Logo" og "Digital Miscellaneous". 🥳
![](https://vrsgdweb.imgix.net/images/projects/cct/635b8e5fda088a8bfa19e308_ChampionsChessTour_billboard-1_51625850f4fa83f32ffd3bda70c1f3a6.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=600&s=1643ce0c0614aa9c1781597941419b28 600w, https://vrsgdweb.imgix.net/images/projects/cct/635b8e5fda088a8bfa19e308_ChampionsChessTour_billboard-1_51625850f4fa83f32ffd3bda70c1f3a6.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=800&s=de0b06cd3eb3a6c0888de898c22b5f9c 800w, https://vrsgdweb.imgix.net/images/projects/cct/635b8e5fda088a8bfa19e308_ChampionsChessTour_billboard-1_51625850f4fa83f32ffd3bda70c1f3a6.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1000&s=db46cf46b206783430000b0cf4553ebe 1000w, https://vrsgdweb.imgix.net/images/projects/cct/635b8e5fda088a8bfa19e308_ChampionsChessTour_billboard-1_51625850f4fa83f32ffd3bda70c1f3a6.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1200&s=c334a95d089f7124e614f13d5070957a 1200w, https://vrsgdweb.imgix.net/images/projects/cct/635b8e5fda088a8bfa19e308_ChampionsChessTour_billboard-1_51625850f4fa83f32ffd3bda70c1f3a6.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1400&s=f8301121aa3f824f1082d3e08d9a9988 1400w, https://vrsgdweb.imgix.net/images/projects/cct/635b8e5fda088a8bfa19e308_ChampionsChessTour_billboard-1_51625850f4fa83f32ffd3bda70c1f3a6.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1600&s=3e4b76783f404bcac23a9699a4406ede 1600w, https://vrsgdweb.imgix.net/images/projects/cct/635b8e5fda088a8bfa19e308_ChampionsChessTour_billboard-1_51625850f4fa83f32ffd3bda70c1f3a6.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1800&s=392a10da8d6ef6f3df1ff83febc5b547 1800w)
![](https://vrsgdweb.imgix.net/images/projects/cct/cct-tournament-logos.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=600&s=da0388de23e99ea257693f357dbdecb5 600w, https://vrsgdweb.imgix.net/images/projects/cct/cct-tournament-logos.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=800&s=11aa9c26b53063a5e288c2dc0c394625 800w, https://vrsgdweb.imgix.net/images/projects/cct/cct-tournament-logos.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1000&s=817fa3a831dfde38493478c088176963 1000w, https://vrsgdweb.imgix.net/images/projects/cct/cct-tournament-logos.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1200&s=249b325fb071a41b73e00785a84071a8 1200w, https://vrsgdweb.imgix.net/images/projects/cct/cct-tournament-logos.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1400&s=1f39a034741d06fbc0a53da687d1c5c4 1400w, https://vrsgdweb.imgix.net/images/projects/cct/cct-tournament-logos.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1600&s=f3fb772f07a0f64e11897850f6432a16 1600w, https://vrsgdweb.imgix.net/images/projects/cct/cct-tournament-logos.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1800&s=6749ec0647633029ac367757b16917d2 1800w)