CSS 3D Solar System(codepen.io)
codepen.io
CSS 3D Solar System
http://codepen.io/juliangarnier/pen/idhuG
17 comments
Is there something like this where the proportions of size and distance are correct? I always wondered, how the solar system shrinken down to the size of a football would look like. Would the sun and all plantes be sub-pixel-size? So a correct image of the solar system would just be an empty image? Or would we be able to see the sun? Or the sun and some or all planets? I have no clue.
The reason you don't see realistic models very often is because objects we use as for reference (planets) are too tiny compared to the space between them. Earth would be nothing more than a speck of dust in a football sized model.
That said, here's a model with proper proportions of distance: http://www.solarsystemscope.com/ - Flash required, click anywhere, click on the gear icon to the left to select realistic size and model. Zoom slider is to the right. Note, the sizes and colors are wrong, most planets would be pretty much invisible in a realistic model.
Here's a neat non-interactive one from NASA: http://space.jpl.nasa.gov/
That said, here's a model with proper proportions of distance: http://www.solarsystemscope.com/ - Flash required, click anywhere, click on the gear icon to the left to select realistic size and model. Zoom slider is to the right. Note, the sizes and colors are wrong, most planets would be pretty much invisible in a realistic model.
Here's a neat non-interactive one from NASA: http://space.jpl.nasa.gov/
I dont understand the flash one.
The nasa one gives me this: http://i.imgur.com/E6JW3Ks.jpg
Too bad they show all those stars in the background. So its a bit hard to say what is what. But it looks like the sun and the planets are quite visible. But are the proportions really correct? It looks like the sun is not much bigger then the plantes.
The nasa one gives me this: http://i.imgur.com/E6JW3Ks.jpg
Too bad they show all those stars in the background. So its a bit hard to say what is what. But it looks like the sun and the planets are quite visible. But are the proportions really correct? It looks like the sun is not much bigger then the plantes.
Well, there are two issues here.
(1) Correct proportions of the distances between objects (namely the planets, planetoids, and the Sun), and (2) the correct proportions of the objects themselves.
The links (A) http://www.solarsystemscope.com/ and (B) http://space.jpl.nasa.gov/ show correct proportionality in DISTANCES BETWEEN OBJECTS but NOT the objects themselves.
For correct proportionality for both the distances and the objects themselves, see http://joshworth.com/dev/pixelspace/pixelspace_solarsystem.h...
The problem with http://codepen.io/juliangarnier/pen/idhuG is that both the distances between objects and the objects themselves are not proportionally correct.
(1) Correct proportions of the distances between objects (namely the planets, planetoids, and the Sun), and (2) the correct proportions of the objects themselves.
The links (A) http://www.solarsystemscope.com/ and (B) http://space.jpl.nasa.gov/ show correct proportionality in DISTANCES BETWEEN OBJECTS but NOT the objects themselves.
For correct proportionality for both the distances and the objects themselves, see http://joshworth.com/dev/pixelspace/pixelspace_solarsystem.h...
The problem with http://codepen.io/juliangarnier/pen/idhuG is that both the distances between objects and the objects themselves are not proportionally correct.
I find that flash one fantastic, with the stars. I'll be returning to it often.
If the Moon were only one pixel: http://joshworth.com/dev/pixelspace/pixelspace_solarsystem.h...
I know that one. I would like the whole solar system in one image. So that it fits on my screen without scrolling.
What I meant linking that:
According to that page the solar system's radius is ~6000000000km. Lets assume a 4096px wide desktop. Each pixel is ~1500000km. The Sun's radius is ~700000km, so definitely sub-pixel size.
According to that page the solar system's radius is ~6000000000km. Lets assume a 4096px wide desktop. Each pixel is ~1500000km. The Sun's radius is ~700000km, so definitely sub-pixel size.
Using your figures each pixel is ~1.5E9 m and the Sun's diameter is ~1.4E9 m, which would be 1 pixel with appropriate rounding; so you'd see the sun.
If the moon is only one pixel in an image that doesn't fit on your screen, then it would be invisible in an image that does. It would be impossible to get the whole solar system in one image that fits on your current screen without scrolling. So, what you would really like is a higher resolution screen.
The Earth's orbit is about 300 x 10^9 metres in diameter. The Earth's diameter is about 12.7 x 10^6 metres. That's a ratio of about 23500 (actually closer to 23600). So if the Earth is one pixel wide, an image showing its entire orbit would have to be about 24000 pixels wide.
The furthest planet is Neptune, and that's about 30 times as far from the Sun as the Earth. Suddenly you need a screen that's nearly 3/4 million pixels wide to show Neptune's orbit. Only 360,000 pixels if you only want to show the distance from the Sun to Neptune, and not the full orbit.
You can look up the comparative sizes of the planets and the Sun, but that gives you an idea.
The furthest planet is Neptune, and that's about 30 times as far from the Sun as the Earth. Suddenly you need a screen that's nearly 3/4 million pixels wide to show Neptune's orbit. Only 360,000 pixels if you only want to show the distance from the Sun to Neptune, and not the full orbit.
You can look up the comparative sizes of the planets and the Sun, but that gives you an idea.
I always found this video of Bill Nye http://www.youtube.com/watch?v=97Ob0xR0Ut8 disturbing, in the sense that even our own star is incredibly tiny compared to the distances to its planets.
Bringing the solar system to a 1920px screen, I would assume that not even the sun would be visible...
Bringing the solar system to a 1920px screen, I would assume that not even the sun would be visible...
[deleted]
Related: http://mgvez.github.io/jsorrery/
It's not just css, but uses NASA data and does super accurate simulation, like predict-the-solar-eclipse-date kind of accurate...
It's not just css, but uses NASA data and does super accurate simulation, like predict-the-solar-eclipse-date kind of accurate...
Lovely. Would love to be able to see the constellations more clearly. I can make them out I zoom in, the sun's rays enhance them. Although someone above doesn't like the constellations - so maybe a switch.
Great work. You even had some breakpoints for smaller widths, which was unexpected for this type of visualization.
Awesome! How long have you worked on it?