Skriuwen · 11 aug 2025
Willemstagram
3D-klapperboerd mei foto's dat ferhalen fertelt
Ferline wike siet ik mei in klant te sjen nei de nije thússide fan willem.com, dêr't ik in ferhaal brûk om te fertellen oer wat ik doch. Dizze klant is ien fan de bêste fisionêre kreative tinkers, en dochs like myn tekst him net oan te sprekken. Dêr oer neitinkend tocht ik oan in wichtige les út de psychology fan de universiteit: ik hie wat oars nedich, wat net-lineêrs, en dit berjocht giet oer in fisuele klap!
Links tsjin rjochts tinke
Ien fan de moaie dingen oan myn oplieding oan de Universiteit fan Amsterdam wie dat wy lessen krigen fan ferskate fakulteiten, wat in nijsgjirrige mingeling fan ynterdissiplinêre wittenskip opsmiet. Ien klassyk boek dat wy behannelen wie "Mintzberg on Management", dêr't de skriuwer yn útleit wêrom't ferskillende minsken ferskillende dingen leaver hawwe, de klassike tsjinstelling dy't faak ferienfâldige wurdt ta tinkers fan de linker en fan de rjochter harsenhelte:
- De lineêre tinker (de linker harsenhelte): Dit is de natuerlike steat fan minsken dy't in logysk ferhaal wurdearje dat opbout fan A nei B nei C. Typyske minsken hjirfoar binne ferhaleferstellers, arsjitekten en programmeurs.
- De net-lineêre tinker (de rjochter harsenhelte): Dit is de steat fan minsken dy't gjin rjochte line folgje. Se sykje nei yndrukken, sfear en emosjonele ynkear. Typyske minsken hjirfoar binne kreative minsken, ûnder oaren keunstners en fisionêre tinkers.
Myn nije thússide fan willem.com wurke goed foar lineêre tinkers lykas ik, it op tekst basearre ferhaal past by de linker harsenhelte. Mar myn ûntwerp makke it dreech foar minsken dy't it bêste fiere op net-lineêre, sfearfolle yndrukken. Ik hie wat nedich dat de protte bylden op in rike en dynamyske wize sjen lit, libbjend en mei in sûne dosis ynteraktyf nocht.
Solari Board
In soad jierren lyn learde ik myn frou kennen op Utrecht Centraal, krekt ûnder it gigantyske fertrekynformaasjebord. It byldbepalende blauwe ynfobord fan 7x4.20M, dat sa'n 3000 kilo weage, hie meganyske klapperpanielen dy't in werkenber lûd makken dat do sawat elke minút yn de sintrale hal fan it stasjon hearde. Dit soarte boerd wurdt faak in "Solari Board" neamd, nei Solari di Udine, it Italjaanske bedriuw dat dizze ikoanen makke. Tsjintwurdich hat it stasjon fan Utrecht digitale ynfoskermen, mar as do wolst, kinst do it noch altyd sjen yn Het Spoorwegmuseum.
As metafoar-leafhawwer (boektip: Metaphors we live by) tocht ik dat it Solari Board, mei syn "klapperjen", in prachtige manier wêze soe om besikers fan willem.com nei ferskate "bestimmingen" (de ferhalen) op de side te "ferstjoeren". Yn stee fan tekst keas ik der mei opsetsin foar om de foto's en bylden út de blogberjochten te brûken as poarten nei de seksje ynsichten op willem.com. Troch op goed lok nije bestimmingen te toanen is dit perfekt net-lineêr, en troch it ynteraktyf te meitsjen (klikber en oanrekber) is it boeiender as platte tekst. Elke bestimming docht in "kaartsje" iepen dat in bytsje útleit wat it is dat do sjochst. As it dy oanstiet, kinst do op de grutte knop drukke om it ferhaal krekt op de plak fan it byld iepen te dwaan, dat kin healwei in blogberjocht wêze. Ferhalen iepenje yn nije browserfinsters, sadat do werom kinst nei it "stasjon" om in nije bestimming te finen.
Ymplemintaasje: ThreeJS en in eigen byld-API
Earder eksperimintearre ik mei de 3D-grafyske motor ThreeJS om trainingsgegevens te fisualisearjen. It is in bibleteek dy't it HTML5-standertelemint canvas brûkt om grafiken út te jaan dy't makke binne mei romtlike berekkening, in moai wurd foar dat do dingen yn trije diminsjes (x, y, z) tekenje kinst yn stee fan twa, fandêr de namme. It hat kamera-, ljocht- en mistbestjoering en is makke foar animaasjes op basis fan simulearre posysje en rotaasje. It is hiel moai om mei te boartsjen en behoarlik machtich. Sjoch dizze twa eardere berjochten oer myn eksperiminten mei ThreeJS:
De minimalist yn my tocht koart oan CSS-animaasjes, transformaasjes en oergongen. Mar ik tocht dat it realistyske perspektyf, dêr't de bûtenste panielen mear skean draaie, en it tafal by it kiezen fan nije bylden my dochs JavaScript brûke litte soene. Om de wearde te maksimalisearjen woe ik it direkt yn myn thússide yntegrearje. Mar in folsleine 3D-motor lade is neat om licht oer te tinken. Om de gefolgen foar de laadtiid fan de thússide minimaal te hâlden, ûntwurp ik it ding mei soarch asynchroan en folslein opsjoneel (foar minsken mei JS útskeakele).
Om it "Visual Journal" te fieden ûntwurp ik in eigen API dy't tige optimalisearre bylden op 400x400px leveret. Elk byld hat in lokalisearre titel en in djippe link mei in hashtag-anker (slug), sadat do djip yn de ferhalen dûke kinst. Ik leun op myn eigen lemmid platform om de nedige ynfrastruktuer te leverjen. Op de eftergrûn makket in optimalisearre NodeJS-tsjinst de bylden mei imagemagick, jpegoptim en pngquant. Do kinst de API sels besjen op https://willem.com/en/images.json, dy't in JSON-array útfiert lykas:
[
{
"url": "/fy/2020-07-30_in-27-inch-imac-5k-opwurdearje-nei-14-terabyte/i_15_An-average-fly-is-bigger-than-most-screws-inside-the-iMac_400x400px.jpg",
"title": "An average fly is bigger than most screws inside the iMac",
"target": "/fy/2020-07-30_in-27-inch-imac-5k-opwurdearje-nei-14-terabyte/#an-average-fly-is-bigger-than-most-screws-inside-the-imac"
},
{
"url": "/fy/2019-06-25_in-bakfyts-gearstalle/i_11_Using-filler-plates-to-make-up-for-Chinese-Precision_400x400px.jpg",
"title": "Using filler plates to make up for Chinese Precision",
"target": "/fy/2019-06-25_in-bakfyts-gearstalle/#using-filler-plates-to-make-up-for-chinese-precision"
},
{
"url": "/fy/2021-01-14_myn-eigen-tablet-os-opjaan/i_05_You-know-you-re-digital-pen-is-lacking-trust-if-you-grab-for-old-fashioned-pencil-and-paper_400x400px.jpg",
"title": "You know you're digital pen is lacking trust if you grab for old fashioned pencil and paper...",
"target": "/fy/2021-01-14_myn-eigen-tablet-os-opjaan/#you-know-you-re-digital-pen-is-lacking-trust-if-you-grab-for-old-fashioned-pencil-and-paper"
},
...
]
Om te foarkommen dat it ding mar in tafallige linkgenerator wurdt, haw ik der mei opsetsin in lyts popup yn set dy't ferskynt as do op in byld tikest of klikst. Ik brûk de byldûndertitels dy't myn lemmid content manager bywurket om in bytsje ynfo sjen te litten, sadat do beslute kinst oft it ferhaal de muoite wurdich is om iepen te dwaan.
De boarnekoade frijjaan (AGPL)
Wylst ik tige bliid bin mei hoe't it Visual Journal op myn side wurket, leau ik sterk yn dielen. Grif hast do in noch bettere idee foar wat Solari-klapperjen. Dêrom jou ik it hiele ding frij as frije/libre software ûnder de GNU Affero General Public License (AGPL). Dat betsjut dat do it sels brûke, oanpasse en ferspriede meist. De boarnekoade, readme en foarbyldbestannen fynst do op https://source.willem.com/visual-journal/
Konklúzje
Nei hoe't it de nijsgjirrigens fan myn bern boeit te oardieljen, bin ik tige bliid mei it Visual Journal, dat ik by wize fan grap Willemstagram neamd haw. Mar oars as Meta's Instagram tsjinnet dit allinnich bylden om myn ferhalen te fertellen en de boarne is libre. Do kinst it besjen op de thússide of troch op de knop hjirûnder te drukken. Hokker bestimming kieze do?
Dit is mei de hân skreaun. Yn in tiid fan AI-generearre tekst is dit myn ienfâldige manier om de minsklike gedachte en muoite efter dizze wurden sjen te litten. Foar wa't nijsgjirrich is, is it oarspronklike (Ingelske) manuskript te downloaden.
Dit is mei de hân skreaun. Yn in tiidrek fan AI-generearre tekst lit it oarspronklike, Ingelsktalige manuscript (PDF) de minsklike gedachte en muoite efter dizze wurden sjen.