Many years ago, I found a link to a web toy, "If the Moon Were 1 Pixel." (Worth 2014) It's a web-based model of the Solar System scaled so the width of one pixel represents the diameter of the Moon. It does a good job visualizing just how big and empty space is.
But scaling the Solar System down does obscure just how big all these objects are. The Earth at four pixels in diameter is home to several regions including the continental United States, Europe, and Australia that are themselves about one pixel across. So why not show the Solar System at 1:1 scale to really drive home how big it is?
It turns out that this is perfectly feasible within a web browser on a modern PC or smartphone, though its ability to actually help comprehend the scale of the Solar System is dubious. The observable Universe is quite large, but only finitely so. Objects in the Universe have positions, but they can only be known to finite precision. If we consider the largest distance that makes physical sense—the diameter of the observable Universe, on the order of 1027 meters—and the smallest distance that makes physical sense—the Planck length, on the order of 10-35 meters—then we need a surprisingly small number to precisely represent the location of any particle in the entire Universe. Just three 63-digit decimal numbers—representing an x-, a y-, and a z- coordinate—can store the number of Planck lengths it is from some origin point anywhere in the Universe.
This is a little tricky to do with a computer normally, though. JavaScript uses double-precision floating-point numbers by default, so let's consider those. I won't delve too deep into the details here, but the important thing to understand is that although these numbers can represent magnitudes up to about 308 decimal digits—enough to comfortably store not merely the diameter but the volume of the observable Universe in cubic Planck lengths—they are unable to store precision beyond about 16 decimal digits.
This is a ludicrous amount of precision for most practical purposes. If a car's odometer, for instance, were this precise, then it would be able to keep track of the number of carbon atoms in the asphalt it drove over on a cross-country road trip. If a rocket's altimeter were this precise, then it would be able to track its height above Earth to the nearest flu virus while touching down on the Moon. If a rover's rangefinder were this precise, then it would be able to track the distance between it and its operations center on Earth to the nearest hair width while driving around Mars.
But it's not enough precision here, and the examples clearly show that we're losing precision with distance. A hair is hundreds of thousands of carbon atoms wide, so a trip to the planet next door has already increased the size of the smallest measurable fraction of distance by five or six orders of magnitude.
Our Solar System model has to avoid this precision loss. (Minecraft) Let's use integers instead so precision isn't lost as distance increases. If we used, say, a 64-bit integer, then the maximum value that could be stored is about 1.85 × 1019, or 18.5 quintillion. This is a very large number, allowing a distance of one light-year to be divided into segments each about half a millimeter long. But it's still not enough!
The W3C defines 1px—equivalent to one hardware pixel for typical desktop monitors—as exactly 1/96 inches. (W3C 2024) This converts to about one-quarter of a millimeter. We can only count individual pixels out to half a light-year, which is an incredibly long distance—Voyager 1 is only half a percent that distance from Earth—but it's not even a quarter of the way through the Oort Cloud.
A 64-bit integer can't even represent the entire Solar System, let alone the entire Universe. We need more bits than that. Thankfully, JavaScript has a feature for this: the BigInt. BigInts have no defined upper limit, though they are limited by browser engines. In Firefox, this limit seems to be 220 bits, (jmrk 2023) which corresponds to a decimal number with about ten million digits. This is infinite. Not literally, but I cannot begin to think of a physical quantity that would be represented by a number approaching that.
So this Solar System model tracks the user's position on the page using a BigInt, and scroll events increment it and decrement it. It's not literally scrolling, though. There's one last issue with browsers: the maximum page size that they can render isn't actually very big. At 96 dpi, Chrome can't even make it ten kilometers, and Firefox caps out at about three. This model unfortunately can't just use a CSS property body {height: BigInt(151966136000000037795)px} and call it a day.
Instead, the page height is fixed at the screen height, and scroll events increment or decrement a variable storing a coordinate and then call a rendering function. The rendering function uses the coordinate to colors three <div> elements acting as tiles and horizontally offsets them to simulate scrolling. Once this horizontal offset exceeds the width of a <div>, it's reset to zero and the tile counter increments by one. The tile counter is used to determine which text to display on the page and choose the background colors corresponding to the Solar System body at the current coordinate. This bookkeeping ensures that the elements on the page are contained within a window that's only about 100 000 pixels wide.
Several scroll speeds are available, but they're capped at c. You cannot scroll faster than light. There's an asterisk on that because I'm making some assumptions about system behavior, namely that the key repeat rate is 30 times per second and the scroll event rate is 60 times per second. Actual systems will vary, operating system hacks can exceed these speeds, accessibility settings may not be able to reach them, and so on. Nonetheless, it's in the correct ballpark, and it should take multiple actual calendar years to scroll to the end of the model.
There are more than 1.5 million cataloged objects orbiting the Sun. There is no way in hell I'm including all of these in a Solar System model. Instead, I limited my selection to objects in hydrostatic equilibrium, i.e., that are round. This includes the following:
- The Sun
- The planets
- The dwarf planets
- Salacia
- Any round moons
Salacia is separate from the other dwarf planets because it's unconfirmed whether it actually is round. In addition, the small potato-shaped rocks orbiting Mars and some dwarf planets are included because none of their parent bodies have round moons and I thought it would be too lonely to not include any moon further than Charon. In total, there are eight planets, twenty of their moons, ten dwarf planets including Salacia, eight of their moons, and—spoilers—two stars.
This model spans from the core of the Sun to the surface of Proxima Centauri at 1:1 scale. I figured I might as well go all the way because the outer edge of the Oort Cloud is already 75% of the way there.
The Solar System has been arranged one-dimensionally; everything is collinear. The sizes used are their average diameters. The distances of planets and dwarf planets from the Sun are their semi-major axes. The distances of moons are the sum of their own semi-major axes around their parent object plus that object's semi-major axis. This means that all moons are at the points in their orbits that place them farthest from the Sun.
Objects are represented by one color, chosen by cropping a portion of a true-color photo of the object shrunk to one pixel. For the dwarf planets without high-resolution photos, a color was chosen somewhat arbitrarily, but albedo and spectral data are generally available for them.
This model could absolutely be more meticulous and accurate, but ultimately my goal was to determine whether or not I could fit an arbitrarily-large space into a webpage. I have determined that the answer is yes.