はじめに

ネット上で Photoshop にはカラーハーフトーンというフィルタがあることを知って、面白そうなので実装してみました。
適当にググってカラーハーフトーンフィルタを使った画像を見ながら「多分こういうものだろう」と考えて実装したものなので Photoshop のものとは大きく異なる可能性があります。

カラーハーフトーンってなに

元々は網点という印刷まわりの技法のようですが、Photoshop のものは完全に画像の効果としてあつかった方が良いみたいです。
ネットで使用例を見た感じ、各色ごとに指定された角度の正方形に画像を分割して、色の多いところは大きく、少ないところは小さく円を描いて水玉模様みたいにする効果だと思います。

実装1: 独自実装(わりとゴリ押し)

(0, 0) から角度と正方形のサイズから dx, dy を計算してそれを加算していきます。
走査の改行は 90 度回転させた角度で同じように計算します。
この場合、斜めに進んで行くので Y 方向に加算していくだけでは走査に漏れが発生するため、X 方向に進ませた時 Y が 0 以下のときは Y を負の方向に進ませてみて描画できそうなら描画してさらに負の方向にすすませるということをしています。

scanline

描画すべきかどうかは、四隅の点のどれかが描画領域にはいっているかどうかで判定しています。

実装2: 行列を使った変換

回転行列を使って、全てのピクセルを矩形サイズで割った大きさの画像に縮小＆回転させた画像に変換し、そこから元の大きさ・角度に逆変換することで上記のような走査ではなく、適切に処理できると考えました。

実際にやってみたところ、変換時に角度によっては微妙にピクセルがずれ、それを戻すと割と目立つ違いになってしまうので微妙な感じになってしまいました。
うまく変換する方法を思いつくまでこちらの方法はひとまず置いておこうと思います。

half

各色毎に回転・縮小して…

inverse

逆行列で元にもどします。

行列の計算は goog.math.Matrix という Closure Library のコードを使っています。

実装例

jsdo.it に置いておきました。
事前にグレイスケール化や二値化するフィルタをかけたり、カラーハーフトーンが終わった後に特定の色で塗りつぶしたりできるようになってます。

まとめ

Canvas + JavaScript は画像加工ツール