直角階段の限界:ピクセルアートの再定義
1970年代のドットマトリクスディスプレイ誕生以来、ピクセル化(Pixelation)はデジタル表現の象徴であり続けてきました。しかし高解像度ディスプレイが普及した現代において、単純なモザイク処理にはいくつかの構造的限界が存在します:
- 耳障りな 90 度の直角階段:斜めの被写体輪郭が鋸歯状に破断され、本来の有機的なフォルムが損なわれる;
- 平坦な領域の断片化:空や霧のような滑らかな階調が、無秩序な正方形タイルの山として散乱する;
- 平板なグリッド線:格子を強調するための黒い境界線が、画面全体の立体感を奪ってしまう。
台湾のジェネラティブアーティスト William Liang 氏(@william77.fun)の研究に刺激を受け、私たちは「写真を有機的な直角丸角(Filleted Manhattan)の世界へと昇華させる」アルゴリズムの探求を開始しました。
平坦な空は優美な等高線テラスへと変貌し、角はすべて温かみのあるアール(R)で面取りされ、水面の微細な反射光は集積回路のマイクロパッドのように整然と輝く——このビジョンを Canvas 2D だけで実現したのが Capsule Pixel(カプセルピクセル) です。
図 1: Yan カプセルピクセルエンジンの4段階パイプライン — 階調結合からグリッド SDF 角丸フィレット、二重波形レリーフ輪郭、マイクロチップ同心コア生成まで。
視覚比較:ナイーブモザイク 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 を透かしなしで書き出せます。