6 ms·

Show HN: I built a gravity simulator in pure CSS

64 points by cryptography 5y ago

cryptography 5y ago
Hi, HN! It started as a simple website to show the latest photos from Mars by fetching data from NASA APIs, then progressed into APIs to demonstrate fun space updates (e.g. people in space, space flight table). It soon evolved into an elementary demonstration of gravity in different celestial bodies (Earth, Moon, Mars, International Space Station for now), which I call 'gravity simulation'. Currently working on more accurate animations to simulate life on different planets. Hope you'll enjoy it! Tech-stack: React for the web app, the simulator is CSS-only. I used Manim for making explanatory videos. Disclaimer: just to make it clear, I'm not a physicist or an astronomer, just a space enthusiast. So, I'm sure there might be some inaccuracy in my animations. Would be more than happy if any one of you notice them and let me know.
- MauranKilom 5y ago
  I'm going to be critical and call out the name. There is absolutely no simulation going on here. This is an attempt at demonstrating qualitative behavior, at best. I put no blame on you for not approaching it from a physics standpoint, but it is misleading to call it a simulator in that case.
- peterisza 5y ago
  I hope this is a joke
- zestyping 5y ago
  This does not resemble the way gravity works at all. The balls slow down well before they reach the ground and then suddenly jump up. It looks completely wrong to me.
TAKEMYMONEY 5y ago
What was the hardest part? What's the benefit of using ems as units in your animations? Cool stuff, thanks for sharing!
deleted 5y ago
[deleted]
TameAntelope 5y ago
Okay dumb question (sorry), but I thought acceleration due to gravity was constant relative to mass, so shouldn't the red and the green ball fall at the same rate? The whole "feather and bowling ball dropped in a vacuum" experiment, right?
- LASR 5y ago
  Yeah this is confusing me as well. Mass does not affect the velocity of a falling object. Unless the simulation is accounting for some air resistance too.
- rhacker 5y ago
  In truth, if both experiments are done independently, (so not to affect each other), and we measure how long it takes the two massive objects to hit, and both objects are allowed to move each other, then the pull from a feather moves the earth slightly less than the pull the bowling ball has on the earth, so technically they will be slightly different times. But that difference is not really measurable and probably barely calculable - though I'm sure someone on here may do that.
  - crdrost 5y ago
    Physicisty type here! It's actually easy to calculate because it's so small. If you dropped them side-by-side the difference would require factoring in the curvature of the Earth and would really be way below anything you might measure... If you drop them in series then yes that does have another effect... the actual acceleration should be like g(1+m/M) instead of just g, so if a ball is 0.6 kg and Earth is 6e24 kg the fall time goes like √(2D/g) and so for a 10s (500 m) freefall in vacuum it changes the time by 0.5 yoctoseconds? Way smaller than any clock accuracy as far as I know... No the real inaccuracy is that the drag force in air will scale like the square of the velocity, m dv/dt = m g – ½ ρ A v² c Where c is a dimensionless geometric constant called the Drag Coefficient, you can handwave that for these rough sphere surfaces it's maybe 0.5 or so, ρ is the density of air which of course gets lower at high elevations, at sea level it’s 1.22 kg/m³, but decreases like 0.13 kg/m³/km or so. A is the cross-sectional area of the ball π r². If you pretend that these variables are fixed instead of changing then this is a soluble equation, defining U = √{2mg/(ρ A v² c)}, dv/dt = g – g (v/U)² v(t) = U tanh(g t/U) U is the terminal velocity. Note that for small times tanh( gt/U) ≈ gt/U and v(t) ≈ gt becomes independent of U and hence m... So that's my pet peeve: The two things on Earth should fall side-by-side in tandem at first, then slowly the tennis ball should lag behind! That's not what we see in this simulation, unfortunately.
spicybright 5y ago
I love the presentation and purpose of the site. But the gravity of dropping the balls looks really weird on my end. They seem to fall at speed, but then de accelerate before touching the ground, then they bounce again until coming to a standstill. The ball on the title looks accurate when bouncing, so I'm not sure if this is on purpose or not. Running firefox under MacOS.
- teraflop 5y ago
  I don't know if it's "on purpose", but that's a correct result of how the animations are defined in the CSS, not a browser bug. The stylesheet defines a single set of animation keyframes going from top to bottom at constant speed with a small bounce, and then applies the default CSS "ease" timing function to the entire animation. That results in an incorrect non-zero vertical initial velocity (making it seem like the ball was thrown downward rather than dropped), an initial downward acceleration that's vaguely in the right ballpark, and then a deceleration that's completely incorrect.
