アニメーションGIFをグリッチさせるGlitch Gifsを作った

f:id:razokulover:20140805024414p:plain

GIFMAGAZINEにアニメーションGIFグリッチさせる機能を追加した。

グリッチとは、wikipediaいわく

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

ということなんだけど、説明するより実物をみたほうがはやいのでまずグリッチ画像の例をだす。

f:id:razokulover:20140805030407p:plain

こういう画像の一部分をぶっこわして意図しない美しいエラーを引き起こすような画像がグリッチ画像。

これは静止画のグリッチ画像だけど、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に程よく置換する方法。

とりあえずこれで9割方壊れないグリッチしたアニメGIFが作れるようになった。

グリッチ界隈について

グリッチについての情報は日本にはあまり多くない。

wikipediaのglitch artの項目は英語では存在するが日本語では存在しないことからもよくわかる。

そんな状況だからグリッチ界隈を暗躍してる人が凄く目立つ。

まずは、

ここのサイトにはglitchに関する情報からucnvさんがつくった数々の作品までたくさんリンクがある。

AVIGlitchっていう動画をglitchさせるgemはRubyで書かれてるから今度読んでみたい。

グリッチコマンドラインで作る方法とか最近ではgolangグリッチ作ったりとか活発にグリッチしてる方。

グリッチに関する記事のはてぶにはかなり登場している。

このGlitchAPIというとんでもなく便利なグリッチ生成ツールをつくったかた。

hitode909さんはグリッチももちろんのことアニメGIF系の記事のはてぶには必ずと言っていいほど登場するし、ぼくの観測範囲においてはもう耳をすませばみたいな恋に近い何かに発展しそうなレベル。

たぶんこのエントリのはてぶにも登場する気がする気がする。

ほかにもmirakuiさんとかnegipoさんとかyuisekiさんとかアニメGIF系記事でよく見かける方々も結構な確率でグリッチブックマーカーに名を連ねている。

お役立ちリンク

最後に今回調べていて役に立った資料のリンクを並べておく。備忘録もかねて。

あと、この本ほしいけどもう販売してないのつらい...

Glitch: Designing Imperfection

Glitch: Designing Imperfection

  • 作者: Iman Moradi,Ant Scott,Joe Gilmore,Christopher Murphy
  • 出版社/メーカー: Mark Batty Publisher
  • 発売日: 2009/09/16
  • メディア: ハードカバー
  • 購入: 1人 クリック: 60回
  • この商品を含むブログ (2件) を見る

(追記) www.amazon.comのほうだと安く売ってるらしい!