What Is The Starmap?

The basic idea behind the project is like this: we want to make a digital, information dense spider diagram that can be adjusted and updated on the fly. If you want to rearrange things, you just grab one of the points in the map and drag it around, and watch the jelly-like physics engine work it’s magic, as things roll and bounce into place.

What I needed was a way to show complex information in a way that is compact, easy to share and memorable. This allows any set of complex information to be added, with the system showing off it’s flexibility by adjusting itself to suit.

If you’ve seen obsidian, this is probably starting to look really familiar, and with good reason! A big part of the inspiration for this started there. Obsidian is a fantastic project which I’ve personally used time and time again for research and project planning – if you haven’t seen it before, you should totally go check it out. The key difference here is that this is designed to be solely web-based and with no editing capabilities.

The entire physics engine was built from the ground up – updating in real-time, even on mobile.

Roughly How It Works

The starmap takes in information from carefully formatted text files called markdown, and converts them into HTML for display. It then adds their information into a list, ready for the rest of the app to create a web of interlinked data which you can navigate like a spider diagram.

I used a small JavaScript framework to make coding quicker, but the entire project was written from the ground up after that – that’s including a purpose-built physics engine, markdown parser and everything it draws to a display. This was my first real deep-dive into ballistics calculations – if anyone reading this knows even a bit about physics simulation, they’ll also understand the many challenges of getting a physics system to be lightweight enough to run in-browser. Remember, not all phones have much processing power available to them, so if we want this to work on every device, this is a significant limiting factor.

After each animation step, physics calculations are then drawn into an SVG which is embedded directly into the web page, where it can be styled and interacted with.

What’s Left To Do?

The version shown here is actually analyzing the markdown files in order to create the layout every time you fire it up, but the system does support loading from a snapshot – that’s way quicker, because it saves on a ton of network requests when the system is loading. Because we can take a snapshot of the map up in an already folded out state, we can also remove the need to simulate physics on the entire map at page load for a light and smooth experience.

More:

• Optimization
• Feature Expansion
• Accessibility Improvements

The system is by no means perfect, but I hope you can see where it’s headed! The main thing that needs tightening up is the speed – it will run fine on most laptops and good phones, but worse devices might struggle with the physics sim a little bit (it’s pretty labour intensive!). It is possible to disable physics for low power devices – it’s not a permanent fix, but it does at least get things running quickly and still allow you to use it’s core functionality.