- jstanley 5y ago
  Yes, it also looks very strange to me. The balls seem to decelerate before they hit the ground. Firefox on Ubuntu: https://www.youtube.com/watch?v=5CihIHXj5HE https://www.youtube.com/watch?v=5CihIHXj5HE I'm guessing that this behaves differently on Chromium, or alternatively that OP has never seen a ball bounce before :)
  - mstngl 5y ago
    I assumed also a more correct way of "simulation" in Chromium-derivates, but looks exactly the same on Chromium (Windows).
  - babypuncher 5y ago
    Maybe the objects in question are so massive that relativistic effects come into play. To an outside observer, time would appear to slow down for objects venturing deeper into the gravity well.
  - spicybright 5y ago
ReleaseCandidat 5y ago
Did I miss something, or is this everything (for the earth)? .pink-earth { animation: ballGravityEarthPink 3.3s, sceneRotate 30s infinite linear reverse; animation-fill-mode: forwards; } .orange-earth { animation: ballGravityEarthOrange 1.36s forwards, sceneRotate 30s infinite linear reverse; } @keyframes ballGravityEarthOrange { 0% { bottom: 4em;} 40% {bottom: 0em;} 55% {bottom: .5em;} 100% {bottom: 0em;} } @keyframes ballGravityEarthPink { 0% { bottom: 3.8em;} 94% {bottom: 0em;} 97% {bottom: .005em;} 100% {bottom: 0em;} }
- tiborsaas 5y ago
  It's weird that it's not making use of cubic-bezier animation.
Aperocky 5y ago
This is positively surprising. But I think this also speak to how CSS have become 'feature bloated'.
- deleted 5y ago
  [deleted]
peanut_worm 5y ago
I don’t know much about gravity but I don’t think things slow down right before they hit the ground
- cryptography 5y ago
  They def don't:) It's a CSS-animation bug that I need to fix. Will do. Thanks!
  - peanut_worm 5y ago
    lovely website regardless
