アニメーションGIFをグリッチさせるGlitch Gifsを作った
GIFMAGAZINEにアニメーションGIFをグリッチさせる機能を追加した。
Glitch art is the aestheticization of digital or analog errors, such as artifacts and other "bugs", by either corrupting digital code/data or by physically manipulating electronic devices
ということなんだけど、説明するより実物をみたほうがはやいのでまずグリッチ画像の例をだす。
こういう画像の一部分をぶっこわして意図しない美しいエラーを引き起こすような画像がグリッチ画像。
これは静止画のグリッチ画像だけど、Glitch GifsではこれをアニメーションGIFで生成できるようになる。
例)
via GIFMAGAZINE
使い方
Glitch Gifsの使い方は、
- GIFをアップロードする
- しばし待つ
これだけ。
あまりにもシンプルすぎて箇条書きにする必要なかった。
実際に生成してるところはこんな感じ。
via GIFMAGAZINE
これはサンプル画像を利用した場合の動きで、
glitchのサンプルを体験というエリアをクリックするとグリッチの処理がはじまる。
左側に元画像、右側にグリッチさせた画像という形で表示されている。
ログインしていると生成された画像を投稿することも可能。
もちろん、ローカルにダウンロードすることもできる。
開発時の苦労
Glitch Gifsの処理はすべてクライアントサイドで行なわれている。
サーバー側で処理しない分、色々とコストがかからないのは嬉しい。
半面、Javascriptでバイナリ操作を行なうのはやや面倒な点が多いことや
グリッチさせるためにgifそのものの仕様をある程度理解しなければならなかった点で苦戦した。
特にどの程度画像を壊せば良いのかを調整するのが難しい。
JPEGは画像の破損に強く、グリッチを作りやすいからネット上にJPEGのグリッチ画像の生成方法は多く存在している。
例えば、以下のようにsedで置換するだけですぐグリッチ画像が作成できてしまう(これをデータベンディングというらしい)。
$sed s/A/B/g hoge.jpg > bar.jpg
しかし、GIFの場合はsedで全体置換してしまうとすぐ画像が壊れてしまう(壊れない方法もあるのかもしれないけど)。
しかも、アニメーションGIFのグリッチについてはほとんど情報がなかったので画像のどのブロックをどれくらい壊していいのかわからない。
ということで、ひとまずGIFの仕様から調べざるをえなかった。
調べた結果、大雑把に
- GIFはファイルヘッダ,Graphic Control Extension,image block,終端にわかれている
- LZW圧縮という可逆圧縮法を使っている
ということがわかった。
中でも、
- image blockのimage dataセクションに画像データが、
- ファイルヘッダのGlobal Color Tableにカラーテーブルが
格納されてるということがわかり、とりあえずここの値をいじればうまくいきそうと予測を立てた。
で、実際にjsgifのパーサーを利用しながら該当箇所の値を変化させてみた。
が、うまくいかない。
Global Color Tableのほうは適当に0~255までの値を変化させればよかったんだけど、Image dataのほうがLZWのデコードが失敗してしまうパターンが多々発生し、結構な確率で壊れすぎてしまう。
で、そんなこんなで試行錯誤してる中で一番うまくいったのが、image blockの値の5を1に程よく置換する方法。
とりあえずこれで９割方壊れないグリッチしたアニメGIFが作れるようになった。
グリッチ界隈について
グリッチについての情報は日本にはあまり多くない。
wikipediaのglitch artの項目は英語では存在するが日本語では存在しないことからもよくわかる。
そんな状況だからグリッチ界隈を暗躍してる人が凄く目立つ。
まずは、
- ucnvさん
ここのサイトにはglitchに関する情報からucnvさんがつくった数々の作品までたくさんリンクがある。
AVIGlitchっていう動画をglitchさせるgemはRubyで書かれてるから今度読んでみたい。
- makimotoさん
グリッチをコマンドラインで作る方法とか最近ではgolangでグリッチ作ったりとか活発にグリッチしてる方。
グリッチに関する記事のはてぶにはかなり登場している。
このGlitchAPIというとんでもなく便利なグリッチ生成ツールをつくったかた。
hitode909さんはグリッチももちろんのことアニメGIF系の記事のはてぶには必ずと言っていいほど登場するし、ぼくの観測範囲においてはもう耳をすませばみたいな恋に近い何かに発展しそうなレベル。
たぶんこのエントリのはてぶにも登場する気がする気がする。
ほかにもmirakuiさんとかnegipoさんとかyuisekiさんとかアニメGIF系記事でよく見かける方々も結構な確率でグリッチブックマーカーに名を連ねている。
お役立ちリンク
最後に今回調べていて役に立った資料のリンクを並べておく。備忘録もかねて。
- GIFの規格
- GIFファイルフォーマット
- 一番わかりやすかった
- GIFフォーマットの詳細
- GIFのヘッダーの話。パレットの意味とかさらっと書いてあるけどわかりやすかった。
- GIF画像から情報を抜き取る(PHPでGIFのヘッダをパースする実装と解説)
- ASCII,10進数,16進数,8進数,およびバイナリの変換表
- バイナリ読む時にちょっと便利だった
- HexEdit
- JPEGのGlitchを生成できるwebアプリ
- http://kenko.web6.jp/blog/?p=245
- Glitch art - wikipedia
- グリッチアートとは
- ucnv.org
- ここにさらに便利リンクがたくさんある
- GlitchAPI
- The Pragmatic Glitch (#rubykaigi 2013 LT)
- Glitch Gifs | GIFMAGAZINE - GIFアニメ好きが集まるGIF画像の投稿・共有・検索サービス
- 宣伝です
あと、この本ほしいけどもう販売してないのつらい...
(追記) www.amazon.comのほうだと安く売ってるらしい！
