JS1k 2016 - 2402 - Details - A simply crazy JavaScript golfing competition

Author:

Codegolf Team

Twitter:

GitHub:

codegolf

Facebook:

Google+:

Reddit:

/r/

Pouet:

Website:

github.com/codegolf/period1k

Compo:

canvas

Demo link:

https://js1k.com/2016-elemental/demo/2402

Shortlink:

https://js1k.com/2402

Blog post:

please update here!

Bytes:

1024

Chars:

1024

Submission

for(_='1,",),+={117:j%18*60,+3:1c.font="pt arial"[i].split(/(?=c.fill662301Style="	Text(bold 1555544467,60*~~(j/18)+"HHeLiBeBCNOFNeNaMgAlSiPSClArKCaScTiVCrMnFeCoNiCuZnGaGeAsSeBrKrRbSrYZrNbMoTcRuRhPdAgCdInSnSbTeIXeCsBaLaCePrNdPmSmEuGdTbDyHoErTmYbLuHfTaWReOsIrPtAuHgTlPbBiPoAtRnFrRaAcThPaUNpPuAmCmBkCfEsFmMdNoLrRfDbSgBhHsMtDsRgCnUutFlUupLvUusUuo"[A-Z])/)(parseInt("xcykzmy9w5sdqtp8qgmmnbjvk6g5h1cyf9knbsd8e7fmbgci7x9d1l7z5yawbvb4f9aqegbzau7b6m475j3v5j3j338l86bvd8mcdaidfrkxi7eg9jbo6fegbsjdgxjqjdiqg95v436r6h7e6vax9ca68bb9eofed8641ts4nsp1kprihmtxk3wgmkqljhnij6q0lohctqpel3mbcfotkilrhfioedfl8hci8713".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	#fff09,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(_)

Description

The (mandatory) periodic table of chemical elements, including type, name, atomic number, atomic mass and stability for each of the 118 elements! The full size of the table is 1090 * 700px, you may need to unzoom a little to see it entirely. Authors: Maxime EUZIERE, Tommy HODGINS, Anton KHLYNOVSKIY Types (background colors): Alkali metals – Li, Na, K, Rb, Cs, Fr. Alkaline earth metals – Be, Mg, Ca, Sr, Ba, Ra. Halogens – F, Cl, Br, I, At. Noble gases – He, Ne, Ar, Kr, Xe, Rn. Lanthanoids – La, Ce, Pr, Nd, Pm, Sm, Eu, Gd, Tb, Dy, Ho, Er, Tm, Yb, Lu. Actinoids – Ac, Th, Pa, U, Np, Pu, Am, Cm, Bk, Cf, Es, Fm, Md, No, Lr. Transition metals – Elements in groups 3 to 12. Poor metals: Al, Ga, In, Sn, Tl, Pb, Bi, Po. Metalloids – B, Si, Ge, As, Sb, Te. Non-metals: H, C, N, O, P, S, Se. Relative atomic mass is rounded to 2 decimals (3 for light elements); it's written between parenthesis if the element is unstable.

Base64 encoded

Zm9yKF89JzEsGSIsGCksFys9ezExNzoWaiUxOCo2MBUsFSszFDoxE2MuZm9udD0iEnB0IGFyaWFsIhFbaV0QLnNwbGl0KC8oPz0PYy5maWxsDjY2DDIzMDELDlN0eWxlPSIJDlRleHQoCBJib2xkIDE1EQc1NTUGNDQ0BQwMDAw2NwQsNjAqfn4oai8xOCkrAxgIIkhIZUxpQmVCQ05PRk5lTmFNZ0FsU2lQU0NsQXJLQ2FTY1RpVkNyTW5GZUNvTmlDdVpuR2FHZUFzU2VCcktyUmJTcllack5iTW9UY1J1UmhQZEFnQ2RJblNuU2JUZUlYZUNzQmFMYUNlUHJOZFBtU21FdUdkVGJEeUhvRXJUbVliTHVIZlRhV1JlT3NJclB0QXVIZ1RsUGJCaVBvQXRSbkZyUmFBY1RoUGFVTnBQdUFtQ21Ca0NmRXNGbU1kTm9MclJmRGJTZ0JoSHNNdERzUmdDblV1dEZsVXVwTHZVdXNVdW8iD1tBLVpdKS8pEBQCKHBhcnNlSW50KCJ4Y3lrem15OXc1c2RxdHA4cWdtbW5ianZrNmc1aDFjeWY5a25iDHNkOGU3Zm1iZ2NpN3g5ZDFsN3o1eWF3YnZiNGY5YXFlZ2J6YXU3YjZtNDc1ajN2NWozagwzMzhsODZidmQ4bWNkYWlkZnJreGk3ZWc5amJvNmZlZ2JzamRneGpxamRpcWc5NXY0MzZyNmg3ZTZ2YXg5Y2E2OGJiOWVvZmVkODY0MXRzNG5zcDFrcHJpaG10eGszd2dta3FsamhuaWo2cTBsb2hjdHFwZWwzbWJjZm90a2lscmhmaW9lZGZsOGhjaTg3MTMiLnN1YnN0cigyKmksMhczNikrMjU2KmktKDY4PGk/NTcwEzEwMCkrIiIpDy4uJCkvKSsBZm9yKGk9aj1iLmJnQ29sb3I9MDsxNzg+ajspCWhzbCgiKzM1KiI5MzAxODk5OQs3ODk5CzYEODg5CzYENzg4CwUFBQUFBDc3NwsGBgYGBgQ3NzcyMyIQKxg0OCUsNDglKRgOUmVjdCgVAzMwLDU4LDU4FwcsYy50ZXh0QWxpZ249ImNlbnRlchgJIwUCMgM2OBcJI2ZmZgIwAwwXEjkRLAg0MiE9aV42MCE9aV44Mz5pPwFbIjgzMTIiEF06IigiKwEiKSIUMAM4MxcIaSsxFDADNDUXahYyGTATNywzExkxMRMZNjk6NX0QfBlpFi02GTg3EzUsNjkTOCw1NRM1fRB8MTsHOwgiUEVSSU9EMUsYNTQ1LDUwKSc7Zz0vWwEtGV0vLmV4ZWMoXyk7KXdpdGgoXy5zcGxpdChnKSlfPWpvaW4oc2hpZnQoKSk7ZXZhbChfKQ==

Original source

// ================= //
//     JS1k'16       //
//  PERIOD1K TABLE   //
//  Maxime Euzière   //
//   Tommy Hodgins   //
// Anton Khlynovskiy //
// ================= //

// --------------
//  Introduction
// --------------

// This demo draws a periodic table of chemical elements on a 1090*700 px canvas, including as much useful information as possible, in 1kb.
// It is drawn from top-left to bottom-right using a single loop and two variables:
// i represents the current atomic number (values: 1-56,71-88,103-118-57-70,89-102).
// j represents the current cell of the periodic table (including "gaps", values: 0-178).
// The cells measure 58*58px and are separated by 2px gutters.
// The page's background is colored in black using the ancestral hack "b.bgColor=0" (b is the page's <body>).
// The coordinates of an element are computed from j: horizontally "j%18*60", vertically "~~(j/18)*60".
// These coordinates are repeated many times in the source code, instead of being set in variables like x and y, to optimize RegPack compression.

for(i=j=b.bgColor=0;j<178;){

  // --------------------
  //  1: Element's group
  // --------------------

  // The periodic table represents the element groups as a background color for each element.
  // According to https://en.wikipedia.org/wiki/Names_for_sets_of_chemical_elements ,
  // There are a ton of different and overlapping element groups, and all periodic tables are a little different because of that.
  // Here's our classification:
  
  // 0: Alkali metals – Li, Na, K, Rb, Cs, Fr.
  // 1: Alkaline earth metals – Be, Mg, Ca, Sr, Ba, Ra.
  // 2: Halogens – F, Cl, Br, I, At.
  // 3: Noble gases – He, Ne, Ar, Kr, Xe, Rn.
  // 4: Lanthanoids – La, Ce, Pr, Nd, Pm, Sm, Eu, Gd, Tb, Dy, Ho, Er, Tm, Yb, Lu.
  // 5: Actinoids – Ac, Th, Pa, U, Np, Pu, Am, Cm, Bk, Cf, Es, Fm, Md, No, Lr.
  // 6: Transition metals – Elements in groups 3 to 12.
  // 7: poor metals: Al, Ga, In, Sn, Tl, Pb, Bi, Po.
  // 8: Metalloids – B, Si, Ge, As, Sb, Te, At (too).
  // 9: non-metals: H, C, N, O, P, S, Se.

  // These sets are numbered from 0 to 9 and placed in a 118-char string (1 char per element).
  // Each element's char is multiplied by 35 (thanks to duck-typing) to define the hue of the hsl background color.
  // Then the rectangle is drawn
  
  c.fillStyle="hsl(" "9301899923017899230166666666667889230166666666667788230144444444444444466666666677772301555555555555555666666666777723"[i]*35 ",48%,48%)";
  c.fillRect(j%18*60,~~(j/18)*60 30,58,58);

  // -------------------
  //  2. Element's name 
  // -------------------

  // The 118 elements' abbreviated names are drawn in the middle of each cell with a little shadow effect.
  // These names were concatenated in a long string like that:
  // 
  // ["H","He","Li","Be","B","C","N","O","F","Ne","Na","Mg","Al","Si","P","S","Cl","Ar","K","Ca","Sc","Ti",
  // "V","Cr","Mn","Fe","Co","Ni","Cu","Zn","Ga","Ge","As","Se","Br","Kr","Rb","Sr","Y","Zr","Nb","Mo","Tc",
  // "Ru","Rh","Pd","Ag","Cd","In","Sn","Sb","Te","I","Xe","Cs","Ba","La","Ce","Pr","Nd","Pm","Sm","Eu","Gd",
  // "Tb","Dy","Ho","Er","Tm","Yb","Lu","Hf","Ta","W","Re","Os","Ir","Pt","Au","Hg","Tl","Pb","Bi","Po","At",
  // "Rn","Fr","Ra","Ac","Th","Pa","U","Np","Pu","Am","Cm","Bk","Cf","Es","Fm","Md","No","Lr","Rf","Db","Sg",
  // "Bh","Hs","Mt","Ds","Rg","Cn","Uut","Fl","Uup","Lv","Uus","Uuo].join();
  //
  // The resulting string, used in the code below, is split before each uppercase letter to retrieve the array above.
  // The name is drawn two times (in gray and in white) with a small offset to make a text-shadow effect.
  // The two long fillText() statements are repeated on purpose, to optimize RegPack compression.
  
  // Set font size, centering, shadow color
  
  c.font="bold 15pt arial";
  c.textAlign="center";
  c.fillStyle="#444";
  
  // Draw text shadow
  
  c.fillText("HHeLiBeBCNOFNeNaMgAlSiPSClArKCaScTiVCrMnFeCoNiCuZnGaGeAsSeBrKrRbSrYZrNbMoTcRuRhPdAgCdInSnSbTeIXeCsBaLaCePrNdPmSmEuGdTbDyHoErTmYbLuHfTaWReOsIrPtAuHgTlPbBiPoAtRnFrRaAcThPaUNpPuAmCmBkCfEsFmMdNoLrRfDbSgBhHsMtDsRgCnUutFlUupLvUusUuo".split(/(?=[A-Z])/)[i],j%18*60 32,~~(j/18)*60 68);
  
  // Set text color
  
  c.fillStyle="#fff";
  
  // Draw text
  
  c.fillText("HHeLiBeBCNOFNeNaMgAlSiPSClArKCaScTiVCrMnFeCoNiCuZnGaGeAsSeBrKrRbSrYZrNbMoTcRuRhPdAgCdInSnSbTeIXeCsBaLaCePrNdPmSmEuGdTbDyHoErTmYbLuHfTaWReOsIrPtAuHgTlPbBiPoAtRnFrRaAcThPaUNpPuAmCmBkCfEsFmMdNoLrRfDbSgBhHsMtDsRgCnUutFlUupLvUusUuo".split(/(?=[A-Z])/)[i],j%18*60 30,~~(j/18)*60 66);

  // Set a smaller font size for the other texts
  
  c.font="9pt arial";
  
  // -------------------------------------------------
  //  3. Element's relative atomic mass and stability
  // -------------------------------------------------

  // The relative atomic mass of an element is the average weight of the element and its isotopes,
  // pondered by their abundance, and compared to 1/12th of the mass of a carbon-12 element. 
  // More information here: https://en.wikipedia.org/wiki/Relative_atomic_mass

  // Atomic masses are rounded to 2 decimals.
  // Each atomic mass is multiplied by 100 to get rid of the decimal part, and placed in this array:
  
  //  m=[100,400,694,901,1081,1201,1401,1600,1900,2018,2299,2431,2698,2809,3097,3206,3545,3995,3910,4008,
  //  4496,4787,5094,5200,5494,5585,5893,5869,6355,6538,6972,7263,7492,7897,7990,8380,8547,8762,8891,9122,
  //  9291,9595,9791,10107,10291,10642,10787,11241,11482,11871,12176,12760,12690,13129,13291,13733,13891,
  //  14012,14091,14424,14491,15036,15196,15725,15893,16250,16493,16726,16893,17305,17497,17849,18095,
  //  18384,18621,19023,19222,19508,19697,20059,20438,20720,20898,20898,20999,22202,22302,22603,22703,
  //  23204,23104,23803,23705,24406,24306,24707,24707,25108,25208,25710,25810,25910,26612,26712,26813,
  //  27113,27013,27715,27816,28117,28217,28518,28619,28919,28919,29320,29421,29421];
  
  // Each number of the array is converted into 2 ASCII chars using this JS (ES6) code:

  //   m=m.map((v,i)=>v-i*256 (i>68?570:1100)).map(v=>v.toString(36)).join('');

  // Which leads to:

  //   m="xcykzmy9w5sdqtp8qgmmnbjvk6g5h1cyf9knb66sd8e7fmbgci7x9d1l7z5yawbvb4f9aqegbzau7b6m475j3v5j3j66338l86bvd\
  //      8mcdaidfrkxi7eg9jbo6fegbsjdgxjqjdiqg95v436r6h7e6vax9ca68bb9eofed8641ts4nsp1kprihmtxk3wgmkqljhnij6q0lo\
  //      hctqpel3mbcfotkilrhfioedfl8hci8713"

  // The decoding looks like this, for the i-th element:

  //   mass=parseInt(m.substr(i*2,2),36) i*256-(i>68?570:1100);
  
  // 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:
  
  //   mass=(parseInt(m.substr(i*2,2),36) i*256-(i>68?570:1100) "").split(/(?=..$)/);
  
  // This array (eg. ["294",21"]) will be coerted to a string (eg. "294,21") when fillText will try to draw it on the canvas.
    // Uncoment the .join(".") snippets to have points instead of commas. 
  // This approach allows to keep all trailing zeroes in the relative atomic masses.
  // 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"
  // The code below uses this techniques, with a lot of repetitions to optimize for RegPack.
    
  // Stable elements are elements that have at least one stable isotope.
  // "Unstable" elements have isotopes with half-lives between a few minutes and a few million years.
  // Elements 43, 61 and higher than 85 are unstable.
  // Their relative atomic masses are drawn between parenthesis.
  // More information here: https://commons.wikimedia.org/wiki/File:Periodic_Table_Stability_%26_Radioactivity.png
  // And here: https://en.wikipedia.org/wiki/Radioactive_decay
  // 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.

  c.fillText(
    
    // Stable elements masses
    
    (i!=42^i!=60^i<83)
    
    ?
    
    (parseInt('xcykzmy9w5sdqtp8qgmmnbjvk6g5h1cyf9knb66sd8e7fmbgci7x9d1l7z5yawbvb4f9aqegbzau7b6m475j3v5j3j66338l86bvd8mcdaidfrkxi7eg9jbo6fegbsjdgxjqjdiqg95v436r6h7e6vax9ca68bb9eofed8641ts4nsp1kprihmtxk3wgmkqljhnij6q0lohctqpel3mbcfotkilrhfioedfl8hci8713'.substr(i*2,2),36) i*256-(i>68?570:1100) "").split(/(?=..$)/)/*.join(".")*/
    
    // Extra decimal for elements 1, 2, 3, 4.
    
     ["8312"[i]]
    
    :
    
    // Unstable elements masses between parenthesis
    
    ("(" (parseInt('xcykzmy9w5sdqtp8qgmmnbjvk6g5h1cyf9knb66sd8e7fmbgci7x9d1l7z5yawbvb4f9aqegbzau7b6m475j3v5j3j66338l86bvd8mcdaidfrkxi7eg9jbo6fegbsjdgxjqjdiqg95v436r6h7e6vax9ca68bb9eofed8641ts4nsp1kprihmtxk3wgmkqljhnij6q0lohctqpel3mbcfotkilrhfioedfl8hci8713'.substr(i*2,2),36) i*256-(i>68?570:1100) "").split(/(?=..$)/)/*.join(".")*/ ")"),
    j%18*60 30,
    ~~(j/18)*60 83
  );

  
  // ------------------
  //  4. Atomic number
  // ------------------

  // The atomic number (written on top of each cell) represents the number of protons in the current element.
  // More information: https://en.wikipedia.org/wiki/Atomic_number
  
  c.fillText(i 1,j%18*60 30,~~(j/18)*60 45);
  
  // ----------
  //  5. next!
  // ----------

  // j offsets:
  // This operation adds the "gaps" in the table.
  // i.e. 17 gaps after element 0, 11 gaps after element 3, etc.
  // If there's no gap, j is just incremented by 1.

  j ={117:21,0:17,3:11,11:11,69:5}[i]|1;

  // i offsets:
  // This operation adds the "jumps" in the atomic numbers.
  // i.e: 15 jumps after element 55, etc.
  // If there's no jump, i is just incremented by 1.

  i ={117:-61,87:15,69:18,55:15}[i]|1;
  
  // The values are shuffled a little to optimize RegPack compression (note the repetition of " ={117:" and "5}[i]|1")
  
}

// -------
//  Title
// -------

// Draw the

JS1k: The JavaScript code golfing competition

2016 - Let's get eleMental!