カンバスたれ、計算機

やがて竜巻を引き起こす

この記事はスマートフォン等での閲覧を推奨しています

こないだのアオスジアゲハを人に見せていて、せっかくアオスジアゲハを作ったのだから翅(はね)の構造色（光の加減で色合いが変わる目の覚めるような水色）の部分の光の反射を動かせないかと訊かれました。

動かせるよ、それ。

あまりこういう使い方はされないのでしょうが、svg要素中にそのままJavaScriptの処理を書いてやって（当然、ブラウザのjs環境で動くわけですから端末の傾きもAPIから取得でき、）『画像が自ずから動く』ようにすることができます。

仕組みはSVGでプログラマブルな書体を作る話の加速度センサで書体を変化させるものにならいますが、

  • idを用いて画像中の要素を掴む
  • センサに反応があればsetAttribute()関数を用いて属性値を直接書きかえる

という手順になっています。

書いているうちに、よーしついでに羽ばたかせてしまおう、となったので transform 属性の値も書き換えます。ここは翅に幾何変形をかけているところで、今回はx軸方向のスケールを変化させました。

以下コード。プログラムとしては単純。

59
60
61
62
63
64
65
66
67
68
69
70
71
72

<script><![CDATA[ //svg画像中にJavaScriptコードを直接書き込むイディオム
  var grad = document.getElementById('radialGradient5666'), // ハイライトを表現するグラデーションと
    p = document.getElementById('g5651'); // pathで描いた翅をそれぞれ掴む
  window.addEventListener('deviceorientation', function(e) { // センサに反応があるときに以下、
    var r = 100 + (Math.abs(e.gamma)+Math.abs(e.beta))/90 * 600,
      xoff = e.beta * 10; // 取得した値からパラメータをいい感じに定め
    grad.setAttribute('r', r); // ハイライトの半径
    grad.setAttribute('cx', xoff); // ハイライトの中心x座標
    grad.setAttribute('fx', xoff); // focial point (焦点) x座標 等の値を直接書き換え
    p.setAttribute('transform', 'translate(225.21687,-14.655479)' + // 翅の横方向拡大率
      'scale(' + (1 - Math.abs(e.beta/90)) + ', 1)');
  });
]]></script>
</svg>

あとは、こうやって仕込みをしたsvg画像を

1

<object type="image/svg+xml" data="/works/graphium-flap.svg"></object>

と書き込むことで、ページの一部として動作させたとき内部のJavaScriptが実行されて電子の蝶が羽ばたきます。