Show HN: I built a gravity simulator in pure CSS | Hacker News Reader

Show HN: I built a gravity simulator in pure CSS

multiplanetary.website

64 pointscryptography44 comments

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.

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.

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

I'm guessing that this behaves differently on Chromium, or alternatively that OP has never seen a ball bounce before :)

I assumed also a more correct way of "simulation" in Chromium-derivates, but looks exactly the same on Chromium (Windows).

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.

I feel like this is an argument for not sticking to 100% CSS. Tiny bit of javascript would fix this.

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?

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.

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.

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.

Bonus points, I tried to do these calcs and the basketball likely has a terminal velocity ≈ 19.7 ± 0.3 m/s whereas the tennis ball likely has a terminal velocity ≈ 22.7 ± 0.4 m/s... As air resistance kicks in the tennis ball should pull ahead, not lag behind!

GDoc: https://docs.google.com/spreadsheets/d/1AnUeQ0RR7a5GA6Nrtef7...

Extra credit if you consider object spinning or not to determine impact of Magnus effect

Thanks for the comment. Disclaimer: I'm not a physicist:)

Yes, you're partially right...if we drop both balls on Moon, they'll fall at the same time. Because there's (almost) no air on the Moon. The ball with less mass has less force of gravity to fight with air resistance on the Earth. Therefore, it falls slower.

Maybe this video can help to visualize: https://www.youtube.com/watch?v=Esa0kKECZvM

> The ball with less mass has less force of gravity to fight with air resistance on the Earth. Therefore, it falls slower.

Even that is not correct. Air resistance is proportional to cross-section, and gravity is proportional to mass. A ball with less mass but much less cross section will fall faster. It has less "force of gravity", but it has much less air resistance. In other words, a marble will fall faster than a basketball when accounting for air resistance.

Note that the animation is inaccurate in any case because (assuming constant air density) the velocity of a falling ball will never decrease (until it hits the surface) if it started stationary.

I don't understand how you get to your drag equation, and I think that's why you see such an exaggerated difference between the falling speed of the two balls. Drag should depend on the velocity, but it seems your drag force doesn't?

Not only does the page explain what you see, but it refers to the feather-bowling ball demonstration that was filmed on the Moon.

It does! However, when I scroll to the bottom of the page I only see the title of that section, not the explanation, nor the accompanying video.

I didn't realize the "Why balls fall at all" was a button.

If anyone wants to play around with this old-school, here's a text based Python script that drops various things simultaneously and prints a table of position and velocity over time relative to the starting point. https://pastebin.com/q1NGv71W

Predefined things you can drop are basketball, bowling_ball, massive_sphere, dense_sphere, lead_sphere, pine_sphere, pingpong_ball, ant, rat, cat, person, and phone. You can add other things if you know their mass, cross sectional area, and coefficient of drag.

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;}
    }

It's weird that it's not making use of cubic-bezier animation.

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.

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.

I hope this is a joke

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.

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.

Harsh comments for a pretty impressive page, in my opinion.

It's a css animation demo describing physical phenomenon- describing it as a physical simulator leads to disappointment.

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

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

They def don't:) It's a CSS-animation bug that I need to fix. Will do. Thanks!

lovely website regardless

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

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!

What was the hardest part? What's the benefit of using ems as units in your animations?

Cool stuff, thanks for sharing!

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

Nice! Haven't heard about it. Thanks for sharing

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.

Noted. Thanks for letting me know.

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

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

The website is lit! Looking forward to seeing more.

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

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.

This is positively surprising.

But I think this also speak to how CSS have become 'feature bloated'.

Reply on news.ycombinator.com