├── .gitattributes
├── .gitignore
├── README.md
├── dump.html
├── final.complete.golfed.html
├── final.html
├── final.min.golfed.html
├── final.min.html
├── final.min.pack.html
├── golfed.commented.html
├── js1k17.html
├── quine.html
├── quine2.html
├── recto.png
├── shim.html
├── test.html
├── test.min.html
├── verso.png
├── wallpaper.html
└── wallpaper.png


/.gitattributes:
--------------------------------------------------------------------------------
 1 | # Auto detect text files and perform LF normalization
 2 | * text=auto
 3 | 
 4 | # Custom for Visual Studio
 5 | *.cs     diff=csharp
 6 | 
 7 | # Standard to msysgit
 8 | *.doc	 diff=astextplain
 9 | *.DOC	 diff=astextplain
10 | *.docx diff=astextplain
11 | *.DOCX diff=astextplain
12 | *.dot  diff=astextplain
13 | *.DOT  diff=astextplain
14 | *.pdf  diff=astextplain
15 | *.PDF	 diff=astextplain
16 | *.rtf	 diff=astextplain
17 | *.RTF	 diff=astextplain
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Windows image file caches
 2 | Thumbs.db
 3 | ehthumbs.db
 4 | 
 5 | # Folder config file
 6 | Desktop.ini
 7 | 
 8 | # Recycle Bin used on file shares
 9 | $RECYCLE.BIN/
