写真をゲームボーイ風にするCSS & SVG filterのデモ
2012-07-21
写真をゲームボーイ風にするCSS & SVG filterのデモ2012-07-21
説明が面倒なので、3行でまとめると
「全てのページをゲームボーイ風にするGreasemonkey」をCSS & SVG filterで作ってみたものの、得意なドット絵の技術を応用して綺麗な加工にしようと頑張った結果、やり過ぎて動作が非常に重くなってしまったのでボツに。
……とは言え、せっかくなので公開しておくか、という
（※Greasemonkeyは紹介記事を現在書いている途中で、後日公開予定）（追記：公開した）
（2012年7月現在、CSSのSVG filterに対応しているブラウザはFirefoxだけ）
ゲームボーイは4階調のモノクロ液晶しか表示できなかった。（モノクロだが初代ゲームボーイの液晶に合わせて、若干黄色がかった色合いにはしている。）
カラー写真がモノクロになってしまうのは当然なのだが、4色しかないとは言え今回は画面全体のピクセル幅も広いのでタイルパターンを用いることで繊細なグラデーションは十分表現可能。
使える色数が少ない環境でも、ピクセルを組み合わせた模様を作り階調を表現するドット絵の基礎的な技法。
例えば
こうした画像を4色で表現しようとした場合、単純なベタ塗りではこのような4階調しかならずとてもグラデーションには見えないが
同じ4色しか使わなくてもタイルパターンを用いるとこのようになる
（2倍に拡大）
上から順に、4階調、7階調、13階調、25階調。
当然ながら、タイルパターンを使って細かくすると滑らかなグラデーションが得られるが、反面 SVGのfilterとしては重くなってしまう。以下に実際どのようにfilterが適用されるかのサンプルを掲載
マウスカーソルを画像に重ねると、元画像が確認できます
もちろん25階調が最も再現度が高いが、実際にこれをGreasemonkeyにしたところ非常に動作が重くページのスクロールでもガタガタにになってしまうほど。そのため、なるべく処理を軽くするためにfilterを見直して軽量化を行った
同時に写真が暗く補正されてしまう問題も対応して、タイルパターンと抽出処理を修正。
下記の6階調版をとりあえずGreasemonkeyに使う予定
比較のために、左右に上述の4階調・7階調を並べてみたが、まぁまぁゲームボーイ風に見えるのではないかと
更新履歴