JS1k: The JavaScript code golfing competition

for(_='ranOtOslateW)WY(-j0%q:13q;|dba 9~arGntForR Gial;Qfff_div^pxBerAstyle@colR:#_;foF:tOsfRm @="-@:presAve-3d;16BQ<^,#ecqidin,1;:WX(-)rotateradide">wth${`,`[i]-geF(#height	00position:fixed;bRr-us:5q;b.nAHTML+=`<:[4,2,4,4,2,41,3455,2]*9}B;al[0,.4,.7.5,2.7,5.4,9.59.2,30.1,39.5]*43e5}leG
b^z-x:2"=m></^>pAspective:60B;	:95vh;ovAflow:hn"=t>`;fR(i  n=`0MAcury0Venus0EGth0MGs0CAes0JupitA0Saturn0UOus0Neptune0Pluto`.split(b.bgColR=D=S=0))mp onclick="S=0;D=-+60\\xa0`+n,tceFAtop:30vh;left:5q5qj+i?0:50}%)WZ(B<h1 @="9vhQmGg:5vhn}</h1>	ackground:[`ffb_);box-shadow:0 0 4B 1B#_888bbbc72941foF-size:40B🌍</^ "
~% 3 7~q),d64f97#777
654b97ba86c86c97cb98655
666986 9%7ba7997 9553
cef4 338a
34c36f 734c
ddc321`]}i%8>5?`|	|Rr:40B sol#["_",876][i-6]}17%j17%X(85gY(9g`:""}`;setIFAval("S<3&&S++;t.@.=`WZ(D-=S}B`",33)';G=/[
-@-B^_QRFG~|qjWO]/.exec(_);)with(_.split(G))_=join(shift());eval(_)

Zm9yKF89J3Jhbk90T3NsYXRlVylXWSgtajAlcToxM3E7fGRiYSA5fmFyR250Rm9yUiBHaWFsO1FmZmZfZGl2XnB4QmVyQXN0eWxlQGNvbFI6I187Zm9GOh90T3NmUm0eIEA9Ih4tQDpwcmVzQXZlLTNkOx8xNkJRHTxeHRwsIxsbZWMacRsZaWQYaW4XLDEWOx46V1goLRUpcm90YXRlFHJhZGkTZGUSIj4RHHcYdGgQJHsPYCxgDltpXQwtZxNlRigjC2hlaWdodAkwMAgdcG9zaXRpb246Zml4ZWQ7B2JSEnItE3VzOjVxO2IGLhduQUhUTUwrPWA8BToPWzQILDIsNCw0LDIWLDQxLDM0FjUWNSwyXQwqOX1COwQTYWwLAw9bMCwuNCwuNxYWLjUsMi43LDUuNCw5LjUWOS4yLDMwLjEsMzkuNV0MKjQzZTV9Ag5sF2VHCwFiBV4Hei0XEng6MiIYPW0+PC9ePhxwQXNwZWN0aXZlOjYIMEI7CTo5NXZoO292QWZsb3c6aBgSbhEcIhg9dD5gO2ZSKGkgFyBuPWAwTUFjdXJ5MFZlbnVzMEVHdGgwTUdzMENBZXMwSnVwaXRBMFNhdHVybjBVT3VzME5lcHR1bmUwUGx1dG9gLnNwbGl0KGIuYmdDb2xSPUQ9Uz0wKSltBXAgb25jbGljaz0iUz0wO0Q9LQIrNggwEVxceGEwYCtuDCx0BWNlRkEHdG9wOjMwdmg7bGVmdDo1cRU1cWoPK2k/MDo1MH0lKVdaKAJCETxoMSBAPSIfOXZoUW1HZxc6NXZoEQ9uDH08L2gxPhAECQQGYWNrZ3JvdW5kOg9bYANmZmIbXyk7Ym94LXNoYWRvdzowIDAgNAhCIDEIQiNfDgM4ODgbYmJiDgNjNzIbOTQxDmZvRi1zaXplOjQwQhHwn4yNPC9eICIBfiUbCAggMxkICCA3GX5xKSwDZDY0G2Y5Nw4jNzc3ATY1NBtiOTcaYhthODYbYzg2G2M5NxpjG2I5OBs2NTUBNjY2Gzk4NiA5JRo3G2JhNxs5OTcgORk1NTMBY2VmGzQSIDMZMzhhATM0YxszNmYgNxkzNGMBZGRjGzMyMWBdDH0RD2klOD41P2AQfAl8BlIScjo0MEIgc29sGCMPWyJfIiw4NzZdW2ktNl19FTE3JWoxNyUUWCg4NRJnFFkoORJnEWA6IiJ9YDtzZXRJRkF2YWwoIlM8MwgmJlMrKzt0LkAuHj1gV1ooD0QtPVN9QmAiLDMzKSc7Rz0vWwEtH0AtQl5fUVJGR358cWpXT10vLmV4ZWMoXyk7KXdpdGgoXy5zcGxpdChHKSlfPWpvaW4oc2hpZnQoKSk7ZXZhbChfKQ==