10 | 
11 | # Windows Installer files
12 | *.cab
13 | *.msi
14 | *.msm
15 | *.msp
16 | 
17 | # Windows shortcuts
18 | *.lnk
19 | 
20 | # =========================
21 | # Operating System Files
22 | # =========================
23 | 
24 | # OSX
25 | # =========================
26 | 
27 | .DS_Store
28 | .AppleDouble
29 | .LSOverride
30 | 
31 | # Thumbnails
32 | ._*
33 | 
34 | # Files that might appear in the root of a volume
35 | .DocumentRevisions-V100
36 | .fseventsd
37 | .Spotlight-V100
38 | .TemporaryItems
39 | .Trashes
40 | .VolumeIcon.icns
41 | 
42 | # Directories potentially created on remote AFP share
43 | .AppleDB
44 | .AppleDesktop
45 | Network Trash Folder
46 | Temporary Items
47 | .apdisk
48 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | by @MaximeEuziere, @innovati and @subzey
 2 | 
 3 | JS1K 2017 ENTRY: PERIOD1K RELOADED
 4 | ===
 5 | 
 6 | (Full rewrite, HTML + ES6, no canvas, no JS packing. It's centered, responsive and with even more information!)
 7 | 
 8 | - Commented source: http://codegolf.github.io/period1k/golfed.commented.html
 9 | - Minified and packed (1024b JS): http://codegolf.github.io/period1k/js1k17.html
10 | 
11 | NB: This demo generates about 26kb of HTML code!
12 | 
13 | ----
14 | 
15 | JS1K 2016 ENTRY: PERIOD1K
16 | ===
17 | 
18 | (updated in june 2016 with the names of the four last elements)
19 | 
20 | JS1k submission:
21 | 
22 | - Commented source: http://codegolf.github.io/period1k/final.html
23 | - Minified (1764b JS): http://codegolf.github.io/period1k/final.min.html
24 | - Minified and packed (1020b JS): http://codegolf.github.io/period1k/final.min.pack.html
25 | 
26 | Wallpaper:
27 | 
28 | - 4000x3000 (0.3Mb, PNG): http://codegolf.github.io/period1k/wallpaper.png
29 | 
30 | ----
31 | 
32 | Legend
33 | ===
34 | 
35 | ````
36 |     :        : 
37 |     : group  :
38 |  ...:________:
39 |     |        |
40 |  p  |  1  G -|--> state at room temperature (Gas / Liquid / Solid)
41 |  e  |  ^-----|--> atomic number (Z)
42 |  r  |   H ---|--> name
43 |  i  |        |  
44 |  o  |  1.00 -|--> atomic mass + stability (* = has no stable isotope)
45 |  d  |       -|--> type: green = noble gas
46 |  ...|________|          yellow-green = halogen
47 |                         dark purple = metalloid
48 |                         dark blue = poor metal
49 |                         blue = transition metal
50 |                         pale green = lanthanoid
51 |                         pale blue = actinoid
52 |                         brown = alkaline earth metal
53 |                         red = alkali metal
54 |                         purple = non-metal
55 | ````
56 | 


--------------------------------------------------------------------------------
/dump.html:
--------------------------------------------------------------------------------
1 | <body id="b" text="#fff" bgcolor="0"><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -21vw);left:13vw;background:hsl(315,70%,40%">1 G<h2 style="text-shadow:.15vw .15vw#222">H</h2>1.008 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -21vw);left:81vw;background:hsl(105,70%,40%">2 G<h2 style="text-shadow:.15vw .15vw#222">He</h2>4.003 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -16.5vw);left:13vw;background:hsl(0,70%,40%">3 S<h2 style="text-shadow:.15vw .15vw#222">Li</h2>6.941 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -16.5vw);left:17vw;background:hsl(35,70%,40%">4 S<h2 style="text-shadow:.15vw .15vw#222">Be</h2>9.01 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -16.5vw);left:61vw;background:hsl(280,70%,40%">5 S<h2 style="text-shadow:.15vw .15vw#222">B</h2>10.81 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -16.5vw);left:65vw;background:hsl(315,70%,40%">6 S<h2 style="text-shadow:.15vw .15vw#222">C</h2>12.01 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -16.5vw);left:69vw;background:hsl(315,70%,40%">7 G<h2 style="text-shadow:.15vw .15vw#222">N</h2>14.01 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -16.5vw);left:73vw;background:hsl(315,70%,40%">8 G<h2 style="text-shadow:.15vw .15vw#222">O</h2>16.00 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -16.5vw);left:77vw;background:hsl(70,70%,40%">9 G<h2 style="text-shadow:.15vw .15vw#222">F</h2>19.00 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -16.5vw);left:81vw;background:hsl(105,70%,40%">10 G<h2 style="text-shadow:.15vw .15vw#222">Ne</h2>20.18 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -12vw);left:13vw;background:hsl(0,70%,40%">11 S<h2 style="text-shadow:.15vw .15vw#222">Na</h2>22.99 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -12vw);left:17vw;background:hsl(35,70%,40%">12 S<h2 style="text-shadow:.15vw .15vw#222">Mg</h2>24.31 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -12vw);left:61vw;background:hsl(245,70%,40%">13 S<h2 style="text-shadow:.15vw .15vw#222">Al</h2>26.98 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -12vw);left:65vw;background:hsl(280,70%,40%">14 S<h2 style="text-shadow:.15vw .15vw#222">Si</h2>28.09 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -12vw);left:69vw;background:hsl(315,70%,40%">15 S<h2 style="text-shadow:.15vw .15vw#222">P</h2>30.97 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -12vw);left:73vw;background:hsl(315,70%,40%">16 S<h2 style="text-shadow:.15vw .15vw#222">S</h2>32.06 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -12vw);left:77vw;background:hsl(70,70%,40%">17 G<h2 style="text-shadow:.15vw .15vw#222">Cl</h2>35.45 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -12vw);left:81vw;background:hsl(105,70%,40%">18 G<h2 style="text-shadow:.15vw .15vw#222">Ar</h2>39.95 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -7.5vw);left:13vw;background:hsl(0,70%,40%">19 S<h2 style="text-shadow:.15vw .15vw#222">K</h2>39.10 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -7.5vw);left:17vw;background:hsl(35,70%,40%">20 S<h2 style="text-shadow:.15vw .15vw#222">Ca</h2>40.08 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -7.5vw);left:21vw;background:hsl(210,70%,40%">21 S<h2 style="text-shadow:.15vw .15vw#222">Sc</h2>44.96 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -7.5vw);left:25vw;background:hsl(210,70%,40%">22 S<h2 style="text-shadow:.15vw .15vw#222">Ti</h2>47.87 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -7.5vw);left:29vw;background:hsl(210,70%,40%">23 S<h2 style="text-shadow:.15vw .15vw#222">V</h2>50.94 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -7.5vw);left:33vw;background:hsl(210,70%,40%">24 S<h2 style="text-shadow:.15vw .15vw#222">Cr</h2>52.00 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -7.5vw);left:37vw;background:hsl(210,70%,40%">25 S<h2 style="text-shadow:.15vw .15vw#222">Mn</h2>54.94 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -7.5vw);left:41vw;background:hsl(210,70%,40%">26 S<h2 style="text-shadow:.15vw .15vw#222">Fe</h2>55.85 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -7.5vw);left:45vw;background:hsl(210,70%,40%">27 S<h2 style="text-shadow:.15vw .15vw#222">Co</h2>58.93 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -7.5vw);left:49vw;background:hsl(210,70%,40%">28 S<h2 style="text-shadow:.15vw .15vw#222">Ni</h2>58.69 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -7.5vw);left:53vw;background:hsl(210,70%,40%">29 S<h2 style="text-shadow:.15vw .15vw#222">Cu</h2>63.55 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -7.5vw);left:57vw;background:hsl(210,70%,40%">30 S<h2 style="text-shadow:.15vw .15vw#222">Zn</h2>65.38 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -7.5vw);left:61vw;background:hsl(245,70%,40%">31 S<h2 style="text-shadow:.15vw .15vw#222">Ga</h2>69.72 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -7.5vw);left:65vw;background:hsl(280,70%,40%">32 S<h2 style="text-shadow:.15vw .15vw#222">Ge</h2>72.63 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -7.5vw);left:69vw;background:hsl(280,70%,40%">33 S<h2 style="text-shadow:.15vw .15vw#222">As</h2>74.92 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -7.5vw);left:73vw;background:hsl(315,70%,40%">34 S<h2 style="text-shadow:.15vw .15vw#222">Se</h2>78.97 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -7.5vw);left:77vw;background:hsl(70,70%,40%">35 L<h2 style="text-shadow:.15vw .15vw#222">Br</h2>79.90 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -7.5vw);left:81vw;background:hsl(105,70%,40%">36 G<h2 style="text-shadow:.15vw .15vw#222">Kr</h2>83.80 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -3vw);left:13vw;background:hsl(0,70%,40%">37 S<h2 style="text-shadow:.15vw .15vw#222">Rb</h2>85.47 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -3vw);left:17vw;background:hsl(35,70%,40%">38 S<h2 style="text-shadow:.15vw .15vw#222">Sr</h2>87.62 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -3vw);left:21vw;background:hsl(210,70%,40%">39 S<h2 style="text-shadow:.15vw .15vw#222">Y</h2>88.91 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -3vw);left:25vw;background:hsl(210,70%,40%">40 S<h2 style="text-shadow:.15vw .15vw#222">Zr</h2>91.22 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -3vw);left:29vw;background:hsl(210,70%,40%">41 S<h2 style="text-shadow:.15vw .15vw#222">Nb</h2>92.91 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -3vw);left:33vw;background:hsl(210,70%,40%">42 S<h2 style="text-shadow:.15vw .15vw#222">Mo</h2>95.95 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -3vw);left:37vw;background:hsl(210,70%,40%">43 S<h2 style="text-shadow:.15vw .15vw#222">Tc</h2>97.91*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -3vw);left:41vw;background:hsl(210,70%,40%">44 S<h2 style="text-shadow:.15vw .15vw#222">Ru</h2>101.07 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -3vw);left:45vw;background:hsl(210,70%,40%">45 S<h2 style="text-shadow:.15vw .15vw#222">Rh</h2>102.91 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -3vw);left:49vw;background:hsl(210,70%,40%">46 S<h2 style="text-shadow:.15vw .15vw#222">Pd</h2>106.42 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -3vw);left:53vw;background:hsl(210,70%,40%">47 S<h2 style="text-shadow:.15vw .15vw#222">Ag</h2>107.87 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -3vw);left:57vw;background:hsl(210,70%,40%">48 S<h2 style="text-shadow:.15vw .15vw#222">Cd</h2>112.41 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -3vw);left:61vw;background:hsl(245,70%,40%">49 S<h2 style="text-shadow:.15vw .15vw#222">In</h2>114.82 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -3vw);left:65vw;background:hsl(245,70%,40%">50 S<h2 style="text-shadow:.15vw .15vw#222">Sn</h2>118.71 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -3vw);left:69vw;background:hsl(280,70%,40%">51 S<h2 style="text-shadow:.15vw .15vw#222">Sb</h2>121.76 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -3vw);left:73vw;background:hsl(280,70%,40%">52 S<h2 style="text-shadow:.15vw .15vw#222">Te</h2>127.60 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -3vw);left:77vw;background:hsl(70,70%,40%">53 S<h2 style="text-shadow:.15vw .15vw#222">I</h2>126.90 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + -3vw);left:81vw;background:hsl(105,70%,40%">54 G<h2 style="text-shadow:.15vw .15vw#222">Xe</h2>131.29 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 1.5vw);left:13vw;background:hsl(0,70%,40%">55 S<h2 style="text-shadow:.15vw .15vw#222">Cs</h2>132.91 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 1.5vw);left:17vw;background:hsl(35,70%,40%">56 S<h2 style="text-shadow:.15vw .15vw#222">Ba</h2>137.33 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 15vw);left:21vw;background:hsl(140,70%,40%">57 S<h2 style="text-shadow:.15vw .15vw#222">La</h2>138.91 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 15vw);left:25vw;background:hsl(140,70%,40%">58 S<h2 style="text-shadow:.15vw .15vw#222">Ce</h2>140.12 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 15vw);left:29vw;background:hsl(140,70%,40%">59 S<h2 style="text-shadow:.15vw .15vw#222">Pr</h2>140.91 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 15vw);left:33vw;background:hsl(140,70%,40%">60 S<h2 style="text-shadow:.15vw .15vw#222">Nd</h2>144.24 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 15vw);left:37vw;background:hsl(140,70%,40%">61 S<h2 style="text-shadow:.15vw .15vw#222">Pm</h2>144.91*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 15vw);left:41vw;background:hsl(140,70%,40%">62 S<h2 style="text-shadow:.15vw .15vw#222">Sm</h2>150.36 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 15vw);left:45vw;background:hsl(140,70%,40%">63 S<h2 style="text-shadow:.15vw .15vw#222">Eu</h2>151.96 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 15vw);left:49vw;background:hsl(140,70%,40%">64 S<h2 style="text-shadow:.15vw .15vw#222">Gd</h2>157.25 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 15vw);left:53vw;background:hsl(140,70%,40%">65 S<h2 style="text-shadow:.15vw .15vw#222">Tb</h2>158.93 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 15vw);left:57vw;background:hsl(140,70%,40%">66 S<h2 style="text-shadow:.15vw .15vw#222">Dy</h2>162.50 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 15vw);left:61vw;background:hsl(140,70%,40%">67 S<h2 style="text-shadow:.15vw .15vw#222">Ho</h2>164.93 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 15vw);left:65vw;background:hsl(140,70%,40%">68 S<h2 style="text-shadow:.15vw .15vw#222">Er</h2>167.26 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 15vw);left:69vw;background:hsl(140,70%,40%">69 S<h2 style="text-shadow:.15vw .15vw#222">Tm</h2>168.93 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 15vw);left:73vw;background:hsl(140,70%,40%">70 S<h2 style="text-shadow:.15vw .15vw#222">Yb</h2>173.05 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 1.5vw);left:21vw;background:hsl(140,70%,40%">71 S<h2 style="text-shadow:.15vw .15vw#222">Lu</h2>174.97 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 1.5vw);left:25vw;background:hsl(210,70%,40%">72 S<h2 style="text-shadow:.15vw .15vw#222">Hf</h2>178.49 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 1.5vw);left:29vw;background:hsl(210,70%,40%">73 S<h2 style="text-shadow:.15vw .15vw#222">Ta</h2>180.95 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 1.5vw);left:33vw;background:hsl(210,70%,40%">74 S<h2 style="text-shadow:.15vw .15vw#222">W</h2>183.84 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 1.5vw);left:37vw;background:hsl(210,70%,40%">75 S<h2 style="text-shadow:.15vw .15vw#222">Re</h2>186.21 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 1.5vw);left:41vw;background:hsl(210,70%,40%">76 S<h2 style="text-shadow:.15vw .15vw#222">Os</h2>190.23 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 1.5vw);left:45vw;background:hsl(210,70%,40%">77 S<h2 style="text-shadow:.15vw .15vw#222">Ir</h2>192.22 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 1.5vw);left:49vw;background:hsl(210,70%,40%">78 S<h2 style="text-shadow:.15vw .15vw#222">Pt</h2>195.08 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 1.5vw);left:53vw;background:hsl(210,70%,40%">79 S<h2 style="text-shadow:.15vw .15vw#222">Au</h2>196.97 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 1.5vw);left:57vw;background:hsl(210,70%,40%">80 L<h2 style="text-shadow:.15vw .15vw#222">Hg</h2>200.59 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 1.5vw);left:61vw;background:hsl(245,70%,40%">81 S<h2 style="text-shadow:.15vw .15vw#222">Tl</h2>204.38 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 1.5vw);left:65vw;background:hsl(245,70%,40%">82 S<h2 style="text-shadow:.15vw .15vw#222">Pb</h2>207.20 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 1.5vw);left:69vw;background:hsl(245,70%,40%">83 S<h2 style="text-shadow:.15vw .15vw#222">Bi</h2>208.98 </center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 1.5vw);left:73vw;background:hsl(245,70%,40%">84 S<h2 style="text-shadow:.15vw .15vw#222">Po</h2>208.98*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 1.5vw);left:77vw;background:hsl(70,70%,40%">85 S<h2 style="text-shadow:.15vw .15vw#222">At</h2>209.99*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 1.5vw);left:81vw;background:hsl(105,70%,40%">86 G<h2 style="text-shadow:.15vw .15vw#222">Rn</h2>222.02*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 6vw);left:13vw;background:hsl(0,70%,40%">87 S<h2 style="text-shadow:.15vw .15vw#222">Fr</h2>223.02*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 6vw);left:17vw;background:hsl(35,70%,40%">88 S<h2 style="text-shadow:.15vw .15vw#222">Ra</h2>226.03*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 19.5vw);left:21vw;background:hsl(175,70%,40%">89 S<h2 style="text-shadow:.15vw .15vw#222">Ac</h2>227.03*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 19.5vw);left:25vw;background:hsl(175,70%,40%">90 S<h2 style="text-shadow:.15vw .15vw#222">Th</h2>232.04*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 19.5vw);left:29vw;background:hsl(175,70%,40%">91 S<h2 style="text-shadow:.15vw .15vw#222">Pa</h2>231.04*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 19.5vw);left:33vw;background:hsl(175,70%,40%">92 S<h2 style="text-shadow:.15vw .15vw#222">U</h2>238.03*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 19.5vw);left:37vw;background:hsl(175,70%,40%">93 S<h2 style="text-shadow:.15vw .15vw#222">Np</h2>237.05*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 19.5vw);left:41vw;background:hsl(175,70%,40%">94 S<h2 style="text-shadow:.15vw .15vw#222">Pu</h2>244.06*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 19.5vw);left:45vw;background:hsl(175,70%,40%">95 S<h2 style="text-shadow:.15vw .15vw#222">Am</h2>243.06*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 19.5vw);left:49vw;background:hsl(175,70%,40%">96 S<h2 style="text-shadow:.15vw .15vw#222">Cm</h2>247.07*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 19.5vw);left:53vw;background:hsl(175,70%,40%">97 S<h2 style="text-shadow:.15vw .15vw#222">Bk</h2>247.07*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 19.5vw);left:57vw;background:hsl(175,70%,40%">98 S<h2 style="text-shadow:.15vw .15vw#222">Cf</h2>251.08*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 19.5vw);left:61vw;background:hsl(175,70%,40%">99 S<h2 style="text-shadow:.15vw .15vw#222">Es</h2>252.08*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 19.5vw);left:65vw;background:hsl(175,70%,40%">100 S<h2 style="text-shadow:.15vw .15vw#222">Fm</h2>257.10*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 19.5vw);left:69vw;background:hsl(175,70%,40%">101 S<h2 style="text-shadow:.15vw .15vw#222">Md</h2>258.10*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 19.5vw);left:73vw;background:hsl(175,70%,40%">102 S<h2 style="text-shadow:.15vw .15vw#222">No</h2>259.10*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 6vw);left:21vw;background:hsl(175,70%,40%">103 S<h2 style="text-shadow:.15vw .15vw#222">Lr</h2>266.12*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 6vw);left:25vw;background:hsl(210,70%,40%">104 S<h2 style="text-shadow:.15vw .15vw#222">Rf</h2>267.12*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 6vw);left:29vw;background:hsl(210,70%,40%">105 S<h2 style="text-shadow:.15vw .15vw#222">Db</h2>268.13*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 6vw);left:33vw;background:hsl(210,70%,40%">106 S<h2 style="text-shadow:.15vw .15vw#222">Sg</h2>271.13*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 6vw);left:37vw;background:hsl(210,70%,40%">107 S<h2 style="text-shadow:.15vw .15vw#222">Bh</h2>270.13*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 6vw);left:41vw;background:hsl(210,70%,40%">108 S<h2 style="text-shadow:.15vw .15vw#222">Hs</h2>277.15*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 6vw);left:45vw;background:hsl(210,70%,40%">109 S<h2 style="text-shadow:.15vw .15vw#222">Mt</h2>278.16*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 6vw);left:49vw;background:hsl(210,70%,40%">110 S<h2 style="text-shadow:.15vw .15vw#222">Ds</h2>281.17*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 6vw);left:53vw;background:hsl(210,70%,40%">111 S<h2 style="text-shadow:.15vw .15vw#222">Rg</h2>282.17*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 6vw);left:57vw;background:hsl(210,70%,40%">112 S<h2 style="text-shadow:.15vw .15vw#222">Cn</h2>285.18*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 6vw);left:61vw;background:hsl(245,70%,40%">113 S<h2 style="text-shadow:.15vw .15vw#222">Nh</h2>286.19*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 6vw);left:65vw;background:hsl(245,70%,40%">114 S<h2 style="text-shadow:.15vw .15vw#222">Fl</h2>289.19*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 6vw);left:69vw;background:hsl(245,70%,40%">115 S<h2 style="text-shadow:.15vw .15vw#222">Mc</h2>289.19*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 6vw);left:73vw;background:hsl(245,70%,40%">116 S<h2 style="text-shadow:.15vw .15vw#222">Lv</h2>293.20*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 6vw);left:77vw;background:hsl(70,70%,40%">117 S<h2 style="text-shadow:.15vw .15vw#222">Ts</h2>294.21*</center><center style="font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + 6vw);left:81vw;background:hsl(105,70%,40%">118 G<h2 style="text-shadow:.15vw .15vw#222">Og</h2>294.21*</center></body>


--------------------------------------------------------------------------------
/final.complete.golfed.html:
--------------------------------------------------------------------------------
1 | <body id=b bgColor=0><script>x=y=l=10;m=[];n=0;for(i in e=']|^]]]v,]]t,D,_]t.`]]tFa]]uEdtF bvEd]]tF f|]DtFh|tG g]tHf_I c]uHh^tH ]f|]vG]jtHD]ivG]jtJ hu|tHf`J"hvKiM f^DtLh|]t|JD jtLlMD ]jvKDkvJD kwL]kvLD kwNmMD _c`vL]lND ]jvNlND k|]Pj|`O ]i]OpLD"lPm_LD"]lQnND ]]jQ]qR ptRrPD$]]iU]l.QD h_,tTm.QD"kuVl]W"h^tXlXmtVnU,]iXmSD.]]guVDjE|N,D,D,D"gtDtXhS,DDD ]euZfL-KDD ]ctJ-QfH.OD"]auD,D.Te|E-S,D"du-Ye/U,D.],bv,D,D,Uc|]2F-M,D,!]a|]|0D,V]b5Q,DD ]av/|,I,Od4N|GD"]bt0L|N]c1D,U,D c,t.D-T],cD3D,L6^,|4M3`7D,D,D,D4],b8D4gC],d=D,g|A],b;F,e.D|1D,D0],`.D,J,c.H,D.],],_F,E,G,],0x-H,D2]x]|-|E|J-_|^yD,D,D,D,D0]x]xD,M.^x,x,x/D,D,D-x,z,D,D,K,y-x|x2x,x]y,Dx3y-y{,x,x,y-y,3x.y,x.x,z|x|.x3~-x,x0|-y|./|/x-},0x.x,y|x1x.x,,x-|x,x,-zx..x,/-,')if(s=e.charCodeAt(i),26>s)y++,z=s-18,l=x=l+z,m[++n]="";else{for(j in f=[25,29,43,67,92,115,119,123])s>f[j]&&(z=s-f[j],m[n]+="<span style=background:hsl("+f[j]*89+",45%,45%)>.");x+=z};for(i=j=z=0;j<178;j++,(z=z?z-1:{117:20,0:16,3:10,11:10,69:4}[i]|0)||(i+={117:-61,87:15,69:18,55:15}[i]|1))[w,v]="H1He1LiBeBCN1O1F1Ne1NaMgAlSiPSCl1Ar1KCaScTiVCrMnFeCoNiCuZnGaGeAsSeBr2Kr1RbSrYZrNbMoTcRuRhPdAgCdInSnSbTeIXe1CsBaLaCePrNdPmSmEuGdTbDyHoErTmYbLuHfTaWReOsIrPtAuHg2TlPbBiPoAtRn1FrRaAcThPaUNpPuAmCmBkCfEsFmMdNoLrRfDbSgBhHsMtDsRgCnNhFlMcLvTsOg1".split(/(?=[A-Z])/)[i].split(/(?=\d)/),b.innerHTML+=`<center style="font:1vw arial;float:left;width:4vw;margin:.2vw;padding:.4vw;color:#fff${";"[z]}background:hsl(${35*(.1*("#{p 7{n 7{bbbbbnp7{bbbbbmx7{LLLLLLLNbbbbmm7{WWWWWWWXbbbbmm7".charCodeAt(i/2)-32)+"")[i%2*2]|0},70%,40%)">${i+1} ${"SGL"[v||0]}<h2>${w}</h2>`+((parseInt("xcykzmy9w5sdqtp8qgmmnbjvk6g5h1cyf9knb66sd8e7fmbgci7x9d1l7z5yawbvb4f9aqegbzau7b6m475j3v5j3j66338l86bvd8mcdaidfrkxi7eg9jbo6fegbsjdgxjqjdiqg95v436r6h7e6vax9ca68bb9eofed8641ts4nsp1kprihmtxk3wgmkqljhnij6q0lohctqpel3mbcfotkilrhfioedfl8hci8713".substr(2*i,2),36)+256*i-(68<i?570:1100))/100).toFixed(2)+"* "[42!=i^60!=i^83>i]+"<br>"+(z?"":m[i+1])</script>


--------------------------------------------------------------------------------
/final.html:
--------------------------------------------------------------------------------
  1 | <meta charset=utf-8>
  2 | <body id=b>
  3 | <center>
  4 | <canvas id=a width=1090 height=700>
  5 | <script>
  6 | c=a.getContext("2d");
  7 | a.style.maxWidth="99%";
  8 | 
  9 | 
 10 | /*** entry ***/
 11 | 
 12 | // ================= //
 13 | //     JS1k'16       //
 14 | //                   //
 15 | //  PERIOD1K TABLE   //
 16 | //                   //
 17 | //        by         //
 18 | //  Maxime Euzière   //
 19 | //   Tommy Hodgins   //
 20 | // Anton Khlynovskiy //
 21 | // ================= //
 22 | 
 23 | // Updated in june 2016 with the four new elements names
 24 | 
 25 | // --------------
 26 | //  Introduction
 27 | // --------------
 28 | 
 29 | // This demo draws a periodic table of chemical elements on a 1090*700 px canvas, including as much useful information as possible, in 1kb.
 30 | // It is drawn from top-left to bottom-right using a single loop and two variables:
 31 | // i represents the current atomic number (values: 1-56,71-88,103-118-57-70,89-102).
 32 | // j represents the current cell of the periodic table (including "gaps", values: 0-178).
 33 | // The cells measure 58*58px and are separated by 2px gutters.
 34 | // The page's background is colored in black using the ancestral hack "b.bgColor=0" (b is the page's <body>).
 35 | // The coordinates of an element are computed from j: horizontally "j%18*60", vertically "~~(j/18)*60".
 36 | // These coordinates are repeated many times in the source code, instead of being set in variables like x and y, to optimize RegPack compression.
 37 | 
 38 | for(i=j=b.bgColor=0;j<178;){
 39 | 
 40 |   // --------------------
 41 |   //  1: Element's group
 42 |   // --------------------
 43 | 
 44 |   // The periodic table represents the element groups as a background color for each element.
 45 |   // According to https://en.wikipedia.org/wiki/Names_for_sets_of_chemical_elements ,
 46 |   // There are a ton of different and overlapping element groups, and all periodic tables are a little different because of that.
 47 |   // Here's our classification:
 48 |   
 49 |   // 0: Alkali metals – Li, Na, K, Rb, Cs, Fr.
 50 |   // 1: Alkaline earth metals – Be, Mg, Ca, Sr, Ba, Ra.
 51 |   // 2: Halogens – F, Cl, Br, I, At.
 52 |   // 3: Noble gases – He, Ne, Ar, Kr, Xe, Rn.
 53 |   // 4: Lanthanoids – La, Ce, Pr, Nd, Pm, Sm, Eu, Gd, Tb, Dy, Ho, Er, Tm, Yb, Lu.
 54 |   // 5: Actinoids – Ac, Th, Pa, U, Np, Pu, Am, Cm, Bk, Cf, Es, Fm, Md, No, Lr.
 55 |   // 6: Transition metals – Elements in groups 3 to 12.
 56 |   // 7: poor metals: Al, Ga, In, Sn, Tl, Pb, Bi, Po.
 57 |   // 8: Metalloids – B, Si, Ge, As, Sb, Te, At (too).
 58 |   // 9: non-metals: H, C, N, O, P, S, Se.
 59 | 
 60 |   // These sets are numbered from 0 to 9 and placed in a 118-char string (1 char per element).
 61 |   // Each element's char is multiplied by 35 (thanks to duck-typing) to define the hue of the hsl background color.
 62 |   // Then the rectangle is drawn
 63 |   
 64 |   c.fillStyle="hsl("+"9301899923017899230166666666667889230166666666667788230144444444444444466666666677772301555555555555555666666666777723"[i]*35+",48%,48%)";
 65 |   c.fillRect(j%18*60,~~(j/18)*60+30,58,58);
 66 | 
 67 |   // -------------------
 68 |   //  2. Element's name 
 69 |   // -------------------
 70 | 
 71 |   // The 118 elements' abbreviated names are drawn in the middle of each cell with a little shadow effect.
 72 |   // These names were concatenated in a long string like that:
 73 |   // 
 74 |   // ["H","He","Li","Be","B","C","N","O","F","Ne","Na","Mg","Al","Si","P","S","Cl","Ar","K","Ca","Sc","Ti",
 75 |   // "V","Cr","Mn","Fe","Co","Ni","Cu","Zn","Ga","Ge","As","Se","Br","Kr","Rb","Sr","Y","Zr","Nb","Mo","Tc",
 76 |   // "Ru","Rh","Pd","Ag","Cd","In","Sn","Sb","Te","I","Xe","Cs","Ba","La","Ce","Pr","Nd","Pm","Sm","Eu","Gd",
 77 |   // "Tb","Dy","Ho","Er","Tm","Yb","Lu","Hf","Ta","W","Re","Os","Ir","Pt","Au","Hg","Tl","Pb","Bi","Po","At",
 78 |   // "Rn","Fr","Ra","Ac","Th","Pa","U","Np","Pu","Am","Cm","Bk","Cf","Es","Fm","Md","No","Lr","Rf","Db","Sg",
 79 |   // "Bh","Hs","Mt","Ds","Rg","Cn","Nh","Fl","Mc","Lv","Ts","Og].join();
 80 |   //
 81 |   // The resulting string, used in the code below, is split before each uppercase letter to retrieve the array above.
 82 |   // The name is drawn two times (in gray and in white) with a small offset to make a text-shadow effect.
 83 |   // The two long fillText() statements are repeated on purpose, to optimize RegPack compression.
 84 |   
 85 |   // Set font size, centering, shadow color
 86 |   
 87 |   c.font="bold 15pt arial";
 88 |   c.textAlign="center";
 89 |   c.fillStyle="#444";
 90 |   
 91 |   // Draw text shadow
 92 |   
 93 |   c.fillText("HHeLiBeBCNOFNeNaMgAlSiPSClArKCaScTiVCrMnFeCoNiCuZnGaGeAsSeBrKrRbSrYZrNbMoTcRuRhPdAgCdInSnSbTeIXeCsBaLaCePrNdPmSmEuGdTbDyHoErTmYbLuHfTaWReOsIrPtAuHgTlPbBiPoAtRnFrRaAcThPaUNpPuAmCmBkCfEsFmMdNoLrRfDbSgBhHsMtDsRgCnNhFlMcLvTsOg".split(/(?=[A-Z])/)[i],j%18*60+32,~~(j/18)*60+68);
 94 |   
 95 |   // Set text color
 96 |   
 97 |   c.fillStyle="#fff";
 98 |   
 99 |   // Draw text
100 |   
101 |   c.fillText("HHeLiBeBCNOFNeNaMgAlSiPSClArKCaScTiVCrMnFeCoNiCuZnGaGeAsSeBrKrRbSrYZrNbMoTcRuRhPdAgCdInSnSbTeIXeCsBaLaCePrNdPmSmEuGdTbDyHoErTmYbLuHfTaWReOsIrPtAuHgTlPbBiPoAtRnFrRaAcThPaUNpPuAmCmBkCfEsFmMdNoLrRfDbSgBhHsMtDsRgCnNhFlMcLvTsOg".split(/(?=[A-Z])/)[i],j%18*60+30,~~(j/18)*60+66);
102 | 
103 |   // Set a smaller font size for the other texts
104 |   
105 |   c.font="9pt arial";
106 |   
107 |   // -------------------------------------------------
108 |   //  3. Element's relative atomic mass and stability
109 |   // -------------------------------------------------
110 | 
111 |   // The relative atomic mass of an element is the average weight of the element and its isotopes,
112 |   // pondered by their abundance, and compared to 1/12th of the mass of a carbon-12 element. 
113 |   // More information here: https://en.wikipedia.org/wiki/Relative_atomic_mass
114 | 
115 |   // Atomic masses are rounded to 2 decimals.
116 |   // Each atomic mass is multiplied by 100 to get rid of the decimal part, and placed in this array:
117 |   
118 |   //  m=[100,400,694,901,1081,1201,1401,1600,1900,2018,2299,2431,2698,2809,3097,3206,3545,3995,3910,4008,
119 |   //  4496,4787,5094,5200,5494,5585,5893,5869,6355,6538,6972,7263,7492,7897,7990,8380,8547,8762,8891,9122,
120 |   //  9291,9595,9791,10107,10291,10642,10787,11241,11482,11871,12176,12760,12690,13129,13291,13733,13891,
121 |   //  14012,14091,14424,14491,15036,15196,15725,15893,16250,16493,16726,16893,17305,17497,17849,18095,
122 |   //  18384,18621,19023,19222,19508,19697,20059,20438,20720,20898,20898,20999,22202,22302,22603,22703,
123 |   //  23204,23104,23803,23705,24406,24306,24707,24707,25108,25208,25710,25810,25910,26612,26712,26813,
124 |   //  27113,27013,27715,27816,28117,28217,28518,28619,28919,28919,29320,29421,29421];
125 |   
126 |   // Each number of the array is converted into 2 ASCII chars using this JS (ES6) code:
127 | 
128 |   //   m=m.map((v,i)=>v-i*256+(i>68?570:1100)).map(v=>v.toString(36)).join('');
129 | 
130 |   // Which leads to:
131 | 
132 |   //   m="xcykzmy9w5sdqtp8qgmmnbjvk6g5h1cyf9knb66sd8e7fmbgci7x9d1l7z5yawbvb4f9aqegbzau7b6m475j3v5j3j66338l86bvd\
133 |   //      8mcdaidfrkxi7eg9jbo6fegbsjdgxjqjdiqg95v436r6h7e6vax9ca68bb9eofed8641ts4nsp1kprihmtxk3wgmkqljhnij6q0lo\
134 |   //      hctqpel3mbcfotkilrhfioedfl8hci8713"
135 | 
136 |   // The decoding looks like this, for the i-th element:
137 | 
138 |   //   mass=parseInt(m.substr(i*2,2),36)+i*256-(i>68?570:1100);
139 |   
140 |   // The resulting mass is converted to a string and split two chars before the end to make an array separating entire part and decimal part:
141 |   
142 |   //   mass=(parseInt(m.substr(i*2,2),36)+i*256-(i>68?570:1100)+"").split(/(?=..$)/);
143 |   
144 |   // This array (eg. ["294",21"]) will be coerted to a string (eg. "294,21") when fillText will try to draw it on the canvas.
145 |     // Uncoment the .join(".") snippets to have points instead of commas. 
146 |   // This approach allows to keep all trailing zeroes in the relative atomic masses.
147 |   // If g was just a floating-point number, it would appear as "16" for Oxygen (element 8) instead of "16,00", or "126.9" for Iodine (element 53) instead of "126,90"
148 |   // The code below uses this techniques, with a lot of repetitions to optimize for RegPack.
149 |     
150 |   // Stable elements are elements that have at least one stable isotope.
151 |   // "Unstable" elements have isotopes with half-lives between a few minutes and a few million years.
152 |   // Elements 43, 61 and higher than 85 are unstable.
153 |   // Their relative atomic masses are drawn between parenthesis.
154 |   // More information here: https://commons.wikimedia.org/wiki/File:Periodic_Table_Stability_%26_Radioactivity.png
155 |   // And here: https://en.wikipedia.org/wiki/Radioactive_decay
156 |   // Elements 1 to 4 also get an extra decimal (respectively 8, 3, 1 and 2), because their mass is lower than 10 and there was enough room for that.
157 | 
158 |   c.fillText(
159 |     
160 |     // Stable elements masses
161 |     
162 |     (i!=42^i!=60^i<83)
163 |     
164 |     ?
165 |     
166 |     (parseInt('xcykzmy9w5sdqtp8qgmmnbjvk6g5h1cyf9knb66sd8e7fmbgci7x9d1l7z5yawbvb4f9aqegbzau7b6m475j3v5j3j66338l86bvd8mcdaidfrkxi7eg9jbo6fegbsjdgxjqjdiqg95v436r6h7e6vax9ca68bb9eofed8641ts4nsp1kprihmtxk3wgmkqljhnij6q0lohctqpel3mbcfotkilrhfioedfl8hci8713'.substr(i*2,2),36)+i*256-(i>68?570:1100)+"").split(/(?=..$)/)/*.join(".")*/
167 |     
168 |     // Extra decimal for elements 1, 2, 3, 4.
169 |     
170 |     +["8312"[i]]
171 |     
172 |     :
173 |     
174 |     // Unstable elements masses between parenthesis
175 |     
176 |     ("("+(parseInt('xcykzmy9w5sdqtp8qgmmnbjvk6g5h1cyf9knb66sd8e7fmbgci7x9d1l7z5yawbvb4f9aqegbzau7b6m475j3v5j3j66338l86bvd8mcdaidfrkxi7eg9jbo6fegbsjdgxjqjdiqg95v436r6h7e6vax9ca68bb9eofed8641ts4nsp1kprihmtxk3wgmkqljhnij6q0lohctqpel3mbcfotkilrhfioedfl8hci8713'.substr(i*2,2),36)+i*256-(i>68?570:1100)+"").split(/(?=..$)/)/*.join(".")*/+")"),
177 |     j%18*60+30,
178 |     ~~(j/18)*60+83
179 |   );
180 | 
181 |   
182 |   // ------------------
183 |   //  4. Atomic number
184 |   // ------------------
185 | 
186 |   // The atomic number (written on top of each cell) represents the number of protons in the current element.
187 |   // More information: https://en.wikipedia.org/wiki/Atomic_number
188 |   
189 |   c.fillText(i+1,j%18*60+30,~~(j/18)*60+45);
190 |   
191 |   // ----------
192 |   //  5. next!
193 |   // ----------
194 | 
195 |   // j offsets:
196 |   // This operation adds the "gaps" in the table.
197 |   // i.e. 17 gaps after element 0, 11 gaps after element 3, etc.
198 |   // If there's no gap, j is just incremented by 1.
199 | 
200 |   j+={117:21,0:17,3:11,11:11,69:5}[i]|1;
201 | 
202 |   // i offsets:
203 |   // This operation adds the "jumps" in the atomic numbers.
204 |   // i.e: 15 jumps after element 55, etc.
205 |   // If there's no jump, i is just incremented by 1.
206 | 
207 |   i+={117:-61,87:15,69:18,55:15}[i]|1;
208 |   
209 |   // The values are shuffled a little to optimize RegPack compression (note the repetition of "+={117:" and "5}[i]|1")
210 |   
211 | }
212 | 
213 | // -------
214 | //  Title
215 | // -------
216 | 
217 | // Draw the title "PERIOD1K" on top of the canvas, to fill the remaining bytes.
218 | 
219 | c.font="bold 15pt arial";
220 | c.fillText("PERIOD1K",545,50);
221 | 
222 | // --------------------------
223 | //  Minification and packing
224 | // --------------------------
225 | 
226 | // - Pass this code through closure compiler, advanced mode (https://closure-compiler.appspot.com).
227 | // - Remove the line breaks and the trailing semicolon generated by closure compiler.
228 | // - Paste the result in RegPack (http://siorki.github.io/regPack.html). Pack with the following setup: 10 / 0 / 1 / "Longest string first"
229 | // - Result: 1024b.
230 | // - Yay!
231 | 
232 | /*** end of entry ***/
233 | 
234 | </script>


--------------------------------------------------------------------------------
/final.min.golfed.html:
--------------------------------------------------------------------------------
1 | <body onload="i=j=0;'H9xc#He3yk#Li0zmBe1y9B8w5C9sdNqt#Op8#F2qg#Ne3mm#Na0nbMg1jvAl7k6Si8g5P9h1ScyCl2f9#Ar3kn#K0b6Ca16sSc6d8Tie7VfmCrbgMnciFe7xCo9dNi1lCu7zZn5yGa7awGe8bvAsb4Se9f9Br2aq~Kr3eg#Rb0bzSr1auY67bZr6mNb47Mo5jTc3vRu5jRh3jPd66Ag33Cd8lIn786SnbvSb8d8TemcI2daXe3id#Cs0frBa1kxLa4i7CeegPr9jNdboPm6fSmegEubsGdjdTbgxDyjqHojdEriqTmg9Yb5vLu443Hf66rTa6hW7eRe6vOsaxIr9cPta6Au8bHgb9~Tl7eoPbfeBid8Po64At21tRn3s4#Fr0nsRa1p1Ac5kpThriPahmUtxNpk3PuwgAmmkCmqlBkjhCfniEsj6Fmq0MdloNohcLr5tqRf6peDbl3SgmbBhcfHsotMtkiDslrRghfCnioNh7edFlflMc8hLvciTs287Og313#H'.replace(/(..*?)(\d)?(..)(#)?(~)?(?=[A-Z])/g,(u,v,w,x,y,z)=>{b.innerHTML+=`<center style='font:.8vw/.5vw arial;width:3vw;padding:.4vw;position:absolute;top:calc(50vh + ${~~(j/18)*4.5-21}vw);left:${j%18*4+13}vw;background:hsl(${35*(w?t=w:t)},70%,40%'>${i+1} ${y?'G':z?'L':'S'}<h2 style='text-shadow:2px 2px#222'>${v}</h2>`+((parseInt(x,36)+256*i-(68<i?570:1100))/100).toFixed(2)+'* '[42!=i^60!=i^83>i];j+={0:17,3:11,11:11,69:-68,55:54,87:54,101:-68}[i++]|1})"id=b bgcolor=0 text=#fff>


--------------------------------------------------------------------------------
/final.min.html:
--------------------------------------------------------------------------------
 1 | <meta charset=utf-8>
 2 | <body id=b>
 3 | <center>
 4 | <canvas id=a width=1090 height=700>
 5 | <script>
 6 | c=a.getContext("2d");
 7 | a.style.maxWidth="99%";
 8 | 
 9 | /*** entry ***/
10 | 
11 | for(i=j=b.bgColor=0;178>j;)c.fillStyle="hsl("+35*"9301899923017899230166666666667889230166666666667788230144444444444444466666666677772301555555555555555666666666777723"[i]+",48%,48%)",c.fillRect(j%18*60,60*~~(j/18)+30,58,58),c.font="bold 15pt arial",c.textAlign="center",c.fillStyle="#444",c.fillText("HHeLiBeBCNOFNeNaMgAlSiPSClArKCaScTiVCrMnFeCoNiCuZnGaGeAsSeBrKrRbSrYZrNbMoTcRuRhPdAgCdInSnSbTeIXeCsBaLaCePrNdPmSmEuGdTbDyHoErTmYbLuHfTaWReOsIrPtAuHgTlPbBiPoAtRnFrRaAcThPaUNpPuAmCmBkCfEsFmMdNoLrRfDbSgBhHsMtDsRgCnNhFlMcLvTsOg".split(/(?=[A-Z])/)[i],j%18*60+32,60*~~(j/18)+68),c.fillStyle="#fff",c.fillText("HHeLiBeBCNOFNeNaMgAlSiPSClArKCaScTiVCrMnFeCoNiCuZnGaGeAsSeBrKrRbSrYZrNbMoTcRuRhPdAgCdInSnSbTeIXeCsBaLaCePrNdPmSmEuGdTbDyHoErTmYbLuHfTaWReOsIrPtAuHgTlPbBiPoAtRnFrRaAcThPaUNpPuAmCmBkCfEsFmMdNoLrRfDbSgBhHsMtDsRgCnNhFlMcLvTsOg".split(/(?=[A-Z])/)[i],j%18*60+30,60*~~(j/18)+66),c.font="9pt arial",c.fillText(42!=i^60!=i^83>i?(parseInt("xcykzmy9w5sdqtp8qgmmnbjvk6g5h1cyf9knb66sd8e7fmbgci7x9d1l7z5yawbvb4f9aqegbzau7b6m475j3v5j3j66338l86bvd8mcdaidfrkxi7eg9jbo6fegbsjdgxjqjdiqg95v436r6h7e6vax9ca68bb9eofed8641ts4nsp1kprihmtxk3wgmkqljhnij6q0lohctqpel3mbcfotkilrhfioedfl8hci8713".substr(2*i,2),36)+256*i-(68<i?570:1100)+"").split(/(?=..$)/)+["8312"[i]]:"("+(parseInt("xcykzmy9w5sdqtp8qgmmnbjvk6g5h1cyf9knb66sd8e7fmbgci7x9d1l7z5yawbvb4f9aqegbzau7b6m475j3v5j3j66338l86bvd8mcdaidfrkxi7eg9jbo6fegbsjdgxjqjdiqg95v436r6h7e6vax9ca68bb9eofed8641ts4nsp1kprihmtxk3wgmkqljhnij6q0lohctqpel3mbcfotkilrhfioedfl8hci8713".substr(2*i,2),36)+256*i-(68<i?570:1100)+"").split(/(?=..$)/)+")",j%18*60+30,60*~~(j/18)+83),c.fillText(i+1,j%18*60+30,60*~~(j/18)+45),j+={117:21,0:17,3:11,11:11,69:5}[i]|1,i+={117:-61,87:15,69:18,55:15}[i]|1;c.font="bold 15pt arial";c.fillText("PERIOD1K",545,50)
12 | 
13 | // warning: closure compiler adds two line breaks. They need to be removed
14 | 
15 | /*** end of entry ***/
16 | 
17 | </script>


--------------------------------------------------------------------------------
/final.min.pack.html:
--------------------------------------------------------------------------------
 1 | <meta charset=utf-8>
 2 | <body id=b>
 3 | <center>
 4 | <canvas id=a width=1090 height=700>
 5 | <script>
 6 | c=a.getContext("2d");
 7 | a.style.maxWidth="99%";
 8 | 
 9 | /*** entry ***/
10 | 
11 | for(_='1,",),+={117:j%18*60,+3:1c.font="pt arial"[i].split(/(?=c.fill662301Style="	Text(bold 1555544467,60*~~(j/18)+"HHeLiBeBCNOFNeNaMgAlSiPSClArKCaScTiVCrMnFeCoNiCuZnGaGeAsSeBrKrRbSrYZrNbMoTcRuRhPdAgCdInSnSbTeIXeCsBaLaCePrNdPmSmEuGdTbDyHoErTmYbLuHfTaWReOsIrPtAuHgTlPbBiPoAtRnFrRaAcThPaUNpPuAmCmBkCfEsFmMdNoLrRfDbSgBhHsMtDsRgCnNhFlMcLvTsOg"[A-Z])/)(parseInt("xcykzmy9w5sdqtp8qgmmnbjvk6g5h1cyf9knbsd8e7fmbgci7x9d1l7z5yawbvb4f9aqegbzau7b6m475j3v5j3j338l86bvd8mcdaidfrkxi7eg9jbo6fegbsjdgxjqjdiqg95v436r6h7e6vax9ca68bb9eofed8641ts4nsp1kprihmtxk3wgmkqljhnij6q0lohctqpel3mbcfotkilrhfioedfl8hci8713".substr(2*i,236)+256*i-(68<i?570100)+"")..$)/)+
for(i=j=b.bgColor=0;178>j;)	hsl("+35*"9301899978996889678877777723"+48%,48%)Rect(30,58,58,c.textAlign="center	#268	#fff09,42!=i^60!=i^83>i?
["8312"]:"("+
")"083i+1045j207,31169:5}|i-6875,698,555}|1;;"PERIOD1K545,50)';g=/[
-]/.exec(_);)with(_.split(g))_=join(shift());eval(_)
12 | 
13 | /*** end of entry ***/
14 | 
15 | // Regpack params:
16 | // - 10 / 0 / 1
17 | // - longest string first
18 | 
19 | </script>


