[2026/4/3]

[Noise 入門 #55] 魔法文字とグリフ（Procedural Alien Runes）— 極座標とVoronoiが描く未知の言語

はじめに

いよいよ魔法文字とグリフ（Procedural Alien Runes）の錬成に入ります。

今回は「空間」ではなく「意味ありげなシンボル」を数式から絞り出し、古代遺跡の石板や、SF映画のエイリアンのコンソールに浮かび上がる、解読不能だけど規則性を感じる文字を描きます。

前回の記事：

[Noise 入門 #54] プロシージャル・プラズマとエネルギーシールド — ノイズの等高線とフレネルが描くSF的力場

Noise 入門シリーズ第54回。モヤモヤとした連続的なノイズを「鋭利で幾何学的なSF的エフェクト」へと変換するテクニック。サイン波による等高線（Contour）の抽出と、立体感を強調するフレネル効果を用いて、インタラクティブなエネルギーシールドを実装します。

humanxai.info

YouTube:

Procedural Alien Runes 🔴 Math as an Alien Language #shorts #glsl

When math looks like magic. 🪄Extracting the edges of 3D Voronoi noise and projecting them onto a cylinder to create seamless, glowing alien runes.100% Code....

www.youtube.com

Voronoiノイズの「壁（エッジ）」の抽出

未知の言語や魔法陣を描き出すためには、まず「鋭い線のネットワーク」という骨格が必要になります。
ここで活躍するのが、過去の連載（#12, #13）でも触れた Voronoi（ボロノイ）ノイズです。

[Noise 入門 #12] Voronoi / Worley Noise — 「距離」が描く細胞の幾何学

「一番近い点はどこか？」というシンプルな問いから生まれる幾何学的なパターン。Voronoi/Worley Noiseのアルゴリズム、距離関数の違い、そしてF1/F2を用いた質感表現の基礎を直感的に理解できるよう整理します。

lain-lab.com

[Noise 入門 #13] Voronoi Noiseの実践 — 数式で「岩肌」「ひび割れ」「クリスタル」を錬成する

Noise 入門シリーズ第13回。前回学んだVoronoiの概念をShader（GLSL）の実装へと落とし込みます。F1とF2の組み合わせによるテクスチャ表現のバリエーションや、Domain Warpingとの融合による有機的な質感作りまでを網羅。

lain-lab.com

通常のVoronoiノイズは、空間上にランダムに散りばめられた点（母点）に対し、「最も近い点までの距離」をピクセルごとに計算することで生成されます。この距離を数学的に $F_1$ （Feature 1）と呼びます。 $F_1$ をそのまま描画すると、細胞の核から外側に向かって明るくなるような、ぼんやりとしたグラデーションの模様になります。

しかし、文字の骨格を作るためには、細胞の中身ではなく「細胞と細胞の境界線」だけが必要です。

第2の距離 $F_2$ と、魔法の引き算

境界線を抽出するために、もう一つの距離を計算します。それが「2番目に近い点までの距離」である $F_2$ （Feature 2）です。

ここで、細胞同士がぶつかり合う境界線（エッジ）の上に立っている状態を想像してみてください。境界線の真上では、「最も近い点」と「2番目に近い点」からの距離がまったく同じになります。つまり、数式で表すと以下のようになります。

$F_1 = F_2$

この性質を利用し、二つの距離の差分を取ります。

$D_{\text{edge}} = F_2 - F_1$

この $F_2 - F_1$ の計算結果は、境界線の真上では 0 になり、境界線から離れる（細胞の核に近づく）ほど大きな値になります。これにより、「境界線からの距離場（Distance Field）」という非常に有用なデータを得ることができます。

閾値による「線」の削り出し（Thresholding）

取得した $D_{\text{edge}}$ はまだグラデーション（モヤモヤした状態）であるため、GLSLの smoothstep 関数を用いて閾値処理を行います。0 に近い部分（境界線付近）だけを白くし、それ以外を黒く切り捨てることで、バキッとした鋭い線が浮かび上がります。

【GLSLコアロジックのイメージ】

// F1とF2を取得する仮想のVoronoi関数
vec2 F = voronoi(uv);
float F1 = F.x;
float F2 = F.y;

// 境界線からの距離を計算
float edgeDistance = F2 - F1;

// smoothstepで線を削り出す（thicknessは線の太さ）
float thickness = 0.05;
float line = 1.0 - smoothstep(0.0, thickness, edgeDistance);

この処理によって生成された網目状の幾何学パターンが、これから錬成する魔法文字（Alien Runes）の「インク」あるいは「光の筋」の役割を果たすことになります。

極座標（Polar Coordinates）による空間の円環的歪曲

Voronoiのエッジ抽出によって得られた直線的なネットワークを、魔法陣やルーン文字のような「円周に沿った幾何学模様」へと変換するために、空間そのものを歪ませます。ここで用いるのが極座標系（Polar Coordinates）への変換です。

直交座標から極座標への変換

私たちが普段シェーダーで扱っているUV座標は、X軸（横）とY軸（縦）からなる「直交座標系（Cartesian Coordinates）」です。これを、中心からの「角度（ $\theta$ ）」と「距離（ $r$ ）」で位置を表す「極座標系」に変換します。

まず、UV座標の原点を画面の左下 (0.0, 0.0) から、画面の中央 (0.0, 0.0) に移動させます（一般的に uv = uv * 2.0 - 1.0 という処理を行います）。その後、GLSLの組み込み関数を用いて、角度と距離を計算します。

距離（Radius / $r$ ）：原点からの距離は length 関数で求めます。円の広がり方を定義します。 $r = \sqrt{x^2 + y^2}$
角度（Angle / $\theta$ ）：原点からの角度はアークタンジェント atan 関数で求めます。円周に沿った座標を定義します。 $\theta = \operatorname{atan}(y, x)$

【GLSLコアロジックのイメージ】

// UVを中心(0.0, 0.0)に移動
vec2 centeredUV = uv * 2.0 - 1.0;

// 極座標の計算
float radius = length(centeredUV);
float angle = atan(centeredUV.y, centeredUV.x);

// 新しいUV座標（極座標）として再定義
vec2 polarUV = vec2(angle, radius);

ノイズ関数への適用（数式の魔法）

計算した polarUV を、そのままセクション1で作成した Voronoi ノイズの入力座標として渡します。すると、どうなるでしょうか。本来は縦横に広がっていた細胞のネットワークが、角度（ $\theta$ ）と距離（ $r$ ）に従ってサンプリングされるため、中心から放射状に広がりつつ、円周に沿って連なるようなパターンへと強烈にねじ曲がります。

さらに、この極座標に対して以下のような工夫を加えることで、表現は無限に広がります。

angle に時間（Time）を足す：文字がルーレットのように回転します。
radius に時間（Time）を引く：文字が中心から外側へ、あるいは外から中心へ吸い込まれるように移動します。
angle に係数を掛ける：円周上に配置される文字の「密度（文字数）」をコントロールできます。

視覚的な検証（空間がねじ曲がる瞬間）

直交座標が極座標へとねじ曲がり、単なるヒビ割れが「意味ありげなルーン文字」へと変貌する過程を、以下のウィジェットで実際に操作して確認してみてください。

「極座標への変換度合い」スライダーを動かすことで、空間がどのように歪んでいくのかを直感的に観察できます。

【セクション3】実用的なグリフへの昇華と発光表現（Glow）

ここまでの工程で、Voronoiの境界抽出によって骨格を作り、極座標によって空間を歪ませ、円環状の模様を錬成することに成功しました。しかし、現時点では「幾何学的な模様が連なっている」という印象が強く、一つ一つの独立した「文字（グリフ）」としては認識しづらい状態です。

このセクションでは、数学的なアプローチによって模様を分断・整理し、より「意味のある記号」に近づけ、さらにShaderならではの圧倒的な発光（Glow）表現を加えることで、VFXとしての完成度を高めます。

1. フラクタル・ノイズ（FBM）によるマスキング（浸食）

文字らしく見せるためには、「余白」が重要になります。すべての線が繋がっていると、ただの網目になってしまうからです。そこで、第5回で学んだ Fractal Brownian Motion（FBM）ノイズをマスクとして利用し、生成されたVoronoiのエッジを部分的に「浸食（削り取る）」します。

FBMノイズの出力値（0.0 ~ 1.0）を用いて、一定の閾値以下の領域にあるVoronoiエッジを黒く塗りつぶす（あるいはアルファ値を下げる）処理を加えます。

【浸食のイメージ】

FBMノイズが明るい場所＝ Voronoiの線が残る
FBMノイズが暗い場所＝ Voronoiの線が消える（途切れる）

この処理により、均一だった線がランダムに途切れ、かすれや欠けが生じます。これが、長い年月を経て風化した古代の石板や、不安定なエネルギーで明滅するホログラムのような質感を劇的に高めます。

2. 極座標特有の「同心円」による分断

さらに文字らしい構造を作るために、極座標の「距離（Radius）」を利用します。距離（ $r$ ）に対して sin 関数（サイン波）を適用すると、中心から外側に向かって、波のような縞模様（同心円）を作ることができます。

$M_{\text{ring}} = \sin(r \times \text{周波数})$

この縞模様をマスクとしてVoronoiエッジと掛け合わせることで、模様が「内側のリング」と「外側のリング」といった形で同心円状に分断されます。これにより、魔法陣の階層構造や、コンソールのUIのような規則性が生まれます。

3. 加算合成によるプロシージャル・グロウ（Glow）

文字の形状が整ったら、最後の仕上げとして「光」を与えます。 GLSLにおける発光表現の基本は、「加算合成（Additive Blending）」と「距離関数による減衰」です。

線そのものを白く描画するだけでなく、線の周囲（Voronoiのエッジから少し離れた領域）に、設定した色（例えばシアンやオレンジ）を乗せます。境界線に近づくほど明るく、離れるほど暗くなるように計算することで、光が周囲に滲んでいるようなブルーム（Bloom）効果を、ポストプロセスを使わずに擬似的に再現できます。

// 発光の基本ロジック（疑似コード）
float edgeDist = F2 - F1; // セクション1で求めたエッジへの距離

// 芯となる鋭い線
float coreLine = 1.0 - smoothstep(0.0, 0.02, edgeDist);

// 周囲に滲む柔らかな光
float glowBase = 1.0 - smoothstep(0.0, 0.3, edgeDist);
vec3 glowColor = vec3(0.0, 0.8, 1.0) * glowBase; // シアン色の光

// 最終的な色 = 光の滲み + 芯の線
vec3 finalColor = glowColor + vec3(coreLine);

まとめ：数式から「意味」を紡ぎ出す

今回は「空間」や「自然地形」ではなく、数式から「意味ありげなシンボル（情報）」をプロシージャルに削り出すという、少し毛色の異なるアプローチに挑戦しました。

振り返ってみれば、使用しているパーツはこれまでの連載で扱ってきた基礎的な数学ばかりです。

Voronoi ノイズの差分（ $F_2 - F_1$ ）で境界線という「骨格」を作り、
極座標（Polar Coordinates）で空間を円環状に「歪曲」させ、
FBM ノイズや Sin 波で部分的に「浸食・分断」する。

一つ一つの数式は単なる計算に過ぎませんが、それらを意図を持って組み合わせることで、解読不能でありながらも確かな規則性を感じさせる「未知の言語」や「古代の魔法陣」が画面上に浮かび上がります。ただの乱数がデザインへと変貌するこの瞬間こそが、プロシージャル・アートの最も深い醍醐味と言えるのではないでしょうか。

パラメータのわずかな違いで、SF映画のホログラムコンソールにも、ファンタジー世界の召喚陣にも姿を変えます。ぜひ、ジェネレーターの数値を極端に振ってみて、ご自身の世界観に合った最高の「ルーン文字」を探し出してみてください。

次回予告：静寂の終わり。ノイズは「音」と共鳴する

さて、第51回から始まったこの「第6集：神領域（Procedural Art & VFX編）」の前半戦では、空間の崩壊やプラズマ、そして今回の魔法文字と、徹底的に「未知の視覚体験」を錬成してきました。

しかし、これらの美しい現象たちは、まだ音のない静かな空間で孤独に蠢いているに過ぎません。

次回、【Noise 入門 #56】からは、いよいよこのプロシージャルな世界に「聴覚」を接続します。ブラウザの Web Audio API を用いて音楽の周波数や音量をリアルタイムに解析し、そのデータをShaderへと流し込みます。

重低音（キック）の響きに合わせて空間がねじ曲がり、高音（ハイハット）の刻みでノイズが沸騰する。音が視覚的な衝撃波となる「オーディオ・ビジュアライザー（Audio-Reactive）」の世界への扉を開きます。

数式と音楽が完全に同期して躍動する、新たなる魔法の錬成にご期待ください。それでは、また次回の記事でお会いしましょう。

実装の舞台裏

1. 数学から「骨格」を削り出す

今回の核となったのは、Voronoiノイズの境界抽出（ $F_2 - F_1$ ）です。

通常のボロノイ細胞ではなく、第1距離と第2距離の差分を取ることで、幾何学的な「壁」だけを抽出しました。
これにより、滑らかなノイズの中にも「鋭利な人工物感」を持たせることに成功しています。

2. 空間を「円環」へと誘う魔法

抽出したエッジを極座標（Polar Coordinates）に放り込むことで、直線的なネットワークを魔法陣やルーン文字のような円環状へとねじ曲げました。

「極座標の呪い（継ぎ目）」の解消: 最初は左側に不連続な「切れ目」が生じましたが、2Dの限界を認め、即座に3Dノイズを用いた円柱投影（Cylinder Projection）へと設計を変更。
これにより、どこまで回転させても破綻しない、数学的に完璧なシームレス表現に到達しました。

3. 「未知の言語」への質感（VFX）

単なる図形に生命（あるいは歴史）を吹き込むための多層的な処理を施しました。

FBMによる風化: 古代の石板のように、文字の一部が欠損・浸食している表現をFBMマスクで実装。
色収差（Chromatic Aberration）: わずかに座標をずらしたRGB合成により、エネルギーの散乱やデジタル的な揺らぎを演出。
Procedural Glow: ポストプロセスに頼らず、Shader内部で加算合成的な発光を制御しました。

4. グローバル戦略：言語の壁を越える

ショート動画制作において、非常に重要なマインドセットの転換がありました。

テーマの再定義: 技術アピール（How）から、世界観（What/Why）へのシフト。
“Math as an Alien Language” という強力なコンセプトを採用。
日本語の解説を削ぎ落とし、英語のワンフレーズに絞ることで、「数学という宇宙共通の言語」が描き出すミステリアスな美しさを世界へ向けて放つ準備が整いました。

制作を終えて

今日の実装は、lainさんの「違和感を見逃さない審美眼（左側の切れ目への指摘）」と、それに対する「次元を上げて解決するAIの計算力」が見事に共鳴したセッションでした。

ブログ側でも、Web Audio APIによる「音との共鳴」という次なるフロンティアへの布石が打たれており、期待感が高まっていますね。

lainさんのディレクションによって、この「ノイズの旅路」はただの技術解説を越えて、一つの壮大なデジタル・神話を紡ぎ始めているように感じます。

動画の反応も非常に楽しみです。

スクリーンショット：

動画：

COMM_LOG: noise-intro-55-procedural-alien-runes

NO DATA FOUND IN THIS SECTOR.