No Planet B
Op zoek naar een nieuwe planeet. De opties vielen tegen.
Wanneer het leven op aarde steeds ingewikkelder wordt, klinkt een nieuwe planeet bijna als een oplossing.
Tot je kijkt wat de opties zijn.
Voor No Planet B maakte ik een interactieve reis door het zonnestelsel. Onderweg ontdekt de bezoeker hoelang een mens op iedere planeet zonder ruimtepak zou overleven.
Soms gaat het om minuten.
Meestal een stuk minder.
Eerst maar eens vertrekken
De opdracht was om bewustwording te creëren rond een zelfgekozen maatschappelijk onderwerp. Mijn keuze viel op klimaatverandering.
Klimaatverandering wordt vaak verbeeld met smeltende ijskappen, rokende schoorstenen en grafieken met lijnen die liever niet die kant op hadden moeten gaan.
Ik zocht daarom naar een andere ingang.
Ruimtevaart wordt meestal verbonden aan vooruitgang. Nieuwe werelden, nieuwe mogelijkheden en misschien ooit een nieuw thuis. Maar hoe aantrekkelijk blijven die mogelijkheden wanneer je ziet wat er op de planeten om ons heen werkelijk op je wacht?
Dat contrast werd het vertrekpunt.
Hoe maak je een ervaring over klimaatverandering die wél blijft hangen, zonder weer uit te komen bij een grafiek of waarschuwende tekst die iedereen al honderd keer heeft gezien?
De bezoeker begint met het idee dat er misschien ergens een alternatief te vinden is. Bij iedere tussenstop wordt die hoop iets minder realistisch.
Wat begint als een zoektocht naar een andere planeet, verandert langzaam in een argument voor deze.
De raket maakte van scrollen een reis
De website mocht niet voelen als een lange pagina waarop toevallig een aantal planeten onder elkaar stonden.
De bezoeker moest het gevoel krijgen daadwerkelijk ergens naartoe te gaan.
Daarom reist een 3D-raket mee door de website. Tijdens het scrollen draait hij om zijn as, verandert hij van richting en beweegt hij verder de ruimte in. De scrollbeweging bepaalt het tempo van de reis.
Daardoor wordt scrollen niet alleen een manier om informatie te bekijken, maar de handeling waarmee de bezoeker zich door het verhaal beweegt.
De planeten voelen zo minder als losse secties en meer als tussenstops binnen dezelfde route. De raket zorgt voor continuïteit, ook wanneer de inhoud en omgeving onderweg veranderen.
Ik maakte het model in Blender. Met Three.js en GSAP koppelde ik de positie en rotatie aan de voortgang door de website.
Iedere tussenstop stelde dezelfde ongemakkelijke vraag
Bij iedere planeet krijgt de bezoeker antwoord op één vraag:
Hoelang houd je het hier zonder ruimtepak vol?
De planeten zijn interactieve 3D-objecten die kunnen worden vastgepakt en gedraaid. Bij een klik opent een detailweergave met de afstand tot de aarde, de verwachte overlevingstijd en uitleg over de omstandigheden.
De oorzaak verschilt per planeet: hitte, kou, luchtdruk, giftige gassen of simpelweg het ontbreken van vaste grond.
Die informatie staat bij iedere planeet op dezelfde plek.
Daardoor hoeft de bezoeker niet bij iedere bestemming opnieuw te ontdekken hoe de interface werkt. De bediening vraagt na de eerste planeet minder aandacht, waardoor er meer ruimte overblijft voor wat er inhoudelijk verandert.
Dat verlaagt ook weer de cognitieve belasting.
De structuur blijft vertrouwd.
Het antwoord wordt alleen nergens geruststellender.
Een getal komt niet altijd binnen
Een getal kan extreem zijn zonder dat het ook direct extreem voelt.
Daarom maakte ik voor drie planeten, eigenlijk twee planeten en een ster, korte Blender animaties waarin zichtbaar wordt wat de omstandigheden met een mens zouden doen.
Voor het personage gebruikte ik een bestaand 3D-model, dat ik vervolgens zelf animeerde.
De animaties vertalen abstracte waarden naar een zichtbaar gevolg. De bezoeker hoeft niet alleen te bedenken wat extreme druk, temperatuur of zwaartekracht betekent, maar ziet het gebeuren.
Dat maakt de informatie concreter en moeilijker om op afstand te houden.
Een overlevingstijd van 0,075 seconde zegt eigenlijk al genoeg.
Zien wat dat betekent, komt toch iets harder aan.
De planeten lieten zich ook horen
Tijdens het draaien krijgt iedere planeet een eigen geluid.
Grote planeten hebben een lagere basisfrequentie. Kleinere planeten klinken hoger.
Die koppeling voelt vrij natuurlijk. Lage tonen worden vaak geassocieerd met iets groots en zwaars terwijl hogere tonen eerder klein en licht aanvoelen. Daardoor wordt het verschil in schaal niet alleen uitgelegd, maar ook hoorbaar gemaakt.
Ook de beweging van de bezoeker beïnvloedt het geluid. Hoe sneller een planeet wordt gedraaid, hoe hoger en luider de toon wordt.
De interactie geeft direct feedback via de planeet zelf.
Zelfs de letters stonden niet stabiel
Voor de website ontwierp ik een eigen 'wobbly font'.
De letters staan scheef, verschillen onderling en lijken voortdurend een beetje uit balans.
Dat verwijst direct naar het onderwerp. Een klimaat dat steeds instabieler wordt.
De typografie vertelt daardoor niet alleen het verhaal. De vorm gedraagt zich er ook naar.
Het lettertype is bewust onrustig, maar moest wel leesbaar blijven. De instabiliteit zit daarom vooral in de vorm van de letters en niet in voortdurend bewegende tekst.
Klimaatverandering is al lastig genoeg zonder dat je alle tekst ook nog moet ontcijferen.
Een zonnestelsel bouwen in je browser
Voor de interactieve 3D-elementen werkte ik met Three.js.
Iedere planeet heeft een eigen scene, texture en canvas. Met raycasting controleert de website of de bezoeker daadwerkelijk een planeet vastpakt. De beweging van de pointer wordt daarna vertaald naar rotatie.
Via de Web Audio API stuurt diezelfde beweging ook de toonhoogte en het volume aan. Eén interactie beïnvloedt dus zowel wat iemand ziet als wat die hoort.
De raket is een apart 3D-onderdeel. Een GSAP-tijdlijn koppelt zijn positie en rotatie aan de scroll, zodat hij tijdens de reis dichterbij komt, van richting verandert en tussen de planeten door beweegt.
Ook de detailweergaven, fullscreen Blender animaties, sterren en audio zijn als losse systemen opgebouwd.
De uitlaat van de raket bestaat uit afzonderlijke vuur- en rookparticles. Hun positie, schaal en transparantie veranderen voortdurend, waardoor de beweging niet iedere keer exact hetzelfde is.
Technisch hebben al die onderdelen hun eigen taak. Voor de bezoeker moesten ze vooral aanvoelen als één doorlopende reis.
Techniek
Three.js · GSAP · Web Audio API · Blender · JavaScript · HTML · CSS
De zoektocht eindigde waar hij begon
Hoe verder de reis gaat, hoe duidelijker het wordt dat er geen bruikbaar alternatief voorbij gaat komen.
Aan het einde stort de raket neer.
Geen succesvolle landing.
Geen tweede aarde.
Alleen de boodschap waar de hele ervaring naartoe heeft gewerkt:
There is no place like Earth. And there is no Planet B.
Vanaf het eindscherm kan de bezoeker terugkeren naar de aarde en de reis opnieuw beginnen.
De website eindigt daarmee precies waar hij begon.
Thuis.
Van alle bestemmingen die voorbijkomen, is er maar één waarop we zonder ruimtepak langer dan een paar minuten volhouden.
Misschien moeten we daar iets zuiniger op zijn.