--------------------------------------------------------------------------------
/golfed.commented.html:
--------------------------------------------------------------------------------
  1 | <body id=b bgcolor=0 text=#fff>
  2 | <script>
  3 | 
  4 | // =================
  5 | //  PERIOD1k reboot
  6 | // =================
  7 | 
  8 | // A periodic table of chemical elements in just 1kb of HTML & JS (ES6).
  9 | 
 10 | // The attributes "bgcolor=0" sets the page background in black. Also:
 11 | // initialize i (element counter: 0 to 117).
 12 | // initialize j (cell counter: 0 to 187. This count include elements (in colors), and the holes (in black).
 13 | b.bgColor = i = j = 0;
 14 | 
 15 | // Dataset:
 16 | // Let's store 4 pieces of information about eact of the the 118 known elements into a big string.
 17 | // Each line represents an element (line breaks are added here for more readability), and contains:
 18 | // - The element's abbreviated name (1 to 2 characters, starting with a capital letter).
 19 | // - The element's type, but only if it's different from the previous element, (1 digit 0-9, optional).
 20 | // - The element's relative atomic mass (encoded on two characters).
 21 | // - The element's state at room temperature ("~" for liquid or "#" for gas, optional: solid by default).
 22 | 
 23 | 'H9xc#\
 24 | He3yk#\
 25 | Li0zm\
 26 | Be1y9\
 27 | B8w5\
 28 | C9sd\
 29 | Nqt#\
 30 | Op8#\
 31 | F2qg#\
 32 | Ne3mm#\
 33 | Na0nb\
 34 | Mg1jv\
 35 | Al7k6\
 36 | Si8g5\
 37 | P9h1\
 38 | Scy\
 39 | Cl2f9#\
 40 | Ar3kn#\
 41 | K0b6\
 42 | Ca16s\
 43 | Sc6d8\
 44 | Tie7\
 45 | Vfm\
 46 | Crbg\
 47 | Mnci\
 48 | Fe7x\
 49 | Co9d\
 50 | Ni1l\
 51 | Cu7z\
 52 | Zn5y\
 53 | Ga7aw\
 54 | Ge8bv\
 55 | Asb4\
 56 | Se9f9\
 57 | Br2aq~\
 58 | Kr3eg#\
 59 | Rb0bz\
 60 | Sr1au\
 61 | Y67b\
 62 | Zr6m\
 63 | Nb47\
 64 | Mo5j\
 65 | Tc3v\
 66 | Ru5j\
 67 | Rh3j\
 68 | Pd66\
 69 | Ag33\
 70 | Cd8l\
 71 | In786\
 72 | Snbv\
 73 | Sb8d8\
 74 | Temc\
 75 | I2da\
 76 | Xe3id#\
 77 | Cs0fr\
 78 | Ba1kx\
 79 | La4i7\
 80 | Ceeg\
 81 | Pr9j\
 82 | Ndbo\
 83 | Pm6f\
 84 | Smeg\
 85 | Eubs\
 86 | Gdjd\
 87 | Tbgx\
 88 | Dyjq\
 89 | Hojd\
 90 | Eriq\
 91 | Tmg9\
 92 | Yb5v\
 93 | Lu43\
 94 | Hf66r\
 95 | Ta6h\
 96 | W7e\
 97 | Re6v\
 98 | Osax\
 99 | Ir9c\
100 | Pta6\
101 | Au8b\
102 | Hgb9~\
103 | Tl7eo\
104 | Pbfe\
105 | Bid8\
106 | Po64\
107 | At21t\
108 | Rn3s4#\
109 | Fr0ns\
110 | Ra1p1\
111 | Ac5kp\
112 | Thri\
113 | Pahm\
114 | Utx\
115 | Npk3\
116 | Puwg\
117 | Ammk\
118 | Cmql\
119 | Bkjh\
120 | Cfni\
121 | Esj6\
122 | Fmq0\
123 | Mdlo\
124 | Nohc\
125 | Lrtq\
126 | Rf6pe\
127 | Dbl3\
128 | Sgmb\
129 | Bhcf\
130 | Hsot\
131 | Mtki\
132 | Dslr\
133 | Rghf\
134 | Cnio\
135 | Nh7ed\
136 | Flfl\
137 | Mc8h\
138 | Lvci\
139 | Ts287\
140 | Og313#\
141 | H'
142 | 
143 | // The last uppercase char ("H") is just here to let the parser below interpret the 118th element correctly.
144 | // The code below uses a replace() with a RegEx to separate the 118 elements, retrieve each piece of information, and output each cell of the periodic table in HTML.
145 | // For each element, the RegEx:
146 | // - Captures 1 or 2 letters (".*?" = non-greedy capture) = the element's name, the result is stored in the variable v.
147 | // - Captures 1 optional digit ("\d") = the element's type, the result is stored in the variable w.
148 | // - Captures 2 letters ("..") = the atomic mass, the result is stored in the variable x.
149 | // - Captures 1 optional character "#" = "Gas", the result is stored in the variable y.
150 | // - Captures 1 optional character "~" = "Liquid", the result is stored in the variable z.
151 | // - Stops before the next uppercase letter (with the lookahead "(?=[A-Z])" at the end).
152 | // We could have avoided the final "H" in the string with the lookahead "(?=[A-Z]|$)" but it would have been 1 byte longer.
153 | .replace(/(..*?)(\d)?(..)(#)?(~)?(?=[A-Z])/g,(u,v,w,x,y,z) => {
154 |   
155 |   // Insert a center element in the page's body.
156 |   // Dimensions in vw unit make the table responsive.
157 |   // An ES6 template literal is used to avoid many concatenations.
158 |   // The "font" css property is used to set the Arial font-family and a responsive font-size and line-height to the text.
159 |   // The width is used to make the cells responsive (the height is automatically identical everywhere).
160 |   // The position absolute and the margins are used to place precisely each cell in the page.
161 |   b.innerHTML += `<center style=color:#fff;font:.8vw/.2vw'arial';width:2.6vw;padding:.5vw;position:absolute;margin:${
162 |   
163 |     // Top offset of the current cell = (period * 3.8 + 2)vw.
164 |     // The period is the current line of the table: ~~(j/18).
165 |     ~~(j / 18) * 3.8 + 2
166 |     
167 |   }vw+${
168 |   
169 |     // Left offset of the current cell = (group * 3.8 + 14)vw.
170 |     // The group is the current column of the table: j%18.
171 |     // The 14vw left offset helps centering the table horizontally.
172 |     j % 18 * 3.8 + 14
173 |     
174 |   }vw;background:hsl(${
175 |   
176 |     // The cell's background is defined in HSL. The Hue (H) is equal to w (the element's type) * 35.
177 |     // Saturation (S) is set to 70% and Light (L) is set to 40%.
178 |     // If w is not null, its value is saved in the variable t.
179 |     // If w is null, reuse the value stored in t (reuse the color of the previous cell "for free").
180 |     // Legend:
181 |     // - 0 (purple): non-metals: H, C, N, O, P, S, Se.
182 |     // - 1 (brown): Alkaline earth metals – Be, Mg, Ca, Sr, Ba, Ra.
183 |     // - 2 (yellow-green): Halogens – F, Cl, Br, I, At.
184 |     // - 3 (green): Noble gases – He, Ne, Ar, Kr, Xe, Rn.
185 |     // - 4 (pale green): Lanthanoids – La, Ce, Pr, Nd, Pm, Sm, Eu, Gd, Tb, Dy, Ho, Er, Tm, Yb, Lu.
186 |     // - 5 (pale blue): Actinoids – Ac, Th, Pa, U, Np, Pu, Am, Cm, Bk, Cf, Es, Fm, Md, No, Lr.
187 |     // - 6 (blue): Transition metals – Elements in groups 3 to 12.
188 |     // - 7 (dark blue): poor metals: Al, Ga, In, Sn, Tl, Pb, Bi, Po.
189 |     // - 8 (dark purple): Metalloids – B, Si, Ge, As, Sb, Te.
190 |     // - 9 (red): Alkali metals – Li, Na, K, Rb, Cs, Fr.
191 |     w ? t = w * 35 : t
192 |   
193 |   },70%,40%)>${
194 |   
195 |     // Element's atomic number (1 to 118)
196 |     i + 1
197 |     
198 |   } ${
199 |   
200 |     // Element's state at room temperature (G = Gas / L = Liquid / S = Solid)
201 |     y ? 'G' : z ? 'L' : 'S'
202 |     
203 |   }<h2 style=text-shadow:2px+2px#222>${
204 |   
205 |     // Element's name, inside a <h2> element with text-shadow.
206 |     // "2px+2px#222" is similar to "2px 2px #222", but contains no space.
207 |     // This allows to omit the style attribute's quotes.
208 |     // <H2> is a block-level element, and as a result, it adds a convenient line break before and after itself.
209 |     v
210 |     
211 |   }</h2>`
212 |   
213 |   // Starting here, it's shorter to concatenate the last two pieces of information (with +... ) than to include them in the template literal (with ${...}).
214 |   +
215 |   
216 |   // Element's relative atomic mass.
217 |   // (average weight of the element and its isotopes, pondered by their abundance, and compared to 1/12 of the mass of a carbon-12 element).
218 |   // How it was encoded:
219 |   // - the mass is multiplied by 100 to get rid of the decimal part (ex: 1.00 => 100 ... 294.21 => 29421).
220 |   // - the number is converted to 2 ASCII chars using this magic formula: x=>(x-i*256+(i>68?570:1100)).toString(36) (ex: 100 => "xc" ... 29421 => "13")
221 |   // This formula exploits the fact that the mass * 100 is nearly equal to 256 times the atomic number plus 570 (when i>68) or 1100 (when i<68).
222 |   // The difference (between the mass * 100 and the atomic number * 256 + 570 or 1100) is smaller than 1295, and so it can be encoded on only two chars in base 36.
223 |   // Here, the mass is decoded by performing exactly the opposite operation:
224 |   ((parseInt(x,36) + 256 * i - (68 < i ? 570 : 1100)) / 100).toFixed(2)
225 |   
226 |   // Add a decimal to the 5 first elements' atomic mass (respectively 8, 3, 1, 2 and 1)
227 |   + ["83121"[i]]
228 |   
229 |   // Add a "*" if the element is unstable a.k.a. has no stable isotope (elements 43, 61 and 84 to 118).
230 |   // The following code is similar to '[42==i||60==i||83>i]', but shorter.
231 |   + '* '[42 != i ^ 60 != i ^ 83 > i];
232 |   
233 |   // Adjust j to the position of the next ellement on the grid, or increment it by 1 by default.
234 |   // - jump 17 cells after element 1.
235 |   // - jump 11 cells after elements 4 and 12.
236 |   // - jump 54 cells after elements 56 and 88.
237 |   // - jump -68 cells after elements 70 and 102.
238 |   // And finally, increment i (next element's index).
239 |   j += {0:17, 3:11, 11:11, 55:54, 87:54, 69:-68, 101:-68}[i++] | 1
240 | });
241 | 
242 | // Make the body (b) a little higher than the table. (if the screen is too short, the page will be scrollable).
243 | b.style.height="42vw"
244 | 
245 | // No JS packing required, the minified code takes 1023 bytes. (and trying to pack it makes it bigger, so it's not interesting)
246 | </script>