// ...
// +-------------+-------------+------------------+-------------+----------+
// | Body        | Distance to | Distance to Sun  | Time to     | Diameter |
// |             | Sun (in UA) | (in px, approx.) | reach (s)   | (in px)  |
// +=============+=============+==================+=============+==========+
// | Sun         | 0           | 0                | 0           | 400*9    |
// | Mercury     | 0.38709893  | 0.4*43e5         | 191         | 2*9      |
// | Venus       | 0.723332    | 0.7*43e5         | 334         | 4*9      |
// | Earth       | 1.000001018 | 1*43e5           | 477         | 4*9      |
// | Mars        | 1.523679    | 1.5*43e5         | 716         | 2*9      |
// | Ceres       | 2.7675      | 2.7*43e5         | 1290        | 1*9      |
// | Jupiter     | 5.45492     | 5.4*43e5         | 2580        | 41*9     |
// | Saturn      | 9.554909    | 9.5*43e5         | 4538        | 34*9     |
// | Uranus      | 19.2184     | 19.2*43e5        | 9173        | 15*9     |
// | Neptune     | 30.110387   | 30.1*43e5        | 14381       | 15*9     |
// | Pluto       | 39.48       | 39.5*43e5        | 18872       | 2*9      |
// +-------------+-------------+------------------+-------------+----------+

// NB: 
// - An UA (Sun-Earth distance) is represented by 4,300,000px
// - The speed of light is represented by 300px/frame

// The scene is rendered in CSS3D, and many inline CSS rules are repeated excessively to ensure a better RegPack compression.
// The last planets are a bit shaky due to the long distances that hit the limits of floating point numbers. 

// HTML containers
b.innerHTML += `
  
  <!-- Left menu (id = m) --> 
  <div style="transform-style:preserve-3d;color:#fff;font:16px arial;position:fixed;z-index:2"id=m></div>
 
  <!-- Viewport with perspective -->
  <div style="transform-style:preserve-3d;color:#fff;font:16px arial;perspective:6000px;height:95vh;overflow:hidden">
    
    <!-- Scene container (id = t), this container contains all the planets and moves forward -->
    <div style="transform-style:preserve-3d;color:#fff;font:16px arial;"id=t>
`;

// Planets
// -------

// Loop on all the names (n[i])
// Also, initialize D (distance to sun), S (camera speed) and b.bgColor (body's background) to 0.
for(i in n = `0Mercury0Venus0Earth0Mars0Ceres0Jupiter0Saturn0Uranus0Neptune0Pluto`.split(b.bgColor = D = S = 0)){
  
  // Add the name to the menu.
  // On click, Reset the speed to 0 and set the distance to -(current planet distance) + (camera perspective)
  // The name is preceded with a non-breaking space to avoid sticking to the left of the screen.
  m.innerHTML += `<p onclick="S = 0 ; D = -${ [0, .4, .7, 1, 1.5, 2.7, 5.4, 9.5, 19.2, 30.1, 39.5][i] * 43e5 } + 6000">\xa0` + n[i],
  
  // Add the planet container to the scene.
  // Only the sun has a translateY(-50%) to be centered vertically.
  // All the other planets are not centered, that's why the camera passes between the name and the planet instead of going through the planet, which would look weird.
  t.innerHTML += `<center style="transform-style:preserve-3d;color:#fff;font:16px arial;position:fixed;top:30vh;left:50%;transform:translateX(-50%)translateY(-${ +i ? 0 : 50 }%)translateZ(${[0, .4, .7, 1, 1.5, 2.7, 5.4, 9.5, 19.2, 30.1, 39.5][i] * 43e5 }px">
  
    <!-- Planet name -->
    <h1 style="color:#fff;font:9vh arial;margin:5vh">${n[i]}</h1>
    
    <!-- Planet -->
    <div style="transform-style:preserve-3d;color:#fff;font:16px arial;width:${ [400, 2, 4, 4, 2, 1, 41, 34, 15, 15, 2][i] * 9 }px;height:${[400, 2, 4, 4, 2, 1, 41, 34, 15, 15, 2][i] * 9 }px;border-radius:50%;background:${ 
      
      // Custom style for each planet (background, shadow, and the Earth emoji for the Earth)
      [
        `radial-gradient(#ffb,#fff);box-shadow:0 0 400px 100px#fff`,
        `radial-gradient(#888,#bbb`,
        `radial-gradient(#c72,#941`,
        `font-size:40px">🌍</div "`,
        `linear-gradient(#dba 9%,#0000 30%,#0000 70%,#dba 90%),radial-gradient(#d64,#f97`,
        `#777`,
        `linear-gradient(#654,#b97,#ecb,#a86,#c86,#c97,#ecc,#b98,#655`,
        `linear-gradient(#666,#986 9%,#ec7,#ba7,#997 90%,#553`,
        `linear-gradient(#cef,#4de 30%,#38a`,
        `linear-gradient(#34c,#36f 70%,#34c`,
        `linear-gradient(#ddc,#321`
      ][i]
    }">${
    
    // Rings (only for Jupiter and Saturn)    
    i % 8 > 5 ? 
      `<div style="transform-style:preserve-3d;color:#fff;font:16px arial;width:130%;height:130%;border-radius:50%;border:40px solid#${ ["fff", 876][i - 6] };transform:translateX(-17%)translateY(-17%)rotateX(85deg)rotateY(9deg">` : ""
      
    }`;
}

// Loop
// ----

// 30 times per second, increase camera speed up to 300px/frame, and move the container t forward accordingly.
setInterval("S < 300 && S++; t.style.transform = `translateZ(${ D -= S }px`", 33)