Jumping on planets banner

Jumping on planets

5 devlogs
3h 26m 44s

On this site you can see how high you could jump on different places in space!
Ever wondered how high you could jump on the scorching surface of the Sun or the low-gravity environment of the ISS? This interactive simulation brings planetary physics to life.

This project uses AI

Used AI to generate the astronaut assets.
Used AI to debug some code.

Demo Repository

Loading README...

loekman

Shipped this project!

Hours: 3.45
Cookies: 🍪 54
Multiplier: 15.57 cookies/hr

I built a site where you can explore how high you would jump at different locations in space! When you click the screen, the astronaut jumps into the air.

Check the HUD in the top-left corner to see the local gravity and your real-time jump height in meters.

Hope you like it!

loekman

I added a new UI panel where you can track the gravity of each location and see a live counter that shows how high you’re jumping in meters.
All the gravity values and jump heights are scientifically accurate, except for the ISS. I had to tweak it slightly because in real life, gravity there is near zero, meaning the astronaut would never come back down!
I also wrote the ReadMe for Github.
In the image below, you can see the values in action:

Attachment
1

Comments

FarciarzYT
FarciarzYT 7 days ago

The sound is really cool, it’s hilarious

loekman

I added several new locations with unique gravity settings: Mars, Saturn, the ISS, and the Sun.
The sun and ISS are a little bit wierd because the gravity on the sun is very high and on ISS the gravity is very low.
To make the UI feel better, I replaced the placeholder emojis with custom icons and improved the title’s readability by making it larger with a crisp outline. I also added a favicon for that finished touch.

The site is now live at: https://loek.oerlemans.tv/jumping_on_planets/

0
loekman

The jumping animation has been updated.
I made the gravity more realistic (the gravity is in comparison)
A “wheeee” sound effect has been added. This sound effect changes its duration and pitch based on the gravity.
The time the astronaut spends in the prepare-for-jump position is now adaptive. This preparation time increases with higher gravity.
A slight shaking animation has been added. This animation occurs when the astronaut is in the prepare-for-jump frame.You can see all this in the screen recording I uploaded.

0
loekman

I’ve expanded the project by adding more planets to explore! I implemented a navigation dock that lets you choose which planet you want to visit.
Depending on the planet you select, both the background and the gravity settings change dynamically. The emojis in the dock are currently just placeholders.
My next steps are to make the gravity values more scientifically accurate for each planet and to add even more planets to the system!

1

Comments

matthewkfszeto
matthewkfszeto 10 days ago

Awesome!

loekman

I added an Earth GIF as the background for my site. At first I tried using animations from others, but none of them felt quite right for what I had in mind. So, I decided to create one myself!
I used Gemini to generate the individual frames for my astronaut and wrote custom code to bring the animation to life with physics and gravity. In the video, you can see the site in action: the astronaut jumps and switches frames based on his movement.
My next steps are to add many more planets to explore and to further polish the overall experience.

0