udbhavs 5y ago
CSS currently cannot model physics based timing functions but there is a proposal for spring() (https://github.com/w3c/csswg-drafts/issues/280 https://github.com/w3c/csswg-drafts/issues/280)
- cryptography 5y ago
  Nice! Haven't heard about it. Thanks for sharing
robgibbons 5y ago
BitDefender won't let me access the page (untrusted/insecure warning). Not sure if it's just a sketchy TLD or something else you're loading but just thought you should know.
- cryptography 5y ago
  Noted. Thanks for letting me know.
Kunsang 5y ago
Looks exactly like in this video. You should have given them some credit. https://youtu.be/NdftnCDwKaU https://youtu.be/NdftnCDwKaU
neogodless 5y ago
UI complaint - I thought the "V" was a variable, and I scrolled down a bit and started hitting buttons, and none of them seemed to do anything to affect the visual. Only later did I realize there was another visual below the controls that you're meant to be observing. Perhaps it's just me, or perhaps the placement of the "V" as a way to get users to scroll down isn't ideal. Other than that, it does seem like a neat way to present the physics concepts!
afdfadfqe6 5y ago
Seems to need javascript; I get a blank screen otherwise. For 'pure CSS' I wasn't expecting that.
biorach 5y ago
It'll be really impressive once you add general relativity.
nathias 5y ago
amazing, this could probably be used to replace some very JS heavy animations
- spartanatreyu 5y ago
  Unfortunately it's not accurate. It could approach a better accuracy with essentially a large css file that has a prebaked "simulation" that plays, but it's best to use JS for this type of thing. It's simple to make in JS, and it can be intractable and allow for changing the inital conditions of the simulation, rather than an animation of a simulation.
zactato 5y ago
It's a fun page, but the gravitational acceleration is clearly wrong. You animated some balls in CSS, you didn't model gravity. I think this might be a good example of using the wrong tool for the job. JS would work great for this use case. No need to try to force CSS to do it.
- alecst 5y ago
  Harsh comments for a pretty impressive page, in my opinion.
  - smegsicle 5y ago
    It's a css animation demo describing physical phenomenon- describing it as a physical simulator leads to disappointment.
babypuncher 5y ago
Does it account for gravitational time dilation in sufficiently deep gravity wells?
aasy 5y ago
The website is lit! Looking forward to seeing more.

64 points by cryptography 5y ago

Hi, HN! It started as a simple website to show the latest photos from Mars by fetching data from NASA APIs, then progressed into APIs to demonstrate fun space updates (e.g. people in space, space flight table). It soon evolved into an elementary demonstration of gravity in different celestial bodies (Earth, Moon, Mars, International Space Station for now), which I call 'gravity simulation'. Currently working on more accurate animations to simulate life on different planets. Hope you'll enjoy it! Tech-stack: React for the web app, the simulator is CSS-only. I used Manim for making explanatory videos. Disclaimer: just to make it clear, I'm not a physicist or an astronomer, just a space enthusiast. So, I'm sure there might be some inaccuracy in my animations. Would be more than happy if any one of you notice them and let me know.

MauranKilom 5y ago
I'm going to be critical and call out the name. There is absolutely no simulation going on here. This is an attempt at demonstrating qualitative behavior, at best. I put no blame on you for not approaching it from a physics standpoint, but it is misleading to call it a simulator in that case.
peterisza 5y ago
I hope this is a joke
zestyping 5y ago
This does not resemble the way gravity works at all. The balls slow down well before they reach the ground and then suddenly jump up. It looks completely wrong to me.

TAKEMYMONEY 5y ago

What was the hardest part? What's the benefit of using ems as units in your animations? Cool stuff, thanks for sharing!

deleted 5y ago

[deleted]

TameAntelope 5y ago

Okay dumb question (sorry), but I thought acceleration due to gravity was constant relative to mass, so shouldn't the red and the green ball fall at the same rate? The whole "feather and bowling ball dropped in a vacuum" experiment, right?

LASR 5y ago
Yeah this is confusing me as well. Mass does not affect the velocity of a falling object. Unless the simulation is accounting for some air resistance too.
rhacker 5y ago
In truth, if both experiments are done independently, (so not to affect each other), and we measure how long it takes the two massive objects to hit, and both objects are allowed to move each other, then the pull from a feather moves the earth slightly less than the pull the bowling ball has on the earth, so technically they will be slightly different times. But that difference is not really measurable and probably barely calculable - though I'm sure someone on here may do that.
- crdrost 5y ago
  Physicisty type here! It's actually easy to calculate because it's so small. If you dropped them side-by-side the difference would require factoring in the curvature of the Earth and would really be way below anything you might measure... If you drop them in series then yes that does have another effect... the actual acceleration should be like g(1+m/M) instead of just g, so if a ball is 0.6 kg and Earth is 6e24 kg the fall time goes like √(2D/g) and so for a 10s (500 m) freefall in vacuum it changes the time by 0.5 yoctoseconds? Way smaller than any clock accuracy as far as I know... No the real inaccuracy is that the drag force in air will scale like the square of the velocity, m dv/dt = m g – ½ ρ A v² c Where c is a dimensionless geometric constant called the Drag Coefficient, you can handwave that for these rough sphere surfaces it's maybe 0.5 or so, ρ is the density of air which of course gets lower at high elevations, at sea level it’s 1.22 kg/m³, but decreases like 0.13 kg/m³/km or so. A is the cross-sectional area of the ball π r². If you pretend that these variables are fixed instead of changing then this is a soluble equation, defining U = √{2mg/(ρ A v² c)}, dv/dt = g – g (v/U)² v(t) = U tanh(g t/U) U is the terminal velocity. Note that for small times tanh( gt/U) ≈ gt/U and v(t) ≈ gt becomes independent of U and hence m... So that's my pet peeve: The two things on Earth should fall side-by-side in tandem at first, then slowly the tennis ball should lag behind! That's not what we see in this simulation, unfortunately.

spicybright 5y ago

I love the presentation and purpose of the site. But the gravity of dropping the balls looks really weird on my end. They seem to fall at speed, but then de accelerate before touching the ground, then they bounce again until coming to a standstill. The ball on the title looks accurate when bouncing, so I'm not sure if this is on purpose or not. Running firefox under MacOS.

teraflop 5y ago
I don't know if it's "on purpose", but that's a correct result of how the animations are defined in the CSS, not a browser bug. The stylesheet defines a single set of animation keyframes going from top to bottom at constant speed with a small bounce, and then applies the default CSS "ease" timing function to the entire animation. That results in an incorrect non-zero vertical initial velocity (making it seem like the ball was thrown downward rather than dropped), an initial downward acceleration that's vaguely in the right ballpark, and then a deceleration that's completely incorrect.
jstanley 5y ago
Yes, it also looks very strange to me. The balls seem to decelerate before they hit the ground. Firefox on Ubuntu: https://www.youtube.com/watch?v=5CihIHXj5HE https://www.youtube.com/watch?v=5CihIHXj5HE I'm guessing that this behaves differently on Chromium, or alternatively that OP has never seen a ball bounce before :)
- mstngl 5y ago
  I assumed also a more correct way of "simulation" in Chromium-derivates, but looks exactly the same on Chromium (Windows).
- babypuncher 5y ago
  Maybe the objects in question are so massive that relativistic effects come into play. To an outside observer, time would appear to slow down for objects venturing deeper into the gravity well.
- spicybright 5y ago

ReleaseCandidat 5y ago

Did I miss something, or is this everything (for the earth)? .pink-earth { animation: ballGravityEarthPink 3.3s, sceneRotate 30s infinite linear reverse; animation-fill-mode: forwards; } .orange-earth { animation: ballGravityEarthOrange 1.36s forwards, sceneRotate 30s infinite linear reverse; } @keyframes ballGravityEarthOrange { 0% { bottom: 4em;} 40% {bottom: 0em;} 55% {bottom: .5em;} 100% {bottom: 0em;} } @keyframes ballGravityEarthPink { 0% { bottom: 3.8em;} 94% {bottom: 0em;} 97% {bottom: .005em;} 100% {bottom: 0em;} }

tiborsaas 5y ago
It's weird that it's not making use of cubic-bezier animation.

Aperocky 5y ago

This is positively surprising. But I think this also speak to how CSS have become 'feature bloated'.

deleted 5y ago
[deleted]

peanut_worm 5y ago

I don’t know much about gravity but I don’t think things slow down right before they hit the ground

cryptography 5y ago
They def don't:) It's a CSS-animation bug that I need to fix. Will do. Thanks!
- peanut_worm 5y ago
  lovely website regardless

udbhavs 5y ago

CSS currently cannot model physics based timing functions but there is a proposal for spring() (https://github.com/w3c/csswg-drafts/issues/280 https://github.com/w3c/csswg-drafts/issues/280)

cryptography 5y ago
Nice! Haven't heard about it. Thanks for sharing

robgibbons 5y ago

BitDefender won't let me access the page (untrusted/insecure warning). Not sure if it's just a sketchy TLD or something else you're loading but just thought you should know.

cryptography 5y ago
Noted. Thanks for letting me know.

Kunsang 5y ago

Looks exactly like in this video. You should have given them some credit. https://youtu.be/NdftnCDwKaU https://youtu.be/NdftnCDwKaU

neogodless 5y ago

UI complaint - I thought the "V" was a variable, and I scrolled down a bit and started hitting buttons, and none of them seemed to do anything to affect the visual. Only later did I realize there was another visual below the controls that you're meant to be observing. Perhaps it's just me, or perhaps the placement of the "V" as a way to get users to scroll down isn't ideal. Other than that, it does seem like a neat way to present the physics concepts!

afdfadfqe6 5y ago

Seems to need javascript; I get a blank screen otherwise. For 'pure CSS' I wasn't expecting that.

biorach 5y ago

It'll be really impressive once you add general relativity.

nathias 5y ago

amazing, this could probably be used to replace some very JS heavy animations

spartanatreyu 5y ago
Unfortunately it's not accurate. It could approach a better accuracy with essentially a large css file that has a prebaked "simulation" that plays, but it's best to use JS for this type of thing. It's simple to make in JS, and it can be intractable and allow for changing the inital conditions of the simulation, rather than an animation of a simulation.

zactato 5y ago

It's a fun page, but the gravitational acceleration is clearly wrong. You animated some balls in CSS, you didn't model gravity. I think this might be a good example of using the wrong tool for the job. JS would work great for this use case. No need to try to force CSS to do it.

alecst 5y ago
Harsh comments for a pretty impressive page, in my opinion.
- smegsicle 5y ago
  It's a css animation demo describing physical phenomenon- describing it as a physical simulator leads to disappointment.

babypuncher 5y ago

Does it account for gravitational time dilation in sufficiently deep gravity wells?

aasy 5y ago

The website is lit! Looking forward to seeing more.