The globe on the front of my homepage is a visualization of travel routes that hold some personal significance to me. I've rendered it using [globe.gl](https://github.com/vasturiano/globe.gl), a 3D globe UI that uses ThreeJS and WebGL. Technical notes can be found at the bottom of the page. The most significant routes are: > Johannesburg to Beijing > Beijing to Cape Town > Cape Town to Maastricht > Maastricht to Amsterdam > Amsterdam to Berlin > Amsterdam to New York <iframe src="https://travel-globe-gregorybruss.replit.app/?embed=true" width="100%" height="300" style="border:none;" frameborder="0"> </iframe> I like the idea of filling this virtual globe up as I go -- Like a personal travel pinboard, the kind you find at hostels and hotel lobbies in major cities. Apart from the globe, I track places that have been meaningful in my life, an idea I saw from the great Michael Nielsen [here](https://michaelnotebook.com/ongoing/places.html). I think one of the most underrated aspects of travel is how visiting a new place gives you a kind of hook to hang experiences on. Until you've been there, a place can only exist as something nebulous in your mind. All the actual texture arrives once you've physically been there. It's like the difference between seeing a wall painted to look like brick, versus an actual brick wall, where you can run your hand over and feel the rough texture and the gaps between them. When traveling, I'm often reminded of this passage: *“In reality, movement doesn’t exist. Like the turtle in Zeno’s paradox, we’re heading nowhere, if anything we’re simply wandering into the interior of a moment, and there is no end, nor any destination.”* ― Olga Tokarczuk, Flights* I find that keeping track like this helps me re-explore not just those places, but the parts of myself that were shaped in those moments. The streets are the same, the buildings haven't moved, but you're looking at everything through different eyes. Hard to overstate how interesting that becomes over time. ### Meaningful places ***Have been:*** Alexanderplatz, Koh Tao, Pai, Rosebank, University of Cape Town Upper Campus, Haifa, Central Park, Golden Gate Bridge, TU Munich Garching Campus, Harare, Fenghuang Ancient Town, Zhangjiajie, Great Wall of China, The Met, Beijing, The Grey Dog pub in Chelsea NYC, Spanish Arch Galway, Alcântara, Berghain, The Smithsonian, Alhambra, Kalk Bay, Tsim Sha Tsui, Bolshoy Moskvoretsky Bridge, Schlachtensee, Van Gogh Museum, Maastricht Stadspark, Friedrichshain, New Arbat Avenue (Kalinin Prospekt), Ponta de Ouro, Williamsburg, Tankwa Town, Warsaw, Paris, London, Gellért Thermal Bath, Cape Point, Addis Ababa ***Would like to go:*** San Francisco, Pyramids of Giza, Oxford, Chicago, MIT, The Great Barrier Reef, Shinjuku, Kyoto, Bergen, Geirangerfjord, Stockholm, Namib Desert, Grand Canyon, Victoria Falls, The Rockies, Very Large Array, Blackrock City, Melbourne, Buenos Aires, Mexico City, Amritsar, Yellowstone and Grand Teton, Lake Tahoe, Budva, Accra Travel continues to be a good example of an infinite game: every place I visit spawns five more I need to see. I am still not even close to the optimal margin. #### Travel Notes | [[Amsterdam]] | [[Bangkok]] | [[Moscow]] | [[Nairobi]] | | ---------------- | ---------------- | ------------ | --------------- | | [[Berlin]] | [[Beijing]] | [[Munich]] | [[Tankwa Town]] | | [[Koh Tao]] | [[Changsha]] | [[Vienna]] | [[Lisbon]] | | [[Gran Canaria]] | [[Johannesburg]] | [[Granada]] | [[Madrid]] | | [[Budapest]] | [[Cape Town]] | [[Belgrade]] | [[London]] | #### Technical Notes: - Browsers block HTTP content when embedded in HTTPS sites and flag mixed content warnings. - it's possible to set a dynamic camera altitude based on screen width: the globe initially looked too cramped on mobile, but I can programmatically adjust `pointOfView` based on screen width. - performance improvements: since I'm calling `myGlobe.render()` manually, there's a lot of freedom to optimize in case the globe is stuttering - no need to go into internal webGL internals until you've checked the API doesn't have the method you need. E.g: There was in fact a setBackgroundColor! No need to be reading minified javascript :) - REPLs can be easily embedded and hosted, and for any troubleshooting of visualisations like this, it is hard to beat the instant feedback - Browsers implement CSP headers as security measures to prevent potentially malicious sources, which restricted me from embedding context from certain sources (e.g the image overlay on the globe). The solution was to use these resources locally (well, locally inside of a repl) and then embed from there. - Browser developer tools like ColorZilla are super, super useful for UI consistency.