その他

1000byteで作られたすごいJavaScript

前回紹介した「誰でも楽しめるJavaScriptで作られた3つのサイト」の中の

「http://js1k.com/2012-love/demo/1041」がとても気になったため調べました。
※[F5]などで更新するたびに見た目が変わります

<canvas id="c">
</canvas>
<script>
var b = document.body;
var c = document.getElementsByTagName('canvas')[0];
var a = c.getContext('2d');
document.body.clientWidth;
</script><script>
// Jim Bumgardner krazydad.com
c.width = c.height = 600;
var nd = 360;
var w = c.width;
var h = c.height;
var fc=Math.floor(Math.random()*100000);
var p2 = 3.1415927*2;
setInterval(function() {
a.fillStyle = 'rgba(0,0,0,.05)';
a.fillRect(0,0,w,h);
a.fillStyle = '#fff';var n = fc/600;
var rd = w*.97/2;
var cx = w/2;
var cy = h/2;
for (var i = 0; i <= nd; ++i) {
var t = i*p2/nd;
var r = rd*Math.sin(n*t);
var r2 = 1+Math.abs(r/70);
var px = cx+Math.cos(t)*r;
var py = cy+Math.sin(t)*r;
var hu = Math.pow(i/nd,2)*360;
a.fillStyle = 'hsla(' + hu +',33%,66%,1)';
a.beginPath();
a.arc(px,py,r2,0,p2,false);
a.fill();
}
++fc;
}, 40);
</script>

たったこれだけで、この表現はすごいですね。
ブログに収まるように一部プログラムを変更しています。

-その他