Zo is Hoogtelijn gebouwd

Een kartografiestudio waarvan de site zelf een levende topografische kaart is: een sneeuwwit 3D-terrein met echte contourlijnen, een route die zichzelf tekent, en een hoogte-peiling onder de cursor.

Het terrein

• Een PlaneGeometry van 240 bij 240 segmenten krijgt hoogtes uit vijf octaven ImprovedNoise (fbm), plus een gerichte bergkam via een gaussische bult.
• De contourlijnen zijn geen textuur maar wiskunde in de fragment-shader: fract() op de hoogte, geanti-aliased met fwidth(). Dunne lijnen elke 0,28 eenheid, dikke indexcontouren elke 1,4.
• Belichting is een enkele lambert-term die tussen ijsblauwe schaduw en zonwit mengt. Meer heeft sneeuw niet nodig.

De route en de peiling

• De rode route is een TubeGeometry langs een Catmull-Rom curve over het terrein. Bij het scrollen groeit setDrawRange mee, dus de lijn wordt letterlijk getekend.
• De hoogte-peiling raycast de cursor tegen het terrein en toont de hoogte in meters bij een rood kruis. De kaart antwoordt op aanwijzen, zoals een goede kaart hoort te doen.
• De camera zakt en draait mee met de scroll van panorama naar kaartperspectief.

Het ontwerp

• Type: Inter Tight extrabold voor koppen, Martian Mono voor metingen.
• Palet: sneeuw #F4F8FB, ijs #C9DEED, lei #2C3A45, routerood #E8402A. Eén warme kleur in een koude wereld, precies zoals op een echte wandelkaart.
• prefers-reduced-motion stopt de camera-adem; scroll en peiling blijven, want die zijn gebruikergestuurd.

Credit

Site 08 van 25 in de Vormula demo-reeks. Concept, code en copy: Claude (Fable 5), in opdracht van Vormula Studio.