BrushShift ができるまで — 写真を 6 つの絵画スタイルに変える

BrushShift は、写真を印象派・水彩・油絵・浮世絵・木版画・点描の 6 スタイルに変換するブラウザツールです。機械学習モデルも有料 API も使わず、Sobel・Bilateral・k-means・ブラシストロークの組み合わせで絵画風にしています。

#🎯 「筆で描いた」を成立させる 2 つの条件

スタイル変換をモデルなしでやるとき、絵画に見せる条件は 2 つでした。

1. 色数が減っていること — 写真の数万色をそのまま残すと、何をしても写真のままです
2. 筆致の向きが揃っていること — ランダムな向きに塗ると、ただのノイズになります

1 は色の量子化、2 は Sobel の勾配方向で解けます。

#🎨 k-means で色を減らす

色の削減は k-means クラスタリングです。RGB を 3 次元空間の点とみなして、k 個の代表色に寄せます。

// 割り当て: 各画素を いちばん近い代表色へ
for (let c = 0; c < k; c++) {
  const dr = r - cents[c][0], dg = g - cents[c][1], db = b - cents[c][2]
  const d = dr * dr + dg * dg + db * db
  if (d < bestD) { bestD = d; best = c }
}
// 更新: 各クラスタの重心を新しい代表色に
cents[c] = [sums[c][0]/sums[c][3], sums[c][1]/sums[c][3], sums[c][2]/sums[c][3]]

割り当てと更新を交互に回すだけの、教科書どおりの実装です。反復回数は 4 回で止めています。完全に収束させても見た目はほとんど変わらないのに、時間だけ倍以上かかるためです。

平方根を取っていないのもポイントで、距離の比較にしか使わないので二乗のままで足ります。画素数 × k 回まわるループなので、この一手間の削減が効きます。

#🖌️ 浮世絵は「専用パレットへの最近傍」で作る

6 スタイルのうち浮世絵だけは、k-means の結果をさらに固定パレットに寄せています。

const UKIYOE_PALETTE = [
  [198, 50, 36],   // 朱赤
  [45, 90, 139],   // 藍
  [168, 117, 69],  // 黄土
  [90, 139, 110],  // 抹茶
  [26, 20, 16],    // 墨
  [240, 232, 208], // 生成り
  [156, 156, 148], // 鼠
  [200, 154, 58],  // 金茶
]

浮世絵は版木ごとに色を刷るので、使える色が最初から決まっている表現です。写真から素直に色を取ると、どうしても現代的な色が混ざって浮世絵になりません。江戸期の顔料に近い 8 色を先に決めて、そこへ最近傍で写すほうが「らしく」なりました。

題材に固有の制約がある場合は、それを実装に持ち込むと差が出ます。

#↔️ 筆致の向きを Sobel から決める

いちばん効いたのがこれです。ブラシストロークを描くとき、楕円の長軸を輪郭に沿わせます。

export function sobelGradientAngles(img: ImageData): Float32Array

Sobel は輪郭の「強さ」だけでなく「向き」も取れます。横方向と縦方向の差分から atan2 で角度が出る。その角度に垂直な方向がエッジの走る向きなので、そこに長い楕円を置くと、輪郭をなぞる筆致になります。

向きを揃えないと、同じストロークでも「絵の具をこすった跡」にしか見えません。向きが揃った瞬間に絵画になるのが分かりやすい変化でした。

ストロークは数千本を薄い不透明度で重ねます。1 本ずつ濃く置くとモザイクになるので、ここも重ね塗りです。

#🌫️ Bilateral で下地を平らにする

ストロークを置く前に Bilateral フィルタで平滑化しています。輪郭を保ったまま面をのっぺりさせるフィルタで、下地に細かい模様が残っていると、その上にストロークを置いても濁ります。

「平らにしてから筆で置く」という順序は、実際の絵の描き方に近い流れでした。

#📄 紙のノイズを最後に足す

仕上げに紙目のノイズを薄く重ねます。デジタルで作った絵は面が均一すぎて、それだけで「コンピュータで作った感」が出ます。わずかなムラを足すと物質感が戻るので、最後に一枚かぶせています。

#😓 苦労したところ

k-means の初期値がランダムなので結果が毎回変わる。 同じ写真でも実行ごとに微妙に違う絵が出ます。これは「絵画変換」としては許容できる揺らぎだと判断してそのままにしましたが、再現性を求めるなら初期値を決定的にする必要があります。判断を先送りした部分です。

6 スタイルの差をパラメータだけで作る。 印象派は小さく多いストローク、油絵は大きく厚いストローク、点描は円だけ、水彩は不透明度を下げて滲ませる。同じ関数に渡す値を変えるだけで 6 通りにしています。スタイルごとに別実装を書くと、後から共通の改善を入れにくくなります。

大きい画像で待たされる。 Bilateral も k-means も画素数に比例(以上)で効きます。長辺を縮めてから処理し、その旨を画面に出しています。

#🔭 今後の拡張

• k-means の初期値を決定的にして、同じ写真から同じ絵を出せるようにする
• ストロークの向きを手で描き足せるモード
• キャンバスの織り目テクスチャ(現在は紙ノイズのみ)
• Web Worker へ処理を逃がして UI を止めない

#💡 このサービスから言えること

画風変換はモデルがなくても、そこそこのところまで行けます。 色を減らす、向きを揃える、重ねて塗る、最後にノイズを足す ── この 4 手で 6 スタイルが作れました。モデルを使わないぶん、待ち時間ゼロで、写真は端末から出ません。

一方で限界もはっきりしていて、構図や被写体の意味を理解した変換はできません。顔だけ丁寧に描く、背景を省略する、といった判断は入りません。そこが必要になった時点で、初めてモデルを検討する順序だと思っています。