javascriptでBadApple!!
作品URL
http://matayoshi.nkmr.io/js/badapple/
この記事の作品 https://service.matatsuna.net/badapple-old/
改良版 https://service.matatsuna.net/badapple/
(以上 更新 2018/08/17)
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枚の画像を生成します。
2. processingで画像を読み込んで白黒を判定し、jsで読み込めるように配列形式でテキストに吐き出します。
https://gist.github.com/eb68c1d404ae33f9a47c5c4fa852bf34:tile
3. tableを準備して、その中に配列から読みだしたデータをどんどん追加する処理をsetintervalでfps10で回します。
4. 完成!!
感想
作ってて超楽しかった。重いかな?とか粗すぎて見えないかな?っておもってたのですがしっかりそこそこ見えて感動しました。
ただ、画像をURIスキームを使って入れたとしても、厳しいのは残念でした。(環境にもよるかもしれないが)
参考URL
tableタグで二次配列を取り出す方法
[jQuery] tableの内容を取得する | きほんのき
ffmpegのコマンド
ffmpegで動画から静止画を抜き出す
jsの配列について
JavaScriptプログラミング講座【配列について(Array)】
htmlのaudioタグについて
HTML5 audioタグを使って音声を再生する方法 | TechBooster
etc