Een bol van 2000 lichtblauwe punten draait langzaam rond tegen een donkere achtergrond, met een fijn netwerk van lijnen ertussen. Op het oppervlak pulseren drie gekleurde markeringen: rood voor Nederland, geel voor Suriname en groen voor Engeland. Rechts staat een paneel met de naam van het gekozen land en een korte tekst. Het idee komt van de globe op anthropic.com.
De punten liggen op een Fibonacci-spiraal. Punt i krijgt zijn hoogte uit phi = acos(1 − 2(i + 0,5) / 2000) en schuift ten opzichte van het vorige punt een vaste hoek op, afgeleid van de gulden snede. Zo komen ze gelijkmatig over de bol te liggen. Alle punten samen zijn één THREE.Points-object met additieve menging, in de accentkleur van de site (#7fd8ff).
Voor het netwerk vergelijkt de code bij het laden elk punt met elk ander punt. Liggen twee punten dichter dan 0,5 bij elkaar, op een bol met straal 2,5, dan komt er een lijn tussen met een dekking van 15 procent. Bij 2000 punten zijn dat 1.999.000 vergelijkingen, die één keer worden uitgerekend; daarna draait alleen de groep nog rond. De gloed komt van een bloom-nabewerking (UnrealBloomPass) met sterkte 0,8. Die is lager gezet dan bij de 3D-WebGL-demo op erik.php, zodat de tekst in het paneel leesbaar blijft.
De markeringen staan op coördinaten: Nederland op 52,37 N en 4,90 O, Suriname op 5,85 N en 55,20 W, Engeland op 51,51 N en 0,13 W. Een kleine functie zet breedte- en lengtegraad om naar een punt op de bol. Elke markering is een sprite met een gloedtextuur die de code zelf tekent: een radiaal kleurverloop op een canvas van 64 bij 64 pixels. De markeringen worden telkens 15 procent groter en weer kleiner, elk met een eigen fase, zodat ze niet tegelijk kloppen.
Beweeg je de muis over een markering, dan zoekt een raycaster uit welke het is. De naam verschijnt naast de cursor, de markering groeit en de bol stopt met draaien zolang je erboven blijft. Klik je erop, of kies je onderin de tab NL, SR of EN, dan berekent de code de hoek van dat land rond de verticale as en draait GSAP de bol in anderhalve seconde naar voren. Tijdens die draai staat de muisbediening uit. In het paneel verdwijnt de oude tekst in 0,3 seconde, waarna naam, scheidingslijn en tekst kort na elkaar terugkomen. Anderhalve seconde na het laden kiest de pagina zelf Nederland.
Slepen draait de bol (OrbitControls, met demping); zoomen en verschuiven staan uit. Op een scherm tot 768 pixels breed staat de bol bovenaan op 40 procent van de schermhoogte, met het paneel eronder. De landen staan in één lijst in de code, en de markeringen en tabs worden daaruit opgebouwd: een land toevoegen is een extra item met coördinaten, kleur en tekst. De teksten bij de landen zijn Nederlands. Alles staat in één PHP-bestand; Three.js 0.160 en GSAP 3.12.5 komen via een importmap van jsDelivr.
De punten liggen op een Fibonacci-spiraal. Punt i krijgt zijn hoogte uit phi = acos(1 − 2(i + 0,5) / 2000) en schuift ten opzichte van het vorige punt een vaste hoek op, afgeleid van de gulden snede. Zo komen ze gelijkmatig over de bol te liggen. Alle punten samen zijn één THREE.Points-object met additieve menging, in de accentkleur van de site (#7fd8ff).
Voor het netwerk vergelijkt de code bij het laden elk punt met elk ander punt. Liggen twee punten dichter dan 0,5 bij elkaar, op een bol met straal 2,5, dan komt er een lijn tussen met een dekking van 15 procent. Bij 2000 punten zijn dat 1.999.000 vergelijkingen, die één keer worden uitgerekend; daarna draait alleen de groep nog rond. De gloed komt van een bloom-nabewerking (UnrealBloomPass) met sterkte 0,8. Die is lager gezet dan bij de 3D-WebGL-demo op erik.php, zodat de tekst in het paneel leesbaar blijft.
De markeringen staan op coördinaten: Nederland op 52,37 N en 4,90 O, Suriname op 5,85 N en 55,20 W, Engeland op 51,51 N en 0,13 W. Een kleine functie zet breedte- en lengtegraad om naar een punt op de bol. Elke markering is een sprite met een gloedtextuur die de code zelf tekent: een radiaal kleurverloop op een canvas van 64 bij 64 pixels. De markeringen worden telkens 15 procent groter en weer kleiner, elk met een eigen fase, zodat ze niet tegelijk kloppen.
Beweeg je de muis over een markering, dan zoekt een raycaster uit welke het is. De naam verschijnt naast de cursor, de markering groeit en de bol stopt met draaien zolang je erboven blijft. Klik je erop, of kies je onderin de tab NL, SR of EN, dan berekent de code de hoek van dat land rond de verticale as en draait GSAP de bol in anderhalve seconde naar voren. Tijdens die draai staat de muisbediening uit. In het paneel verdwijnt de oude tekst in 0,3 seconde, waarna naam, scheidingslijn en tekst kort na elkaar terugkomen. Anderhalve seconde na het laden kiest de pagina zelf Nederland.
Slepen draait de bol (OrbitControls, met demping); zoomen en verschuiven staan uit. Op een scherm tot 768 pixels breed staat de bol bovenaan op 40 procent van de schermhoogte, met het paneel eronder. De landen staan in één lijst in de code, en de markeringen en tabs worden daaruit opgebouwd: een land toevoegen is een extra item met coördinaten, kleur en tekst. De teksten bij de landen zijn Nederlands. Alles staat in één PHP-bestand; Three.js 0.160 en GSAP 3.12.5 komen via een importmap van jsDelivr.
Meer werk
Interactieve 3D WebGL Experience
3D-WebGL-werk met geanimeerde chroomletters, een neon-grid en sterren op warpsnelheid. Beweeg je muis om de camera mee te laten bewegen.
Interactieve DOS Experience
Een MS-DOS-simulatie met CRT-effecten en commando's als DIR, CD en TYPE. CAROUSEL.EXE laat ASCII-blokken over het scherm vliegen en opent een 3D-carrousel.
Lethwei: Blood & Honor
Een 2D-vechtgame in de browser over Lethwei, het Birmese vechten met vuisten, ellebogen, knieën, trappen en het hoofd. Vier vechters, twee arena's.