CSS 3D Solar System

http://codepen.io/juliangarnier/pen/idhuG

by ttty • 12 years ago

79 16 12 years ago

bringking• 12 years ago

Great work. You even had some breakpoints for smaller widths, which was unexpected for this type of visualization.

itry3• 12 years ago

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.

kaoD2• 12 years ago

If the Moon were only one pixel: http://joshworth.com/dev/pixelspace/pixelspace_solarsystem.h...

itry3• 12 years ago

I know that one. I would like the whole solar system in one image. So that it fits on my screen without scrolling.

zeen• 12 years ago

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/

itry3• 12 years ago

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.

zyrthofar• 12 years ago

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...

ColinWright• 12 years ago

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.

nmikz• 12 years ago

Awesome! How long have you worked on it?

ivan_ah• 12 years ago

It's not just css, but uses NASA data and does super accurate simulation, like predict-the-solar-eclipse-date kind of accurate...

disputin2• 12 years ago

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.

CSS 3D Solar System

Related Stories