ika musume 5k

This is an Ika Musume clock in exactly 5 kilobytes (5120 bytes) of HTML and Javascript. No image and external resource used. You can save a copy in your computer and enjoy it.

You can also click the face and sea to change the appearance; there are three different themes and four different faces available. For the night theme Ika Musume will glow herself. The current theme and face will be saved, so it is fine to refresh.

Note: ika musume 5k requires a modern graphical browser. In the other words, Internet Explorer 8 or earlier is unsupported.

source code

For those don't know how to view the source code, here it is.

<!doctype html><title>ika musume 5k</title><meta rel="shortcut icon" href="data:image/gif;base64,R0lGODlhEAAQAPEDADMzM8zMzP///w
AAACH5BAUAAAMALAAAAAAQABAAAAI8nI+pAw2LgGgTsinwUzLIGVSJ9GXkKHiZGW4Gua7nAagx6Hal3L72jfPtYrWNY+KgOGiNgPO55CRdFksBADs="><style>html
{height:100%}*{margin:0;cursor:default}p,canvas{position:absolute;left:50%;bottom:0}#A{font-family:Century Gothic,URW Gothic L,
Gill Sans,sans-serif;height:100%;color:white;font-weight:100}#B{width:100%;height:250px;left:0}#C{left:0;bottom:50px}#E{height:
60px;width:320px;bottom:400px;margin-left:-160px;text-align:center;font-size:60px}#D{margin-left:-160px}</style><body IKAMUSUME
id=A onselectstart=return!1><p id=B></p><canvas id=C height=200></canvas><canvas id=D width=320 height=400></canvas><p id=E></p
><img onload="var X,Y=document.createElement('canvas'),Z=[];Y.width=1638;Y.height=1;Y=Y.getContext('2d');Y.drawImage(this,0,0);
Y=Y.getImageData(0,0,1638,1).data;for(X=0;X<6552;X+=4)Z.push(String.fromCharCode(Y[X],Y[X+1],Y[X+2]));eval(Z.join(''))" style="
display:none" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABmYAAAABCAIAAABL+YaUAAAACXZwQWcAAAZmAAAAAQCxtFU1AAAKyUlEQVRYR4
0YCXua2vL9lJT7NRcEDKDGREKMcYEDiFGz3VLaIuASjaSIS0LDb39zWEza197vxU+ZmTMzZ86sh/xnYwcHS6lrh9NiYC9d/5F5kha+Yy+GoR/YE+/Hj+hVHK+XTjjzl
wffyTEVBV64DpYHru+sH71lWJx4YXvhYfDyGbnA8brnD97xj89P6+MawRH0+BXvupKeirO5/TX8WPrxg2PCDB1/LGN0LZmRUyP+4niBYOyamUEcAwDHAVA8ZjIabzGj
mlk6Zo5PGZ4vW4xXMzmGrzIlgMc18/iEOanAyqnFuDX+lUn0lk+8TG8CYb0no3GuN6GleoVKhRH4E/hyieZTgeHL8D3lEuV8tcwInMAIQgmr5zL13ug4U18tl1L1Y+c
4V5/QUvX86QnDg+08X0nUC+Uq6CtjWqK/AupPGaGSKreY3Vswnkkq2klrc2WJYz8gsU/HEgHb4p+FxIm7om0uLHFBSwIVjWmJYBx/4QfsKvSfSII2k3Ua7EgZLZqgCN
HGfASdkmjigKB5jivkrDTxkXj9ThINgiquvLARhsFstA49kliFzwtwGjGynfkk8NdLt4a1ODQh/i/pgN16o/ksZCeB7c4gc8jFbOnZAbPwxuHByA9DSMQEBlMhYcCy3
2p59F/YVPJNkwM/XpApIWgbn4oSx9I+X53As0MvS1mScOzlxl5hluJ25oZT6ZjjAJ56s8k0lIQKJ9rSGCd50wfFO5AQXOC2i+PZAqoETi0RwWREYqNGqQuTpYHnhCQH
oQd9EEAOi2Bb75JNyknMcJQWZyVOpOkFFeEITqUlSRW4Ik9zxVOQWIWBP/fetrFx4KYQj5HJWVAnKci/gQIGQUcaTbzJFDaZnkEUYZdpusso2QUbNk8gMI+ZJRCw0QL
HuAlS4li+AkaMvMlseQU9gsSHePQ33rVPjph5fiSM0TNmTruUOBtj+Bx7kYremNlks/cCmJIJvebnJKlXnF2X/092rYMF+GJcDP2WHdo3A52kklC/dZ8X3H3wcW3JtJ
gF5MC4GHhPC9vxyKP4aMIQCOG4Z8WT+mlcXHjLSThNnbUAEWdqB03f9RohOaXYagnO8LReTcnFeZmrQ1FwBfInJiwIbFRtAbYk/hdAr/1er21OLVqCX1awxKw/2q+5I
Q2JXnrbAziWx1xi05tSiWNaUoVpg4ntM6kJStpUdJnaYVpvZ1AkXlTOpBYwKNSl2bZSlharvPMLgsaxR8akkzrJl14AFB3Jh8zaK3wAFDrEo+Rn9rMC42GbJmDK5OxR
nCTdBbNu0jHyOFuSE+aR5U8oMSOtgKTSm6MSVSChAxY2R4+U6KWm+eaEFix6U3AYDJYw+EC9LkgB+nYFyj5PIQ/Moh3GA3Poh/TEE/As2MDyAjbjmBpBpr7MvKC5DjK
RSSoywa3rIQGEnFLKKeWcUkkUj/IM9cxH9sSihWKlgNcf2WqKAI8v5av4IVgFgToqiZOUWk2pfEYdFb+vbTeww5mT2+XTAqgEWwoPTKqASSWo33KzCTebc59Y7Hub2M
ymn+yGMcimDHzJYvfuwlFhwVnnOHjs7z1GZ6LYH2zuMzb3WUrJcT7RPdpXL4C49ZHvks3G+eWkuZWmmYPza0H6DM+9C6+D08yB9kW9y72S+HDm5IXz8LsQO+YDFnug+
fQhpI9S+iinjwoo9Q/5w8NR0Vn4Ky9rZf75uXBYxdTUaEyoYHTfjPanWJCQnlSU+rhpP0Evxk2I2J8969B/lUolIgtF2uhJB5RSR0LmmpTPhAkNN4LxGD88Z0Qk1w83
wU6q+IH1MGnDxzMEPkWBIizTSWy28L5T2/W3TTzRYd/qqU3siZeLdSA5h8Lh4a7o1v2CVuPE0fsu/pr2u2yQOws8OBNzRSA1gZROwu          k+FCMpW/h1DsIAg
WYwg3yaneGuM6NyERdobtqrXGpuzqysPdg7EmP4kndpuhZeIDOATmcfV8G/J/SlSbo0T30km/CL1wvYCXjCzCGFzltUNJPmZgvqh   uUTS3/aM   sJKwSGzcQihTZ
Ck4cyo1/mePN/T4LRHzUTL+8NEroSNTTJ3mx7gyd+SPOsetSAkFeqnWPP0nsNl+HT1twN8Vxwz23RCj365R2Tr3tv6++m7Lxf2   uF1iWIGjsoPz   6cFdWipR0Vb
KHJrY3cEY1AfgjJzAQrL2aym5hSmzLWwLVSZxO2CdQifFBIzJBblQpV73fWZvwb5+3lVOkjCt3ySMiGsQLmz761EJrhtlu     CyIcBXJpl5itibhO     1ClsJ8g
9PxjpV06OgFeRpUAZRvUEUiK4LLRRt943yuRjr5bwyEa1ocfrOgMfajU66g+rOMpTxIX6uouGMTGo/Gp75rfrsaqcaHL  P  cVQe0oPqYoGH0O+jlPuv  r  zpAfd
gG9vIanyRvyDjStcMzUBXqIeAF2mo19tzK1sz6MfNtdrylKHlyRbqtww0QFdDQ71COjLg2zWucvbO2gj7cSdUL0bNz5 87 d8pENr            o9tYe6 Sl dFqm
EMUBffMkniZbC5DrV4I/nMV1nV+priNkKViWNxY8gvsQaWy3e0FUlxfLPWhj7SBx0ko+eL80CM47Vqu1c60i478ssF v6 pT     cao1GK61XQ/J     Rk eD P2M
INmodTVZanZaE2jlPYIW9drdjKH2kX3VVWW9rl2oTye12R0t5NoPdINLjC6szVK7QnaJd3B7a8ifZ2qBbT3PUldpo Vx    uHR6ftcySrNeVCqTeP42M7    zu x4
6W0HO6P+EMfKII7v4Vhx79s1+G1QigfzOEZncdw+BGp10kQdVGX2crve86e20gKvoqu+qmPjG7KSWd5b9yJTQbKmw    kcHD4 FH ZBnlsuH1 zv yzbDR8+    fz
5z8LRffQvG+/uV/8mvOtu7uOhu1a1LVI/lWJVg7NJX3d1tIFMpfeni/TNP7H+sNW0naZ2uVjVgU92I0kOzmWZzPkGu 95OvdQ F  q SPK4v  X  p rWKg2xUQ 8uX
w007tdW1BrimNWu3SaGvtZ9TdLz93t/W4G3QHM304v7cUCz1WtcZVQY/O8A4zCb9I4+FjmaEluhhNCAk6zVEhQW3S    JFb 3696qH  h  uXA7kPZ RXDCF    vd
h73VeWx0Bmpf7RkxgXsPlXG/3IXnsaYMYUntptwvd1sgta6UvtLT33N/Wfe3AwQFqulaV9ZltYPastYEofX8ubc9irX6 Te euY  yRC   bi4U  3e0 Gqtx  Fqqb
pkOyQQjL4IBGKbjdFBCV/o9yp3eF7qc0wGqxRp98379E9GlY7DUX+AKwgthkGAz9WFw6aKsrfsdL+gE67CX13HUKBqAM D Sl1    ryG1FhkL    RQO vU S kq+o
e/MVS/uh1p/Ylh3pvFF7SvYKYZxo/XULlJUXetpw7xDaDt924u7K605bdnVLw1b7qNBp5/2Kbkn32Y5EA6j4Vb8W3mu B   +rp  w1CN46GA62  V69W    1 cu6F
d4fbmK5SbVxuc3t/cTa1/9HqrGOvf4njQjuOT9fm2fnSo5NUcQR5+uwf5T+VAQ1sdqjh2aoCv6qG0ulBf6iiov2jZ3l E/Q lHdvYnj2xNvd/5d2SDlS6 Df m Z6UF
DjMAOglxdly6QXKdVeXAnKOJ4Lir4MVScELG7zLZ7TubAmver9Sh57jL11MzV8M/SXcV5x5fiHJ0fyqBu822f+VpJVE rvD  9oSQ+w0QSs4H0R4GxFE  pk i AXKr
1hChPckEV5DEf5/wsZekIgpcdTBfwEcMNiMZ59TSgAAAABJRU5ErkJggg=="><!-- by Kang Seonghoon http://cosmic.mearie.org/2010/12/ika5k/ --> 

technical

ika musume 5k uses some of modern web technologies (colloquially called HTML5, if you prefer) to achieve the small size:

(I originally planned to use SVG with HTML canvas, but an inline SVG in text/html is not yet widely supported.)

The code compression is done by three phases: manual code restructuring, minification and PNG compression. PNG compression did work well—shaves 20% of the total code—and also used to embed a small image of Ika Musume to the final code (as base64 encoding silently ignores whitespaces). Minification is done via Closure Compiler's advanced optimization. The manual restructuring is done because there are still lots of optimizations that Closure Compiler cannot figure out, for example, how to save the large paths (I delta-encoded them into small strings).

The paths themselves are drawn by myself, albeit with a help of several reference images. There are also great amount of heuristics to adjust parameters; for example, I experimented with several options for implementing the interactive sea. (Could you figure out the final choice?)

The original, pre-compressed version is available in here. Still slightly obfuscated as I kept the obfuscation in mind from the first time, but there are some helpful comments.

colophon

Shinryaku! Ika Musume is copyright © Masahiro Anbe (安部真弘). All rights reserved.

Kang Seonghoon — Kawaii ja naika?