#daiizメモ

Scrapboxに夢中

写真を手書き点描画ふうに変換する実験

  1. 適当な写真を用意して、グレースケール化する
    • 風景写真がおすすめ
    • 人物は苦手
  2. 一片の長さが1000px程度になるよう拡縮する
    • 今回用意した点描パターンのドットの半径 (1px) を考えるとこのあたりのサイズが適している
  3. 画像の濃淡に応じて、いくつかの領域に分ける
  4. 各領域を密度の異なる点描パターンで塗りつぶす
    • 各領域は一度だけ塗りつぶされる
    • 同一領域で複数のパターンが重なると汚く見えてしまうので丁寧にやった。自慢ポイント。
    • OpenCVは神

上記ツイートに添付した一番目の風景写真は、以下のような8枚の点描パターン (密度が高い順に掲載) の重ね合わせでできている。

ちなみに、点描パターンを作る超簡易ツールも自作した。
https://codepen.io/daiiz/pen/WNxLMYq

キャンバスとして用意した正方形の<svg>の内部領域を適当な大きさの方眼状に区切り、各マスのランダムな位置を中心とする<circle> (ドット) をプロットしていく。SVG芸。
点描パターン画像の密度を小さくしたい場合は方眼の一辺の長さを短くすればOK。ドットの半径を固定値にするのがポイント。
(注: マス目はデモ用に表示しているだけで、実際のパターン画像には現れない。)

f:id:daiiz:20201122031353p:plain

ある程度の秩序を保ちつつランダムなドッド柄になったSVG画像を<canvas>に描画してPNG画像を得る。
このようなPNG画像を何パターンか作り、冒頭で紹介した工程のステップ4で使う。

今後どう発展するかは未定ですが、作りかけのコードはこちらで公開しています。
GitHub - TheTeamJ/tone: 写真を手書き点描画ふうに変換する実験