カプセルピクセル:角丸 Manhattan グリッドによる生成アートエンジンの設計

Canvas 2D CPU のみで動作する先鋭的ピクセルフィルター:適応的直交領域結合、符号付き距離場(SDF)による内外角フィレット、二重レリーフ輪郭線、集積回路風マイクロコアの仕組みを詳解。

> 結論から

従来のピクセルアートやモザイクフィルターは、画像を単純な直角ブロックにダウンサンプリングするため、滑らかな階調部に耳障りな階段状エイリアシングを生じさせ、被写体の輪郭を破壊してしまいます。Yan の質感工房(Texture Studio)に新設された第31番目のカーネル「Capsule Pixel(カプセルピクセル)」は、このアプローチを根本から再構築しました。(1) 輝度階調化と直交領域結合により平坦な空を連続した多角形へ融合、(2) グリッド符号付き距離場(Grid SDF)により凸角・凹角を問わず R=0.28・cellSize の滑らかな円弧フィレットを適用、(3) 二重波形レリーフ輪郭(外側の暗溝+内側のハイライト線)、(4) 単独セルの同心マイクロコア生成。これらすべてがブラウザの CPU 上で約 40ms で高速実行され、回路基板や等高線地図のような有機的秩序を実現します。

直角階段の限界:ピクセルアートの再定義

1970年代のドットマトリクスディスプレイ誕生以来、ピクセル化(Pixelation)はデジタル表現の象徴であり続けてきました。しかし高解像度ディスプレイが普及した現代において、単純なモザイク処理にはいくつかの構造的限界が存在します:

  1. 耳障りな 90 度の直角階段:斜めの被写体輪郭が鋸歯状に破断され、本来の有機的なフォルムが損なわれる;
  2. 平坦な領域の断片化:空や霧のような滑らかな階調が、無秩序な正方形タイルの山として散乱する;
  3. 平板なグリッド線:格子を強調するための黒い境界線が、画面全体の立体感を奪ってしまう。

台湾のジェネラティブアーティスト William Liang 氏(@william77.fun)の研究に刺激を受け、私たちは「写真を有機的な直角丸角(Filleted Manhattan)の世界へと昇華させる」アルゴリズムの探求を開始しました。

平坦な空は優美な等高線テラスへと変貌し、角はすべて温かみのあるアール(R)で面取りされ、水面の微細な反射光は集積回路のマイクロパッドのように整然と輝く——このビジョンを Canvas 2D だけで実現したのが Capsule Pixel(カプセルピクセル) です。

Capsule Pixel パイプライン構造図
図 1: Yan カプセルピクセルエンジンの4段階パイプライン — 階調結合からグリッド SDF 角丸フィレット、二重波形レリーフ輪郭、マイクロチップ同心コア生成まで。


視覚比較:ナイーブモザイク vs カプセルピクセル

草山を歩く旅人の高コントラスト写真を用いて、従来手法とカプセルピクセルの本質的な違いを検証します:

カプセルピクセルの視覚比較:元画像 vs 従来モザイク vs カプセルピクセル
図 2: 高コントラスト構図の切り出し比較 — (01) 元画像;(02) 従来の直角モザイク(笠や草地の輪郭が粗い階段状に崩壊);(03) Yan カプセルピクセル(平坦部は滑らかな多角形に融合し、被写体輪郭は精密なプリント配線のように浮き彫りになる)。


4段階のコア・アルゴリズム

1. 適応的階調結合と直交多角形(Polyomino)の形成

基本グリッド単位ごとに平均 RGB と知覚輝度を計算し、指定レベル数(8〜16段階)に階調化します。上下左右で階調値が一致する隣接セルはトポロジー的に同一領域と見なされ、その境界線は完全に消去されます。

2. 局所グリッド符号付き距離場(Grid SDF)による角丸フィレット

各ピクセルにおいて、所属セル (g_x, g_y) と周囲 8 近傍の階調トポロジーを照合します。

  • 外凸角(Convex Fillet):隣接する2辺が境界である場合、頂点付近を半径 R = 0.28 · \text{cellSize} の円弧で面取り;
  • 内凹角(Concave Fillet):直交2辺が同色で対角セルのみが異なる場合、内側の角を半径 R の円弧で滑らかに繋ぎます。
    この幾何学的距離場は、ベクター輪郭抽出を行わずに 1 パスのラスタースキャン内で O(1) で算出されます。

3. 二重波形レリーフ輪郭(Dual-Stroke Relief)

エッジ境界にはメキシカンハット(LoG)状の明暗波形を合成します:

  • 外側の暗溝(Dark Seam):境界線直下を約 80% 減光し、物理的な彫刻溝を表現;
  • 内側の高輝度白線(White Highlight):境界から約 1.5px 内側に純白のハイライトを注入。
    輪郭強度は境界両側の色差 \Delta C に比例して自動変調されるため、空内部の等高線は繊細に、被写体エッジは力強く浮き彫りになります。

4. マイクロチップ同心コア(Micro Core Nuclei)

未結合の単独セルには、中心座標に高精度なガウシアンコアと第二同心環を埋め込み、シリコンウェハーのような精密工芸感を付与します。


質感工房(Texture Studio)で今すぐ体験

Capsule Pixel は、Web 版 質感工房 (Texture Studio) の GRID カテゴリにて第31のカーネルとして公開されています。ブラウザ上で完全ローカルに動作し、最大長辺 1400px の無劣化 PNG を透かしなしで書き出せます。

> よくある質問

カプセルピクセル(Capsule Pixel)とは何ですか?従来のピクセルアートとの違いは?
従来のピクセルアートはすべての格子を独立した鋭角な正方形として描画します。対照的にカプセルピクセルは、電子回路の配線や等高線地図に着想を得た直交幾何学的レンダリング手法です。類似階調のセル同士を直交多角形(Polyomino)として結合し、角丸フィレットと二重レリーフ輪郭を付与することで、滑らかで秩序ある有機的グリッド美学を生み出します。
なぜ重いポリゴン輪郭抽出やブーリアン演算なしで角丸を描けるのですか?
各セル内のピクセル座標と周囲 3×3 近傍の結合トポロジーのみを参照する「局所グリッド符号付き距離場(Grid SDF)」を採用しているためです。多角形輪郭のベクター化やベジェ曲線交差判定を行わず、閉形式の数式により O(1) 定数時間で最近傍のフィレット円弧までのユークリッド距離を算出します。
Detail(細部粒度)と Contrast(コントラスト)スライダーは何を制御しますか?
Detail は基本セルサイズ(cellSize)を制御し、小さな値では大胆なレトロブロック、大きな値では緻密なマイクロ回路グリッドとなります。Contrast は輝度階調の分割数(Levels)と輪郭線のエッジ感度を制御し、空の等高線密度やハイライトの彫りの深さを調整します。
このフィルターは GPU シェーダーではなく CPU で実行されていますか?
はい。WebGL や外部ライブラリを一切使わず、ブラウザの Canvas 2D 纯ピクセルパイプライン(TypedArray)上で 100% 実行されます。近傍トポロジーのキャッシュにより、1080P フル解像度でも約 35〜45ms で高速完了します。
オンラインで無料で試すことができますか?
はい。Yan の質感工房(yan.yichenlab.com/textures)の GRID カテゴリから Capsule Pixel を直接体験できます。画像は一切サーバーに送信されず、透かしなしで最大長辺 1400px の高解像度 PNG を書き出せます。