--------------------------------------------------------------------------------
/js1k17.html:
--------------------------------------------------------------------------------
 1 | <body id=b>
 2 | <script>
 3 | d = document;
 4 | 
 5 | // Entry
 6 | 
 7 | b.bgColor=i=j=0;'H9xc#He3yk#Li0zmBe1y9B8w5C9sdNqt#Op8#F2qg#Ne3mm#Na0nbMg1jvAl7k6Si8g5P9h1ScyCl2f9#Ar3kn#K0b6Ca16sSc6d8Tie7VfmCrbgMnciFe7xCo9dNi1lCu7zZn5yGa7awGe8bvAsb4Se9f9Br2aq~Kr3eg#Rb0bzSr1auY67bZr6mNb47Mo5jTc3vRu5jRh3jPd66Ag33Cd8lIn786SnbvSb8d8TemcI2daXe3id#Cs0frBa1kxLa4i7CeegPr9jNdboPm6fSmegEubsGdjdTbgxDyjqHojdEriqTmg9Yb5vLu443Hf66rTa6hW7eRe6vOsaxIr9cPta6Au8bHgb9~Tl7eoPbfeBid8Po64At21tRn3s4#Fr0nsRa1p1Ac5kpThriPahmUtxNpk3PuwgAmmkCmqlBkjhCfniEsj6Fmq0MdloNohcLr5tqRf6peDbl3SgmbBhcfHsotMtkiDslrRghfCnioNh7edFlflMc8hLvciTs287Og313#X'.replace(/(..*?)(\d)?(..)(#)?(~)?(?=[A-Z])/g,(u,v,w,x,y,z)=>{b.innerHTML+=`<center style=color:#fff;font:.8vw/.2vw'arial';width:2.6vw;padding:.5vw;position:absolute;margin:${~~(j/18)*3.8+2}vw+${j%18*3.8+14}vw;background:hsl(${w?t=w*35:t},70%,40%)>${i+1} ${y?'G':z?'L':'S'}<h2 style=text-shadow:2px+2px#222>${v}</h2>`+((parseInt(x,36)+256*i-(68<i?570:1100))/100).toFixed(2)+["83121"[i]]+'* '[42!=i^60!=i^83>i];j+={0:17,3:11,11:11,69:-68,55:54,87:54,101:-68}[i++]|1});b.style.height="42vw"
 8 | 
 9 | // End of entry
10 | 
11 | </script>


--------------------------------------------------------------------------------
/quine.html:
--------------------------------------------------------------------------------
 1 | <body id=b bgcolor=0><script>
 2 | 
 3 | C='                                                                                                    for\
 4 | (i=                                                                                                    j=z\
 5 | =0;                                                                                                    j<1\
 6 | \
 7 | 78;   j++                                                                ,(z   =z?   z-1   :{1   17:   20,\
 8 | 0:1   6,3                                                                :10   ,11   :10   ,69   :4}   [i]\
 9 | |0)   ||(                                                                i+=   {11   7:-   61,   87:   15,\
10 | \
11 | 69:   18,   55:   15}   [i]   |1)   )[w   ,y]   ="H   1He   1Li   BeB   CN1   O1F   1Ne   1Na   MgA   lSi\
12 | PSC   l1A   r1K   CaS   cTi   VCr   MnF   eCo   NiC   uZn   GaG   eAs   SeB   r2K   r1R   bSr   YZr   NbM\
13 | oTc   RuR   hPd   AgC   dIn   SnS   bTe   IXe   1Cs   BaL   aCe   PrN   dPm   SmE   uGd   TbD   yHo   ErT\
14 | \
15 | mYb   LuH   fTa   WRe   OsI   rPt   AuH   g2T   lPb   BiP   oAt   Rn1   FrR   aAc   ThP   aUN   pPu   AmC\
16 | mBk   CfE   sFm   MdN   oLr   RfD   bSg   BhH   sMt   DsR   gCn   NhF   lMc   LvT   sOg   1".   spl   it(\
17 | /(?   =[A   -Z]   )/)   [i]   .sp   lit   (/(   ?=\   d)/   ),b   .in   ner   HTM   L+=   `<c   ent   er \
18 | \
19 | sty   le=   "fo   nt:   1vw    ar   ial   ;fl   oat   :le   ft;   wid   th:   4vw   ;ma   rgi   n:.   2vw\
20 | ;pa   ddi   ng:   .4v   w;c   olo   r:#   fff   ${"   ;"[   z]}   bac   kgr   oun   d:h   sl(   ${3   5*(\
21 | .1*   ("#   {p    7{n    7{   bbb   bbn   p7{   bbb   bbm   x7{   LLL   LLL   LNb   bbb   mm7   {WW   WWW\
22 | \
23 | WWX   bbb   bmm   7".   cha   rCo   deA   t(i   /2)   -32   )+"   ")[   i%2   *2]   |0}   ,70   %,4   0%)\
24 | ">$   {i+   1}    ${"   SGL   "[y   ||0   ]}<   h2>   ${w   }</   h2>   `+(   (pa   rse   Int   ("x   cyk\
25 | zmy   9w5   sdq   tp8   qgm   mnb   jvk   6g5   h1c   yf9   knb   66s   d8e   7fm   bgc   i7x   9d1   l7z\
26 | \
27 | \
28 |                5ya   wbv   b4f   9aq   egb   zau   7b6   m47   5j3   v5j   3j6   633   8l8   6bv\
29 |                d8m   cda   idf   rkx   i7e   g9j   bo6   feg   bsj   dgx   jqj   diq   g95   v43\
30 |                6r6   h7e   6va   x9c   a68   bb9   eof   ed8   641   ts4   nsp   1kp   rih   mtx\
31 | \
32 |                k3w   gmk   qlj   hni   j6q   0lo   hct   qpe   l3m   bcf   otk   ilr   hfi   oed\
33 |                fl8   hci   871   3".   sub   str   (2*   i,2   ),3   6)+   256   *i-   (68   <i?\
34 |                570   :11   00)   )/1   00)   .to   Fix   ed(   2)+   "*    "[4   2!=   i^6   0!=\
35 |                i^8   3>i   ]'
36 |                
37 | eval(C.replace(/  +|\n/g,""))
38 | </script>


--------------------------------------------------------------------------------
/quine2.html:
--------------------------------------------------------------------------------
1 | <script>//document.write
2 | 
3 | '<body onload=\x27for(i=j=z=0;j<178;j++,(z=z?z-1:{117:20,0:16,3:10,11:10,69:4}[i]|0)||(i+={117:-61,87:15,69:18,55:15}[i]|1))[w,y]="H1He1LiBeBCN1O1F1Ne1NaMgAlSiPSCl1Ar1KCaScTiVCrMnFeCoNiCuZnGaGeAsSeBr2Kr1RbSrYZrNbMoTcRuRhPdAgCdInSnSbTeIXe1CsBaLaCePrNdPmSmEuGdTbDyHoErTmYbLuHfTaWReOsIrPtAuHg2TlPbBiPoAtRn1FrRaAcThPaUNpPuAmCmBkCfEsFmMdNoLrRfDbSgBhHsMtDsRgCnNhFlMcLvTsOg1".split(/(?=[A-Z])/)[i].split(/(?=\d)/),b.innerHTML+=`<center style="font:1vw arial;float:left;width:4vw;margin:.2vw;padding:.4vw;color:#fff${";"[z]}background:hsl(${35*(.1*("#{p 7{n 7{bbbbbnp7{bbbbbmx7{LLLLLLLNbbbbmm7{WWWWWWWXbbbbmm7".charCodeAt(i/2)-32)+"")[i%2*2]|0},70%,40%)">${i+1} ${"SGL"[y||0]}<h2>${w}</h2>`+((parseInt("xcykzmy9w5sdqtp8qgmmnbjvk6g5h1cyf9knb66sd8e7fmbgci7x9d1l7z5yawbvb4f9aqegbzau7b6m475j3v5j3j66338l86bvd8mcdaidfrkxi7eg9jbo6fegbsjdgxjqjdiqg95v436r6h7e6vax9ca68bb9eofed8641ts4nsp1kprihmtxk3wgmkqljhnij6q0lohctqpel3mbcfotkilrhfioedfl8hci8713".substr(2*i,2),36)+256*i-(68<i?570:1100))/100).toFixed(2)+"* "[42!=i^60!=i^83>i]\x27id=b bgColor=0>'
4 | //.replace(/  |\n/g ,""))
5 | 
6 | </script>


--------------------------------------------------------------------------------
/recto.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegolf/period1k/fad214c91ca8fa83c68df08953b9f390a185956d/recto.png


--------------------------------------------------------------------------------
/shim.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 |   <!-- note: your demo in this shim runs in an iframe with this content: https://gist.github.com/qfox/3cccc4f36c8319e09bb7 -->
  4 |   <!--
  5 |   (c) js1k.com 2017
  6 |   Note: submissions belong to their respectful owner, do not copy without their consent
  7 |   -->
  8 |   <head>
  9 |     <meta charset="utf-8">
 10 |     <title>JS1k 2017 - NNNN - TITLE</title>
 11 |     <meta name="author" content="YOU">
 12 |     <link rel="icon" type="image/png" href="http://js1k.com/favicon.png">
 13 |     <link rel="canonical" href="http://js1k.com/2017-magic/demo/NNNN">
 14 |     <link rel="shortlink" href="http://js1k.com/NNNN">
 15 |     <script>
 16 |       // GA
 17 |     </script>
 18 |     <style>
 19 |       /* http://qfox.nl/notes/333 */
 20 |       body,html,iframe{margin:0;padding:0;border:0;width:100%;height:100%}
 21 |       iframe{position:absolute;top:0;left:0;padding-top:50px;box-sizing:border-box}
 22 |       header{position:relative;z-index:1;height:47px;padding-top:2px;border-bottom:1px solid #000;box-shadow:0 -10px 25px #ccc inset;background-color:#eee}
 23 |       aside,div,h1,p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-size:16px;font-weight:inherit;line-height:22px;padding:0;margin:0;cursor:default}
 24 |       aside,h1{display:inline}
 25 |       a{color:#000;text-decoration:none;border-bottom:1px dashed #000}
 26 |       a:hover{border-bottom:1px solid red}
 27 |       a[href="0"]{text-decoration:line-through;pointer-events:none;border-bottom:0;color:#ccc}
 28 |       .button{float:left;width:40px;height:40px;line-height:40px;text-align:center;padding:0;margin:2px 0 0 10px;border:1px solid #888;border-color:#ddd #888 #888 #ddd;font-family:sans-serif;font-size:30px;font-weight:700;cursor:pointer}
 29 |       .button:hover{color:red;border-bottom-color:#888}
 30 |       .r{margin-right:10px}
 31 |       time{display:none}
 32 |     </style>
 33 |   </head>
 34 |   <body>
 35 |     <header>
 36 |       <div>
 37 |         <h1>
 38 |           <a href="http://js1k.com/">JS1k</a>
 39 |           <a href="http://js1k.com/2017-magic">2017</a>
 40 |           <strong></strong> demo
 41 |           &mdash;
 42 |           "TITLE" by YOU
 43 |         </h1>
 44 |         <p>
 45 |           <em>
 46 |             FIRST PART OF YOUR DESC GOES HERE
 47 |           </em>
 48 |         </p>
 49 |         <aside>
 50 |           &mdash;
 51 |           1024 bytes
 52 |           &mdash;
 53 |           <a href="http://js1k.com/2017-magic/details/NNNN">demo details</a>
 54 |           &mdash;
 55 |           <a href="http://js1k.com/2017-magic/demos">list of demos</a>
 56 |           &mdash;
 57 |           <a href="http://js1k.com/1955" title="short link for your mobile devices" rel="nofollow">js1k.com/NNNN</a>
 58 |           <time datetime="NOW" pubdate>NOW</time>
 59 |         </aside>
 60 |       </div>
 61 | 
 62 |       <a href="500" class="button p">&Larr;</a>
 63 |       <a href="502" class="button n">&Rarr;</a>
 64 |     </header>
 65 | 
 66 |     <script type="shim">
 67 |       // this is the SHIM (will be ran in the context of the iframe...)
 68 | 
 69 |       // unprefix some popular vendor prefixed things (but stick to their original name)
 70 |       iwin.AudioContext = iwin.AudioContext || iwin.webkitAudioContext; // ios8 unmutes audio only during the first user triggered event with sound
 71 |       iwin.requestAnimationFrame = iwin.requestAnimationFrame || iwin.mozRequestAnimationFrame || iwin.webkitRequestAnimationFrame || iwin.msRequestAnimationFrame || function(f){ iwin.setTimeout(f, 1000/30); };
 72 |       canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock || canvas.webkitRequestPointerLock;
 73 |       navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
 74 |       if (typeof OscillatorNode !== 'undefined' && OscillatorNode.prototype) {
 75 |         OscillatorNode.prototype.start = OscillatorNode.prototype.start || OscillatorNode.prototype.noteOn;
 76 |         OscillatorNode.prototype.stop = OscillatorNode.prototype.stop || OscillatorNode.prototype.noteOff;
 77 |       }
 78 | 
 79 |       a = canvas;
 80 |       b = idoc.body;
 81 |       d = idoc.document;
 82 | 
 83 |       if (!TOKEN_WEBGL) iwin.c = canvas.getContext('2d');
 84 |       else iwin.g = (function () {
 85 |         iwin.onorientationchange = iwin.onresize = null;
 86 |         try {
 87 |           var o = { antialias: true, stencil: true };
 88 |           var gl = canvas.getContext('webgl', o) || canvas.getContext('experimental-webgl', o);
 89 | 
 90 |           // keep in scope, must not be garbage collected
 91 |           iwin.__glExts =
 92 |             [ 'OES_texture_float', 'OES_texture_float_linear', 'OES_standard_derivatives',
 93 |               'EXT_texture_filter_anisotropic', 'MOZ_EXT_texture_filter_anisotropic', 'WEBKIT_EXT_texture_filter_anisotropic',
 94 |               'WEBGL_compressed_texture_s3tc', 'MOZ_WEBGL_compressed_texture_s3tc', 'WEBKIT_WEBGL_compressed_texture_s3tc'
 95 |             ].map(function(ext) {
 96 |                 return gl.getExtension(ext);
 97 |               });
 98 |         } catch (e) {
 99 |           idoc.body.innerHTML = 'WebGL not supported.';
100 |           iwin.a=iwin.b=iwin.c=iwin.d=null;
101 |           throw e;
102 |         }
103 | 
104 |         return gl;
105 |       })();
106 |     </script>
107 |     <script>
108 |       // submission form configurables:
109 | 
110 |       // enable canvas shim at all? (2d/3d). other settings are ignored if this is false.
111 |       var TOKEN_CANVAS_SHIM = false;
112 |       // true enables webgl shim (exposes `g`), false enables canvas shim (exposes `c`)
113 |       var TOKEN_WEBGL = true;
114 |       // px, 0 means always 100%
115 |       var TOKEN_MAX_WIDTH = 1000;
116 |       // px, 0 means always 100%
117 |       var TOKEN_MAX_HEIGHT = 1000;
118 |       // should the size be smaller than specified if viewport is smaller?
119 |       var TOKEN_MAX_100P = true;
120 |       // only if width<100%
121 |       var TOKEN_CENTER_CANVAS = false;
122 |       // "press" reload button on orientation change?
123 |       var TOKEN_RELOAD_ONORIENTATIONCHANGE = false;
124 |     </script>
125 |     <script type="demo">
126 |       // THIS IS WHERE YOUR DEMO GOES
127 |       
128 |       
129 |       
130 |       
131 |       
132 |       
133 |       
134 | b.bgColor=i=j=0;'H9xc#He3yk#Li0zmBe1y9B8w5C9sdNqt#Op8#F2qg#Ne3mm#Na0nbMg1jvAl7k6Si8g5P9h1ScyCl2f9#Ar3kn#K0b6Ca16sSc6d8Tie7VfmCrbgMnciFe7xCo9dNi1lCu7zZn5yGa7awGe8bvAsb4Se9f9Br2aq~Kr3eg#Rb0bzSr1auY67bZr6mNb47Mo5jTc3vRu5jRh3jPd66Ag33Cd8lIn786SnbvSb8d8TemcI2daXe3id#Cs0frBa1kxLa4i7CeegPr9jNdboPm6fSmegEubsGdjdTbgxDyjqHojdEriqTmg9Yb5vLu443Hf66rTa6hW7eRe6vOsaxIr9cPta6Au8bHgb9~Tl7eoPbfeBid8Po64At21tRn3s4#Fr0nsRa1p1Ac5kpThriPahmUtxNpk3PuwgAmmkCmqlBkjhCfniEsj6Fmq0MdloNohcLr5tqRf6peDbl3SgmbBhcfHsotMtkiDslrRghfCnioNh7edFlflMc8hLvciTs287Og313#X'.replace(/(..*?)(\d)?(..)(#)?(~)?(?=[A-Z])/g,(u,v,w,x,y,z)=>{b.innerHTML+=`<center style=color:#fff;font:.8vw/.2vw'arial';width:2.6vw;padding:.5vw;position:absolute;margin:${~~(j/18)*3.8+2}vw+${j%18*3.8+14}vw;background:hsl(${w?t=w*35:t},70%,40%)>${i+1} ${y?'G':z?'L':'S'}<h2 style=text-shadow:2px+2px#222>${v}</h2>`+((parseInt(x,36)+256*i-(68<i?570:1100))/100).toFixed(2)+["83121"[i]]+'* '[42!=i^60!=i^83>i];j+={0:17,3:11,11:11,69:-68,55:54,87:54,101:-68}[i++]|1});b.style.height="42vw"
135 | 
136 | 
137 | 
138 | 
139 |       // END
140 |     </script>
141 |     <script>
142 |       (function(){var doc=document;var header=doc.getElementsByTagName("header")[0];var firstChild=header.firstChild;var p=doc.getElementsByClassName("p")[0];
143 |       var n=doc.getElementsByClassName("n")[0];header.insertBefore(p,firstChild);header.insertBefore(n,firstChild);header.appendChild(doc.getElementsByTagName
144 |       ("p")[0])})();(function reload(fullscreen){var doc=document;var header=doc.getElementsByTagName("header")[0];var iframe=doc.createElement("iframe");doc.
145 |       body.appendChild(iframe);var iwin=iframe.contentWindow;var idoc=iframe.contentDocument;idoc.open();idoc.close();idoc.write("<!doctype html>"+'<html st'+
146 |       'yle="margin: 0; padding: 0; border: 0;'+(TOKEN_CANVAS_SHIM?' width: 100%; height: 100%;':'')+'">'+"<head>"+'<meta charset="utf-8">'+'<body style="mar'+
147 |       'gin: 0; padding: 0; border: 0;'+(TOKEN_CANVAS_SHIM?' width: 100%; height: 100%;':'')+'">'+(TOKEN_CANVAS_SHIM?'<canvas style="display: block;'+(
148 |       TOKEN_CENTER_CANVAS?" margin: auto;":"")+'"></canvas>':"")+"");if(TOKEN_CANVAS_SHIM){var canvas=idoc.getElementsByTagName("canvas")[0];var cs=canvas.style
149 |       ;idoc.body.clientWidth;cs.width=(canvas.width=Math.max(Math.min(TOKEN_MAX_WIDTH||innerWidth,innerWidth),0)||0)+"px";cs.height=(canvas.height=Math.max(
150 |       Math.min(TOKEN_MAX_HEIGHT||innerHeight-50,innerHeight-50),0)||0)+"px"}if(TOKEN_RELOAD_ONORIENTATIONCHANGE)onorientationchange=reloadClick;iwin.AudioContext
151 |       =iwin.AudioContext||iwin.webkitAudioContext;iwin.requestAnimationFrame=iwin.requestAnimationFrame||iwin.mozRequestAnimationFrame||iwin.
152 |       webkitRequestAnimationFrame||iwin.msRequestAnimationFrame||function(f){iwin.setTimeout(f,1E3/30)};if(TOKEN_CANVAS_SHIM)canvas.requestPointerLock=canvas.
153 |       requestPointerLock||canvas.mozRequestPointerLock||canvas.webkitRequestPointerLock;idoc.body.requestPointerLock=idoc.body.requestPointerLock||idoc.body.
154 |       mozRequestPointerLock||idoc.body.webkitRequestPointerLock;navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.
155 |       mozGetUserMedia||navigator.msGetUserMedia;var iwo=iwin.OscillatorNode&&iwin.OscillatorNode.prototype;iwo&&(iwo.start=iwo.start||iwo.noteOn)&&(iwo.stop=iwo
156 |       .stop||iwo.noteOff);if(TOKEN_CANVAS_SHIM)iwin.a=canvas;iwin.b=idoc.body;d=idoc;if(TOKEN_CANVAS_SHIM){if(!TOKEN_WEBGL)iwin.c=canvas.getContext("2d");if(
157 |       TOKEN_WEBGL)iwin.g=function(){iwin.onorientationchange=iwin.onresize=null;try{var o={antialias:true,stencil:true};var gl=canvas.getContext("webgl",o)||
158 |       canvas.getContext("experimental-webgl",o);iwin.__glExts=["OES_texture_float","OES_texture_float_linear","OES_standard_derivatives","EXT_texture_filter_"+
159 |       "anisotropic","MOZ_EXT_texture_filter_anisotropic","WEBKIT_EXT_texture_filter_anisotropic","WEBGL_compressed_texture_s3tc","MOZ_WEBGL_compressed_textur"+
160 |       "e_s3tc","WEBKIT_WEBGL_compressed_texture_s3tc"].map(function(ext){return gl.getExtension(ext)})}catch(e){idoc.body.innerHTML="WebGL not supported.";iwin
161 |       .a=iwin.b=iwin.c=iwin.d=null;throw e;}return gl}()}var demo=idoc.createElement("script");demo.textContent=doc.querySelector('script[type="demo"]').
162 |       textContent;idoc.body.appendChild(demo);idoc.close();iframe.contentWindow.focus();var firstLine=doc.getElementsByTagName("div")[0];function reloadClick(b)
163 |       {doc.body.removeChild(iframe);r.parentElement.removeChild(r);iframe=null;r=null;idoc=null;header=null;reload(b)}window.reload=reloadClick;var r=doc.
164 |       createElement("div");r.innerHTML="&#8635;";r.className="button r";r.title="restart just the demo (local, without remote fetch)";r.onclick=reloadClick;
165 |       header.insertBefore(r,firstLine)})();
166 |     </script>
167 |   </body>
168 | </html>
169 | 


--------------------------------------------------------------------------------
/test.html:
--------------------------------------------------------------------------------
  1 | <body id=b>
  2 | <script>
  3 | 
  4 | // ========
  5 | // PERIOD1k
  6 | // ========
  7 | 
  8 | // Initialize i (element counter: 0 to 117)
  9 | // Initialize j (cell counter: 0 to 187. Cells include elements in colors, and holes in black)
 10 | // Set body's bgColor to 0 (black)
 11 | i=j=b.bgColor=0;
 12 | 
 13 | // Let's put many informations about the 118 elements into a big string:
 14 | // Each line represents an element (line breaks are added here for more clarity)
 15 | // Each line contains
 16 | // - The current element's abbreviated name (1 to 2 characters, starting with a capital letter)
 17 | // - The element's type, but only if it's different from the previous element, (1 digit 0-9, optional)
 18 | // - The element's relative atomic mass (encoded on two characters)
 19 | // - The element's state at room temperature ("~" for liquid, "#" for gas, optional, solid by default)
 20 | 
 21 | 'H9xc#\
 22 | He3yk#\
 23 | Li0zm\
 24 | Be1y9\
 25 | B8w5\
 26 | C9sd\
 27 | Nqt#\
 28 | Op8#\
 29 | F2qg#\
 30 | Ne3mm#\
 31 | Na0nb\
 32 | Mg1jv\
 33 | Al7k6\
 34 | Si8g5\
 35 | P9h1\
 36 | Scy\
 37 | Cl2f9#\
 38 | Ar3kn#\
 39 | K0b6\
 40 | Ca16s\
 41 | Sc6d8\
 42 | Tie7\
 43 | Vfm\
 44 | Crbg\
 45 | Mnci\
 46 | Fe7x\
 47 | Co9d\
 48 | Ni1l\
 49 | Cu7z\
 50 | Zn5y\
 51 | Ga7aw\
 52 | Ge8bv\
 53 | Asb4\
 54 | Se9f9\
 55 | Br2aq~\
 56 | Kr3eg#\
 57 | Rb0bz\
 58 | Sr1au\
 59 | Y67b\
 60 | Zr6m\
 61 | Nb47\
 62 | Mo5j\
 63 | Tc3v\
 64 | Ru5j\
 65 | Rh3j\
 66 | Pd66\
 67 | Ag33\
 68 | Cd8l\
 69 | In786\
 70 | Snbv\
 71 | Sb8d8\
 72 | Temc\
 73 | I2da\
 74 | Xe3id#\
 75 | Cs0fr\
 76 | Ba1kx\
 77 | La4i7\
 78 | Ceeg\
 79 | Pr9j\
 80 | Ndbo\
 81 | Pm6f\
 82 | Smeg\
 83 | Eubs\
 84 | Gdjd\
 85 | Tbgx\
 86 | Dyjq\
 87 | Hojd\
 88 | Eriq\
 89 | Tmg9\
 90 | Yb5v\
 91 | Lu43\
 92 | Hf66r\
 93 | Ta6h\
 94 | W7e\
 95 | Re6v\
 96 | Osax\
 97 | Ir9c\
 98 | Pta6\
 99 | Au8b\
100 | Hgb9~\
101 | Tl7eo\
102 | Pbfe\
103 | Bid8\
104 | Po64\
105 | At21t\
106 | Rn3s4#\
107 | Fr0ns\
108 | Ra1p1\
109 | Ac5kp\
110 | Thri\
111 | Pahm\
112 | Utx\
113 | Npk3\
114 | Puwg\
115 | Ammk\
116 | Cmql\
117 | Bkjh\
118 | Cfni\
119 | Esj6\
120 | Fmq0\
121 | Mdlo\
122 | Nohc\
123 | Lrtq\
124 | Rf6pe\
125 | Dbl3\
126 | Sgmb\
127 | Bhcf\
128 | Hsot\
129 | Mtki\
130 | Dslr\
131 | Rghf\
132 | Cnio\
133 | Nh7ed\
134 | Flfl\
135 | Mc8h\
136 | Lvci\
137 | Ts287\
138 | Og313#\
139 | H'
140 | 
141 | // The last uppercase char ("H") is just here to let the parser below interpret the 118th element correctly
142 | // The code below uses a replace() to separate the 118 elements and retrieve each piece of information, and output each cell of the periodic table in HTML.
143 | // For each element, the RegEx:
144 | // - Captures 1 or 2 letters (".*?" = non-greedy capture) a.k.a. the element's name, the result is stored in the variable v
145 | // - Captures 1 digit a.k.a. the element's type (optional), the result is stored in the variable w
146 | // - Captures 2 letters a.k.a. the atomic mass, the result is stored in the variable x
147 | // - Captures 1 character "#" a.k.a. "Gas" (optional), the result is stored in the variable y
148 | // - Captures 1 character "~" a.k.a "Liquid" (optional), the result is stored in the variable z
149 | // - Stops before the next uppercase letter (with "(?=[A-Z])" at the end)
150 | .replace(/(..*?)(\d)?(..)(#)?(~)?(?=[A-Z])/g,(u,v,w,x,y,z)=>{
151 |   
152 |   // Insert a center element in the page's body
153 |   // Position absolute (instead of fixed) allows to scroll the page, which is generally needed in fullscreen
154 |   // Dimensions in vw unit make the table responsive
155 |   // An ES6 template literal is used to avoid many HTML/var concatenations.
156 |   b.innerHTML+=`<center style='position:absolute;top:${
157 |   
158 |     // Top offset of the current cell = (5.4 * period + 2) vw
159 |     // "2" is used to move a little the table from the top of the page 
160 |     ~~(j/18)*5.4+2
161 |     
162 |   }vw;left:${
163 |   
164 |     // Left offset of the current cell = (5 * column + 4.5) vw
165 |     // 4.5 is used to center the table into the page
166 |     j%18*5+4.5
167 |     
168 |   }vw;font:1vw arial;width:4vw;padding:.4vw;color:#fff;background:hsl(${
169 |   
170 |     // Cell's background is defined in HSL. The Hue (H) is equal to w (the element's type) * 35
171 |     // If w is not null, store its value in t
172 |     // If w is null, reuse the value stored in t (the color of the previous cell)
173 |     // Legend:
174 |     // - 0: non-metals: H, C, N, O, P, S, Se.
175 |     // - 1: Alkaline earth metals – Be, Mg, Ca, Sr, Ba, Ra.
176 |     // - 2: Halogens – F, Cl, Br, I, At.
177 |     // - 3: Noble gases – He, Ne, Ar, Kr, Xe, Rn.
178 |     // - 4: Lanthanoids – La, Ce, Pr, Nd, Pm, Sm, Eu, Gd, Tb, Dy, Ho, Er, Tm, Yb, Lu.
179 |     // - 5: Actinoids – Ac, Th, Pa, U, Np, Pu, Am, Cm, Bk, Cf, Es, Fm, Md, No, Lr.
180 |     // - 6: Transition metals – Elements in groups 3 to 12.
181 |     // - 7: poor metals: Al, Ga, In, Sn, Tl, Pb, Bi, Po.
182 |     // - 8: Metalloids – B, Si, Ge, As, Sb, Te.
183 |     // - 9: Alkali metals – Li, Na, K, Rb, Cs, Fr.
184 |     35*(w?t=w:t)
185 |     
186 |   },70%,40%)'>${
187 |   
188 |     // Element's atomic number
189 |     i+1
190 |     
191 |   } ${
192 |   
193 |     // Element's state at room temperature (Gas / Liquid / Solid)
194 |     y?'G':z?'L':'S'
195 |     
196 |   }<h2 style='margin:0;text-shadow:3px 2px #222'>${
197 |   
198 |     // Element's name, inside a <h2> element with text-shadow and no margins. This element also adds line breaks before and after the name
199 |     v
200 |     
201 |   }</h2>`
202 |   
203 |   // Starting here, it's shorter to concatenate the last pieces of information than to include them in the teplate literal.
204 |   +
205 |   
206 |   // Element's relative atomic mass (average weight of the element and its isotopes, pondered by their abundance, and compared to 1/12 of the mass of a carbon-12 element).
207 |   // How it was encoded:
208 |   // - the mass is multiplied by 100 to get rid of the decimal part (ex: 1.00 => 100 ... 294.21 => 29421).
209 |   // - the number is converted to 2 ASCII chars using this magic formula: x=>(x-i*256+(i>68?570:1100)).toString(36) (ex: 100 => "xc" ... 29421 => "13")
210 |   // This formula exploits the fact that the mass * 100 is nearly equal to 256 times the atomic number plus 570 (when i>68) or 1100 (when i<68).
211 |   // The "difference" is smaller than 1295, and so it can be encoded on only two chars in base 36.
212 |   // Here, the mass is decoded by performing exactly the opposite operation:
213 |   ((parseInt(x,36)+256*i-(68<i?570:1100))/100).toFixed(2)
214 |   
215 |   // Add a "*" if the element is unstable a.k.a. has no stable isotope (elements 43, 61 and 84 to 118)
216 |   + '* '[42!=i^60!=i^83>i];
217 |   
218 |   // Adjust j to the position of the next ellement on the grid, or increment it by 1 by default.
219 |   // - jump 17 cells after element 1
220 |   // - jump 11 cells after elements 4 and 12
221 |   // - jump 54 cells after elements 56 and 88
222 |   // - jump -68 cells after elements 70 and 102
223 |   // And finally, increment i (next element's index)
224 |   j+={0:17,3:11,11:11,55:54,87:54,69:-68,101:-68}[i++]|1
225 | })
226 | </script>


--------------------------------------------------------------------------------
/test.min.html:
--------------------------------------------------------------------------------
1 | <body onload="i=j=b.bgColor=0;'H9xc#He3yk#Li0zmBe1y9B8w5C9sdNqt#Op8#F2qg#Ne3mm#Na0nbMg1jvAl7k6Si8g5P9h1ScyCl2f9#Ar3kn#K0b6Ca16sSc6d8Tie7VfmCrbgMnciFe7xCo9dNi1lCu7zZn5yGa7awGe8bvAsb4Se9f9Br2aq~Kr3eg#Rb0bzSr1auY67bZr6mNb47Mo5jTc3vRu5jRh3jPd66Ag33Cd8lIn786SnbvSb8d8TemcI2daXe3id#Cs0frBa1kxLa4i7CeegPr9jNdboPm6fSmegEubsGdjdTbgxDyjqHojdEriqTmg9Yb5vLu443Hf66rTa6hW7eRe6vOsaxIr9cPta6Au8bHgb9~Tl7eoPbfeBid8Po64At21tRn3s4#Fr0nsRa1p1Ac5kpThriPahmUtxNpk3PuwgAmmkCmqlBkjhCfniEsj6Fmq0MdloNohcLr5tqRf6peDbl3SgmbBhcfHsotMtkiDslrRghfCnioNh7edFlflMc8hLvciTs287Og313#H'.replace(/(..*?)(\d)?(..)(#)?(~)?(?=[A-Z])/g,(u,v,w,x,y,z)=>{b.innerHTML+=`<center style='position:absolute;top:${~~(j/18)*5.4+2}vw;left:${j%18*5+4.5}vw;font:1vw arial;width:4vw;padding:.4vw;color:#fff;background:hsl(${35*(w?t=w:t)},70%,40%)'>${i+1} ${y?'G':z?'L':'S'}<h2 style='margin:0;text-shadow:3px 2px #222'>${v}</h2>`+((parseInt(x,36)+256*i-(68<i?570:1100))/100).toFixed(2)+'* '[42!=i^60!=i^83>i];j+={0:17,3:11,11:11,69:-68,55:54,87:54,101:-68}[i++]|1})"id=b>


--------------------------------------------------------------------------------
/verso.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegolf/period1k/fad214c91ca8fa83c68df08953b9f390a185956d/verso.png


--------------------------------------------------------------------------------
/wallpaper.html:
--------------------------------------------------------------------------------
  1 | <meta charset=utf-8>
  2 | <body id=b>
  3 | <center>
  4 | <canvas id=a width=4000 height=3000>
  5 | <script>
  6 | c=a.getContext("2d");
  7 | //a.style.maxWidth="99%";
  8 | 
  9 | 
 10 | /*** entry ***/
 11 | 
 12 | // ================= //
 13 | //     JS1k'16       //
 14 | //                   //
 15 | //  PERIOD1K TABLE   //
 16 | //                   //
 17 | //        by         //
 18 | //  Maxime Euzière   //
 19 | //   Tommy Hodgins   //
 20 | // Anton Khlynovskiy //
 21 | // ================= //
 22 | 
 23 | // Updated in june 2016 with the four new elements names
 24 | 
 25 | // --------------
 26 | //  Introduction
 27 | // --------------
 28 | 
 29 | // This demo draws a periodic table of chemical elements on a 1090*700 px canvas, including as much useful information as possible, in 1kb.
 30 | // It is drawn from top-left to bottom-right using a single loop and two variables:
 31 | // i represents the current atomic number (values: 1-56,71-88,103-118-57-70,89-102).
 32 | // j represents the current cell of the periodic table (including "gaps", values: 0-178).
 33 | // The cells measure 58*58px and are separated by 2px gutters.
 34 | // The page's background is colored in black using the ancestral hack "b.bgColor=0" (b is the page's <body>).
 35 | // The coordinates of an element are computed from j: horizontally "j%18*60", vertically "~~(j/18)*60".
 36 | // These coordinates are repeated many times in the source code, instead of being set in variables like x and y, to optimize RegPack compression.
 37 | 
 38 | for(i=j=b.bgColor=0;j<178;){
 39 | 
 40 |   // --------------------
 41 |   //  1: Element's group
 42 |   // --------------------
 43 | 
 44 |   // The periodic table represents the element groups as a background color for each element.
 45 |   // According to https://en.wikipedia.org/wiki/Names_for_sets_of_chemical_elements ,
 46 |   // There are a ton of different and overlapping element groups, and all periodic tables are a little different because of that.
 47 |   // Here's our classification:
 48 |   
 49 |   // 0: Alkali metals – Li, Na, K, Rb, Cs, Fr.
 50 |   // 1: Alkaline earth metals – Be, Mg, Ca, Sr, Ba, Ra.
 51 |   // 2: Halogens – F, Cl, Br, I, At.
 52 |   // 3: Noble gases – He, Ne, Ar, Kr, Xe, Rn.
 53 |   // 4: Lanthanoids – La, Ce, Pr, Nd, Pm, Sm, Eu, Gd, Tb, Dy, Ho, Er, Tm, Yb, Lu.
 54 |   // 5: Actinoids – Ac, Th, Pa, U, Np, Pu, Am, Cm, Bk, Cf, Es, Fm, Md, No, Lr.
 55 |   // 6: Transition metals – Elements in groups 3 to 12.
 56 |   // 7: poor metals: Al, Ga, In, Sn, Tl, Pb, Bi, Po.
 57 |   // 8: Metalloids – B, Si, Ge, As, Sb, Te, At (too).
 58 |   // 9: non-metals: H, C, N, O, P, S, Se.
 59 | 
 60 |   // These sets are numbered from 0 to 9 and placed in a 118-char string (1 char per element).
 61 |   // Each element's char is multiplied by 35 (thanks to duck-typing) to define the hue of the hsl background color.
 62 |   // Then the rectangle is drawn
 63 |   
 64 |   c.fillStyle="hsl("+"9301899923017899230166666666667889230166666666667788230144444444444444466666666677772301555555555555555666666666777723"[i]*35+",48%,48%)";
 65 |   c.fillRect(j%18*208+150,~~(j/18)*208+200,200,200);
 66 | 
 67 |   // -------------------
 68 |   //  2. Element's name 
 69 |   // -------------------
 70 | 
 71 |   // The 118 elements' abbreviated names are drawn in the middle of each cell with a little shadow effect.
 72 |   // These names were concatenated in a long string like that:
 73 |   // 
 74 |   // ["H","He","Li","Be","B","C","N","O","F","Ne","Na","Mg","Al","Si","P","S","Cl","Ar","K","Ca","Sc","Ti",
 75 |   // "V","Cr","Mn","Fe","Co","Ni","Cu","Zn","Ga","Ge","As","Se","Br","Kr","Rb","Sr","Y","Zr","Nb","Mo","Tc",
 76 |   // "Ru","Rh","Pd","Ag","Cd","In","Sn","Sb","Te","I","Xe","Cs","Ba","La","Ce","Pr","Nd","Pm","Sm","Eu","Gd",
 77 |   // "Tb","Dy","Ho","Er","Tm","Yb","Lu","Hf","Ta","W","Re","Os","Ir","Pt","Au","Hg","Tl","Pb","Bi","Po","At",
 78 |   // "Rn","Fr","Ra","Ac","Th","Pa","U","Np","Pu","Am","Cm","Bk","Cf","Es","Fm","Md","No","Lr","Rf","Db","Sg",
 79 |   // "Bh","Hs","Mt","Ds","Rg","Cn","Nh","Fl","Mc","Lv","Ts","Og].join();
 80 |   //
 81 |   // The resulting string, used in the code below, is split before each uppercase letter to retrieve the array above.
 82 |   // The name is drawn two times (in gray and in white) with a small offset to make a text-shadow effect.
 83 |   // The two long fillText() statements are repeated on purpose, to optimize RegPack compression.
 84 |   
 85 |   // Set font size, centering, shadow color
 86 |   
 87 |   c.font="bold 55pt arial";
 88 |   c.textAlign="center";
 89 |   c.fillStyle="#444";
 90 |   
 91 |   // Draw text shadow
 92 |   
 93 |   c.fillText("HHeLiBeBCNOFNeNaMgAlSiPSClArKCaScTiVCrMnFeCoNiCuZnGaGeAsSeBrKrRbSrYZrNbMoTcRuRhPdAgCdInSnSbTeIXeCsBaLaCePrNdPmSmEuGdTbDyHoErTmYbLuHfTaWReOsIrPtAuHgTlPbBiPoAtRnFrRaAcThPaUNpPuAmCmBkCfEsFmMdNoLrRfDbSgBhHsMtDsRgCnNhFlMcLvTsOg".split(/(?=[A-Z])/)[i],j%18*208+255,~~(j/18)*208+327);
 94 |   
 95 |   // Set text color
 96 |   
 97 |   c.fillStyle="#fff";
 98 |   
 99 |   // Draw text
100 |   
101 |   c.fillText("HHeLiBeBCNOFNeNaMgAlSiPSClArKCaScTiVCrMnFeCoNiCuZnGaGeAsSeBrKrRbSrYZrNbMoTcRuRhPdAgCdInSnSbTeIXeCsBaLaCePrNdPmSmEuGdTbDyHoErTmYbLuHfTaWReOsIrPtAuHgTlPbBiPoAtRnFrRaAcThPaUNpPuAmCmBkCfEsFmMdNoLrRfDbSgBhHsMtDsRgCnNhFlMcLvTsOg".split(/(?=[A-Z])/)[i],j%18*208+250,~~(j/18)*208+323);
102 | 
103 |   // Set a smaller font size for the other texts
104 |   
105 |   c.font="30pt arial";
106 |   
107 |   // -------------------------------------------------
108 |   //  3. Element's relative atomic mass and stability
109 |   // -------------------------------------------------
110 | 
111 |   // The relative atomic mass of an element is the average weight of the element and its isotopes,
112 |   // pondered by their abundance, and compared to 1/12th of the mass of a carbon-12 element. 
113 |   // More information here: https://en.wikipedia.org/wiki/Relative_atomic_mass
114 | 
115 |   // Atomic masses are rounded to 2 decimals.
116 |   // Each atomic mass is multiplied by 100 to get rid of the decimal part, and placed in this array:
117 |   
118 |   //  m=[100,400,694,901,1081,1201,1401,1600,1900,2018,2299,2431,2698,2809,3097,3206,3545,3995,3910,4008,
119 |   //  4496,4787,5094,5200,5494,5585,5893,5869,6355,6538,6972,7263,7492,7897,7990,8380,8547,8762,8891,9122,
120 |   //  9291,9595,9791,10107,10291,10642,10787,11241,11482,11871,12176,12760,12690,13129,13291,13733,13891,
121 |   //  14012,14091,14424,14491,15036,15196,15725,15893,16250,16493,16726,16893,17305,17497,17849,18095,
122 |   //  18384,18621,19023,19222,19508,19697,20059,20438,20720,20898,20898,20999,22202,22302,22603,22703,
123 |   //  23204,23104,23803,23705,24406,24306,24707,24707,25108,25208,25710,25810,25910,26612,26712,26813,
124 |   //  27113,27013,27715,27816,28117,28217,28518,28619,28919,28919,29320,29421,29421];
125 |   
126 |   // Each number of the array is converted into 2 ASCII chars using this JS (ES6) code:
127 | 
128 |   //   m=m.map((v,i)=>v-i*256+(i>68?570:1100)).map(v=>v.toString(36)).join('');
129 | 
130 |   // Which leads to:
131 | 
132 |   //   m="xcykzmy9w5sdqtp8qgmmnbjvk6g5h1cyf9knb66sd8e7fmbgci7x9d1l7z5yawbvb4f9aqegbzau7b6m475j3v5j3j66338l86bvd\
133 |   //      8mcdaidfrkxi7eg9jbo6fegbsjdgxjqjdiqg95v436r6h7e6vax9ca68bb9eofed8641ts4nsp1kprihmtxk3wgmkqljhnij6q0lo\
134 |   //      hctqpel3mbcfotkilrhfioedfl8hci8713"
135 | 
136 |   // The decoding looks like this, for the i-th element:
137 | 
138 |   //   mass=parseInt(m.substr(i*2,2),36)+i*256-(i>68?570:1100);
139 |   
140 |   // The resulting mass is converted to a string and split two chars before the end to make an array separating entire part and decimal part:
141 |   
142 |   //   mass=(parseInt(m.substr(i*2,2),36)+i*256-(i>68?570:1100)+"").split(/(?=..$)/);
143 |   
144 |   // This array (eg. ["294",21"]) will be coerted to a string (eg. "294,21") when fillText will try to draw it on the canvas.
145 |     // Uncoment the .join(".") snippets to have points instead of commas. 
146 |   // This approach allows to keep all trailing zeroes in the relative atomic masses.
147 |   // If g was just a floating-point number, it would appear as "16" for Oxygen (element 8) instead of "16,00", or "126.9" for Iodine (element 53) instead of "126,90"
148 |   // The code below uses this techniques, with a lot of repetitions to optimize for RegPack.
149 |     
150 |   // Stable elements are elements that have at least one stable isotope.
151 |   // "Unstable" elements have isotopes with half-lives between a few minutes and a few million years.
152 |   // Elements 43, 61 and higher than 85 are unstable.
153 |   // Their relative atomic masses are drawn between parenthesis.
154 |   // More information here: https://commons.wikimedia.org/wiki/File:Periodic_Table_Stability_%26_Radioactivity.png
155 |   // And here: https://en.wikipedia.org/wiki/Radioactive_decay
156 |   // Elements 1 to 4 also get an extra decimal (respectively 8, 3, 1 and 2), because their mass is lower than 10 and there was enough room for that.
157 | 
158 |   c.fillText(
159 |     
160 |     // Stable elements masses
161 |     
162 |     (i!=42^i!=60^i<83)
163 |     
164 |     ?
165 |     
166 |     (parseInt('xcykzmy9w5sdqtp8qgmmnbjvk6g5h1cyf9knb66sd8e7fmbgci7x9d1l7z5yawbvb4f9aqegbzau7b6m475j3v5j3j66338l86bvd8mcdaidfrkxi7eg9jbo6fegbsjdgxjqjdiqg95v436r6h7e6vax9ca68bb9eofed8641ts4nsp1kprihmtxk3wgmkqljhnij6q0lohctqpel3mbcfotkilrhfioedfl8hci8713'.substr(i*2,2),36)+i*256-(i>68?570:1100)+"").split(/(?=..$)/).join(".")
167 |     
168 |     // Extra decimal for elements 1, 2, 3, 4.
169 |     
170 |     +["8312"[i]]
171 |     
172 |     :
173 |     
174 |     // Unstable elements masses between parenthesis
175 |     
176 |     ("("+(parseInt('xcykzmy9w5sdqtp8qgmmnbjvk6g5h1cyf9knb66sd8e7fmbgci7x9d1l7z5yawbvb4f9aqegbzau7b6m475j3v5j3j66338l86bvd8mcdaidfrkxi7eg9jbo6fegbsjdgxjqjdiqg95v436r6h7e6vax9ca68bb9eofed8641ts4nsp1kprihmtxk3wgmkqljhnij6q0lohctqpel3mbcfotkilrhfioedfl8hci8713'.substr(i*2,2),36)+i*256-(i>68?570:1100)+"").split(/(?=..$)/).join(".")+")"),
177 |     j%18*208+250,
178 |     ~~(j/18)*208+380
179 |   );
180 | 
181 |   
182 |   // ------------------
183 |   //  4. Atomic number
184 |   // ------------------
185 | 
186 |   // The atomic number (written on top of each cell) represents the number of protons in the current element.
187 |   // More information: https://en.wikipedia.org/wiki/Atomic_number
188 |   
189 |   c.fillText(i+1,j%18*208+250,~~(j/18)*208+250);
190 |   
191 |   // ----------
192 |   //  5. next!
193 |   // ----------
194 | 
195 |   // j offsets:
196 |   // This operation adds the "gaps" in the table.
197 |   // i.e. 17 gaps after element 0, 11 gaps after element 3, etc.
198 |   // If there's no gap, j is just incremented by 1.
199 | 
200 |   j+={117:21,0:17,3:11,11:11,69:5}[i]|1;
201 | 
202 |   // i offsets:
203 |   // This operation adds the "jumps" in the atomic numbers.
204 |   // i.e: 15 jumps after element 55, etc.
205 |   // If there's no jump, i is just incremented by 1.
206 | 
207 |   i+={117:-61,87:15,69:18,55:15}[i]|1;
208 |   
209 |   // The values are shuffled a little to optimize RegPack compression (note the repetition of "+={117:" and "5}[i]|1")
210 |   
211 | }
212 | 
213 | // -------
214 | //  Title
215 | // -------
216 | 
217 | // Draw the title "PERIOD1K" on top of the canvas, to fill the remaining bytes.
218 | 
219 | c.font="bold 55pt arial";
220 | c.fillText("PERIOD1K",2000,200);
221 | 
222 | // --------------------------
223 | //  Minification and packing
224 | // --------------------------
225 | 
226 | // - Pass this code through closure compiler, advanced mode (https://closure-compiler.appspot.com).
227 | // - Remove the line breaks and the trailing semicolon generated by closure compiler.
228 | // - Paste the result in RegPack (http://siorki.github.io/regPack.html). Pack with the following setup: 10 / 0 / 1 / "Longest string first"
229 | // - Result: 1024b.
230 | // - Yay!
231 | 
232 | /*** end of entry ***/
233 | 
234 | </script>


--------------------------------------------------------------------------------
/wallpaper.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegolf/period1k/fad214c91ca8fa83c68df08953b9f390a185956d/wallpaper.png


--------------------------------------------------------------------------------