Monkey Glitch

RubyKaigi2011のGlitchセッションで「モンキーグリッチ*1」って単語が出てきたんだけど、言葉の響きもやってることもどっちもおもしろくてなんか頭から離れない。この呪いから逃れるためには自分で実装するしかなさそうなので、とりあえずやってみた。

http://ando-yasushi.appspot.com/glitch/index.html

var image = new Image();
image.src = './seesaadev.png';
function init() {
    var canvas = document.getElementsByTagName('canvas')[0];
    var context = canvas.getContext('2d');
    context.drawImage(image, 0, 0, 400, 300);
    var data = canvas.toDataURL('image/jpeg').split(',', 2);
    var head = data[0];
    var body = data[1];

    canvas = document.getElementsByTagName('canvas')[1];
    context = canvas.getContext('2d');
    var glitch = new Image();
    glitch.src = head + ',' + body.replace(/1/g, 'B');
    context.drawImage(glitch, 0, 0, 400, 300);
}

canvasのtoDataURLで取ってきたのを、replaceしてImageのsrcプロパティ設定すれば簡単にできるんじゃないの？と思ってやってみたんだけど、toDataURLで取れる形式はjpegとpngだけなんで、単純な置換で「正しく壊す」のはなかなか難しい。bmpで取れれば簡単そうなのに・・・。で、圧縮とかチェックサムとか考えるとpngは厳しそうなので、jpegでいろいろ試した結果、"1"を"B"に置換すると上のような感じになった。

サルがキーボード叩いてシェークスピア書くの待つのとやってることは一緒。だからモンキーグリッチなのか。

*1:グリッチはファイルを閲覧可能な状態で壊すことで、モンキーグリッチは単純な置換でそれを実現することを指す造語っぽい