Humanity

Edit the world by your favorite way

目玉を光らせるアニメーション GIF を作る Pull Request を送った

github.com

今更だけどタイトル通りの pull request を送った。 目を光らせたい人は→ Medama Cherenkov Maker

きっかけとしてはブログを愛成会病院の旧サイトっぽくしたくて手始めにアイコンの目を光らせようと思った所で ふと @anekos さんのこの記事を見て JavaScript 製のジェネレーターがあるのを知ったので、 Chrome 対応とアニメーション GIF 対応をした。

その後の様子

JSGIF 便利

github.com

canvas から GIF アニメのバイナリを生成できる JavaScript ライブラリ。 encoder.addFrame(CanvasRenderingContext2D) する度 GIF アニメの1コマが追加される。 内部で ByteArray に GIF のバイナリを構築していくので、 最後に encoder.stream().getData() でバイナリを取り出して base64 化して img 要素に表示するだけ。すごい。

Make gifs using the canvas

↑のサンプルコードで十分だけど、一応書いておきます。

<!-- 必要なライブラリを読み込む -->
<script type="text/javascript" src="LZWEncoder.js"></script>
<script type="text/javascript" src="NeuQuant.js"></script>
<script type="text/javascript" src="GIFEncoder.js"></script>
<script type="text/javascript" src="b64.js"></script>
const encoder = new GIFEncoder();
encoder.setRepeat(0); // 0 = loop
encoder.setDelay(500); //go to next frame every n milliseconds
encoder.start();
while (...) {
  // context になんか描く
  // encoder.addFrame() する度 GIF アニメの1コマが追加される
  encoder.addFrame(context);
  // context.clearRect(0, 0, width, height); して現在のコマをクリアした方がいいかもしれない
}
encoder.finish();
const binaryGIF = encoder.stream().getData();

// <img id='image'> に GIF アニメを表示
const img = document.getElementById('image');
img.src = 'data:image/gif;base64,'+encode64(binaryGIF);

f:id:tyru:20180715011111g:plain