Happy Programming

くるくる回る写真

beanz (2009年4月 9日 12:32) | コメント(0) | トラックバック(0)

オライリーから出版されている「初めてのActionScript3.0」という書籍の中に「モーション」という章がある。
さらにその中に「幾何学と三角法」という節があり、角度や距離の事や円運動の事が書かれている。
僕は学生の頃から出来損ないだったのでそこに書かれてあるサインコサインだのラジアンだの到底理解出来なかったのだが、よくコードを見てみるとそのままJavascriptでも適用出来るんじゃないかと思った。
早速以下のようなコードを書き、試してみた。

$$('img).each(function(elem) {
    var top = Math.random() * document.viewport.getDimensions().height + document.viewport.getScrollOffsets()[1];
    var left = Math.random() * document.viewport.getDimensions().width
    elem.setStyle({
        position: 'absolute',
        top: top + 'px',
        left: left + 'px'
    });
    var angle = 0;
    var radius = Math.random() * 100;
    var angleChange = Math.random() * 10;
    var centerX = top;
    var centerY = left;
    var timeId = setInterval(function() {
        var radian = deg2rad(angle);
        var top = centerX + radius * Math.cos(radian);
        var left = centerY + radius * Math.sin(radian);
        elem.setStyle({
            top: top + 'px',
            left: left + 'px'
        });
        angle += angleChange;
        angle %= 360;
    }, 15);
});
function deg2rad(deg) {
    return deg * (Math.PI / 180);
}

下のClickを押すと突然写真が数枚ランダムに配置されてくるくる回りだす。（ちょっと気持ち悪いかも、そしてCPUには優しくない）
その後、各写真に対してマウスオーバーすると動きが止まり、クリックすると本来の'static'な配置になる。

Click!!