javascriptでBadApple!!

BadApple!!とは?

音楽同人サークル「Alstroemeria Records」による東方アレンジ曲"Bad Apple!! feat. nomico"のPV字コンテをPVにした作品の一つである。

【東方】Bad Apple!! PV【影絵】 (sm8628149) - ニコニコ大百科

東方の曲のPVを考えて手書きで書いた動画
www.nicovideo.jp
を実際に白黒pvにしてしまった。というお話
www.nicovideo.jp

その動画のパロディ-がたくさん生まれています。
www.nicovideo.jp

実装について

1. 動画をffmpegを使い、1秒10フレームで切り出して2190枚の画像を生成します。
f:id:matatsuna:20161019131646p:plain
2. processingで画像を読み込んで白黒を判定し、jsで読み込めるように配列形式でテキストに吐き出します。
https://gist.github.com/eb68c1d404ae33f9a47c5c4fa852bf34:tile
3. tableを準備して、その中に配列から読みだしたデータをどんどん追加する処理をsetintervalでfps10で回します。
4. 完成!!

感想

作ってて超楽しかった。重いかな?とか粗すぎて見えないかな?っておもってたのですがしっかりそこそこ見えて感動しました。
ただ、画像をURIスキームを使って入れたとしても、厳しいのは残念でした。(環境にもよるかもしれないが)