Wat spelprogamma's betreft is De Mol toch ieder jaar weer een serieus kijkcijfer kanon.

En ook in ons AppFoundry team hebben we blijkbaar een paar serieuze fans zitten. Dit jaar zijn we dan ook de creatieve kant op gegaan.

Het begon met een ideetje van Senne voor team wedstrijdje 'wie raadt de mol 2022', waarna Sacha met plezier de uitdaging op zich nam om er een kick-ass ervaring van te maken. En we zouden geen user experience freaks zijn moesten we niet een beetje 'overboard' zijn gegaan.

Bij deze, de AppFoundry Moll Poll experience 👉 molpoll.appfoundry.be.

The game is on!

Hier vind je alvast wat technische uitleg om je op weg te helpen!

Next.js

Om snel aan de slag te gaan, hebben we een custom Next.js-template gebruikt dat is gebaseerd op het template dat werd gegenereerd door `create-next-app`, aangepast met een aantal opiniated linting rules voor onze common workflow.

https://nextjs.org/docs/api-reference/create-next-app

Three.js, WebGL & GLSL

Voor de 'particles' hebben we een combinatie van Three.js, WebGL en GLSL gebruikt.

Voor een minimalere getweakte versie hiervan zou je nog weg kunnen komen zonder GLSL te gebruiken. Als je echter een mooi aangepaste feel voor je 'particles' nodig hebt, dan ga je 'shaders' moeten gebruiken.

Wij gebruikten shaders om de deeltjes in te kleuren op basis van een afbeelding, maar ook om interactiviteit te creëren. Door de cursor over het canvas te bewegen, wordt een spoor op een onzichtbare vlakte getekend, dat we vervolgens in onze shaders gebruiken om de verplaatsing van deeltjes te berekenen.

Het leren van Three.js lijkt in eerste instantie misschien overweldigend wanneer dit je eerste contact met 3D is, maar er zijn gelukkige genoeg bronnen om je verder op weg te helpen.

Als je wil weten hoe je met 'particles' kan werken zonder de prestaties te verminderen, kijk dan eens naar `BufferGeometry` en `InstancedBufferGeometry`.

https://threejs.org/docs/#api/en/core/BufferGeometry

https://threejs.org/docs/#api/en/core/InstancedBufferGeometry

https://threejs.org/examples/?q=particl#webgl_buffergeometry_custom_attributes_particles

Tweening & timing

Om vloeiende overgangen tussen pagina's en statussen te creëren, gebruikten we een combinatie van aangepaste code & tweening voor GSAP.

https://greensock.com/gsap/

Veel plezier ermee!