BrushShift は、写真を印象派・水彩・油絵・浮世絵・木版画・点描の 6 スタイルに変換するブラウザツールです。機械学習モデルも有料 API も使わず、Sobel・Bilateral・k-means・ブラシストロークの組み合わせで絵画風にしています。
#🎯 「筆で描いた」を成立させる 2 つの条件
スタイル変換をモデルなしでやるとき、絵画に見せる条件は 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): Float32ArraySobel は輪郭の「強さ」だけでなく「向き」も取れます。横方向と縦方向の差分から atan2 で角度が出る。その角度に垂直な方向がエッジの走る向きなので、そこに長い楕円を置くと、輪郭をなぞる筆致になります。
向きを揃えないと、同じストロークでも「絵の具をこすった跡」にしか見えません。向きが揃った瞬間に絵画になるのが分かりやすい変化でした。
ストロークは数千本を薄い不透明度で重ねます。1 本ずつ濃く置くとモザイクになるので、ここも重ね塗りです。
#🌫️ Bilateral で下地を平らにする
ストロークを置く前に Bilateral フィルタで平滑化しています。輪郭を保ったまま面をのっぺりさせるフィルタで、下地に細かい模様が残っていると、その上にストロークを置いても濁ります。
「平らにしてから筆で置く」という順序は、実際の絵の描き方に近い流れでした。
#📄 紙のノイズを最後に足す
仕上げに紙目のノイズを薄く重ねます。デジタルで作った絵は面が均一すぎて、それだけで「コンピュータで作った感」が出ます。わずかなムラを足すと物質感が戻るので、最後に一枚かぶせています。
#😓 苦労したところ
k-means の初期値がランダムなので結果が毎回変わる。 同じ写真でも実行ごとに微妙に違う絵が出ます。これは「絵画変換」としては許容できる揺らぎだと判断してそのままにしましたが、再現性を求めるなら初期値を決定的にする必要があります。判断を先送りした部分です。
6 スタイルの差をパラメータだけで作る。 印象派は小さく多いストローク、油絵は大きく厚いストローク、点描は円だけ、水彩は不透明度を下げて滲ませる。同じ関数に渡す値を変えるだけで 6 通りにしています。スタイルごとに別実装を書くと、後から共通の改善を入れにくくなります。
大きい画像で待たされる。 Bilateral も k-means も画素数に比例(以上)で効きます。長辺を縮めてから処理し、その旨を画面に出しています。
#🔭 今後の拡張
- k-means の初期値を決定的にして、同じ写真から同じ絵を出せるようにする
- ストロークの向きを手で描き足せるモード
- キャンバスの織り目テクスチャ(現在は紙ノイズのみ)
- Web Worker へ処理を逃がして UI を止めない
#💡 このサービスから言えること
画風変換はモデルがなくても、そこそこのところまで行けます。 色を減らす、向きを揃える、重ねて塗る、最後にノイズを足す ── この 4 手で 6 スタイルが作れました。モデルを使わないぶん、待ち時間ゼロで、写真は端末から出ません。
一方で限界もはっきりしていて、構図や被写体の意味を理解した変換はできません。顔だけ丁寧に描く、背景を省略する、といった判断は入りません。そこが必要になった時点で、初めてモデルを検討する順序だと思っています。
[ ./next_action ]
読んだら、 BrushShift を実際に動かす。
この開発ログは BrushShift をどう作ったかの記録です。 読み終わったらそのままサービス本体へ戻って、 実物で価値を確かめてください。