top | item 46742285

Show HN: I built a space travel calculator using Vanilla JavaScript

54 points| captainnemo729 | 1 month ago |cosmic-odometer.vercel.app

I built this because measuring my age in years felt boring—I wanted to see the kilometers.

The first version only used Earth's orbital speed (~30km/s), but the number moved too slowly. To get the "existential dread" feeling, I switched to using the Milky Way's velocity relative to the CMB (~600km/s). The math takes some liberties (using scalar sum instead of vector) to make the speed feel "fast," but it gets the point across.

Under the hood, it's a single HTML file with zero dependencies. No React, no build step. The main challenge was the canvas starfield—I had to pre-allocate the star objects to stop the garbage collector from causing stutters on mobile.

Let me know if the physics makes you angry or if the stars run smooth on your device.

34 comments

order

Tiberium|1 month ago

New account, vibecoded demo (the style gives it away, plus the comments in source), author using LLM to write comments, yet this reached the top page.. HN is certainly interesting nowadays.

I'm not against vibecoded stuff, but the author said it's a "deliberate design choice" in one of the comments, clearly not being open about the use of LLMs.

> https://web.archive.org/web/20260124143216/https://cosmic-od...

/* FIXED: Changed cursor from 'help' to 'default' to avoid confusion */

/* --- UPDATED MOON LOGIC --- */

croisillon|1 month ago

i noticed this from the product and from the comments, but if it's well done and satisfying, what's wrong with it?

potluri|1 month ago

Just want to comment on the star background. I did something similar for my own site (link in bio). I ended up rendering the stars in a three.js scene because drawing them on a 2D canvas did not look like a satisfying effect. CPU usage was lessened as well, at least on my mobile and two desktops (can't verify your site's CPU utilization since I'm on mobile atm). It also fixed the issue where resizing the viewport would mess with the rendering of the stars, like it occurs in your app currently.

captainnemo729|1 month ago

nice. i debated using three.js but didn't want the overhead/imports for a simple background. wanted to keep it raw canvas to stay zero-dependency.

you're totally right about the resize jank though. the math definitely breaks when the window dimensions change. on the todo list.

reconnecting|1 month ago

It's really odd that we're stuck in this fish tank with zero idea where we're flying now, or where we were before. I believe this is vital information for every journey.

Life looks much easier when realising that we're all flying at least ~30 km/s through dark space every second of our lives.

Thank you so much! I was just thinking about how to create something similar a month ago for my birthday, but didn't succeed like you did.

captainnemo729|1 month ago

The fish tank analogy is perfect. It feels illegal that we're moving this fast without a dashboard.

And definitely give yours another shot. Since this is just vanilla JS, feel free to view source on mine to see how I handled the frame loop if you get stuck.

widforss|1 month ago

Nice job!

It's interesting to see how little effect the orbit and rotation had on the straight line. A proposal is to align the numbers for the different movement categories so that it's easier to see the magnitudes of them.

It took me a couple of seconds to understand the concept, from the title I though it was going to be a planner to show gravity assists etc.

captainnemo729|1 month ago

Yeah the scale difference is crazy. Once you add the Galaxy/CMB velocity, the earth's rotation basically becomes a rounding error.

Good call on the number alignment. I'm using a variable-width font which makes comparing them messy. I'll switch to monospace or tabular-nums in the next push so the magnitudes scan better.

And fair point on the title-'calculator' implies mission planning. Maybe 'travel visualizer' would have been safer!

netsharc|1 month ago

Geez, gotta love that you have to reach the bottom of the page and read the small print to realize that the date input on the top is supposed to be for your birthday... and then to figure out that the site is a calculator of "this is how far you've travelled relative to [the center of the universe?] since birth"...

captainnemo729|1 month ago

fair point. classic case of 'dev blindness'—i've tested it so many times i forgot it's not obvious to a new user.

pushing a label fix now so it's not a guessing game. thanks.

anileated|1 month ago

Even if you remember the times of iPod, you can safely say you're less than one light year old.

captainnemo729|1 month ago

yeah it's actually depressing. based on the odometer's math (~850km/s), you hit the 1 Light Year mark around your 353rd birthday.

netsharc|1 month ago

You're measuring time using a unit of distance...

croisillon|1 month ago

it's cool but i was expecting some kind of visualization, how do my 1.2 trillion km look on a map?

also there are some cursors with question marks but they don't espatially ;) call the FAQ, do they? firefox on win10

captainnemo729|1 month ago

valid point on the visualization. i tried to map it initially, but the depressing reality is that even at 1.2 trillion km, we're basically a stationary dot on a galactic scale. a map just looked like a blank screen, so i went with the starfield to try and convey speed instead.

re: the cursors that's definitely my bad UX. they are just hover tooltips (standard title attributes), but setting the cursor to help (?) makes them look like clickable buttons. i'll swap that out so it's less confusing. thanks for the firefox check.

arendtio|1 month ago

So, how much does the galaxy's travel affect the speed of time?

captainnemo729|1 month ago

I actually ran the numbers on time dilation! At 600km/s (0.2%), the effect is surprisingly small. We basically 'save' about 63 seconds a year compared to a stationary observer relative to the CMB. Not enough to live forever, but enough to be late for a meeting.

redmattred|1 month ago

This is great, well done.

captainnemo729|1 month ago

thanks! it was a fun weekend hack to put together. glad you liked it.

DmitryO|1 month ago

Its vibecoded, I can see this shitty borders and neon that Gemini and other AI tools like so much

captainnemo729|1 month ago

i was just going for a synthwave/tron aesthetic. the glowing borders are a deliberate style choice, not a GPT artifact.

bvan|1 month ago

Love it and the fact it’s lean. No back-end slop.