極座標と 2D 回転

// 標準座標(第7章): 中心が原点、短辺が -1〜+1
vec2 p = (gl_FragCoord.xy * 2.0 - u_resolution) / min(u_resolution.x, u_resolution.y);

// 極座標: 同じ点を「距離 r と角度 θ」で見直す
float r = length(p); // 中心からの距離。短辺の端でちょうど 1.0
float theta = atan(p.y, p.x); // 角度。右が 0、反時計回りが正、範囲は -PI〜+PI

#version 300 es

// 第10章 デモ1: 極座標のデバッグ表示。
// 第7章の「uv をそのまま色にして眺める」の極座標版で、
// r(中心からの距離)を赤、θ(角度)を緑に入れて構造を目で確かめる。

precision highp float;

uniform vec2 u_resolution;

out vec4 fragColor;

const float PI = 3.141592653589793;

void main() {
  // 標準座標(第7章): 中心が原点、短辺が -1〜+1
  vec2 p = (gl_FragCoord.xy * 2.0 - u_resolution) / min(u_resolution.x, u_resolution.y);

  // 極座標: 同じ点を「距離 r と角度 θ」で見直す
  float r = length(p); // 中心からの距離。短辺の端でちょうど 1.0
  float theta = atan(p.y, p.x); // 角度。右が 0、反時計回りが正、範囲は -PI〜+PI

  // -PI〜+PI を 0〜1 に写す常套句。色や mix の係数に使うときはほぼ毎回これ
  float theta01 = theta / (2.0 * PI) + 0.5;

  // r を赤、θ を緑へ。中心ほど暗く、反時計回りに緑が増えていき、
  // 左端で緑が 1 → 0 に急に切り替わる(±PI の継ぎ目がそのまま見える)
  vec3 color = vec3(r, theta01, 0.35);

  // r の等高線(0.25 刻み)を重ねると「同心円」の構造が見える。
  // 一番近い等高線までの距離を出し、しきい値 0.006 と比べて細い線にする(第8章の常套句)
  float dist = abs(fract(r * 4.0 + 0.5) - 0.5) / 4.0;
  float w = fwidth(dist);
  float ring = 1.0 - smoothstep(0.006 - w, 0.006 + w, dist);
  color += ring * 0.3;

  fragColor = vec4(color, 1.0);
}

// -PI〜+PI を 0〜1 に写す常套句。色や mix の係数に使うときはほぼ毎回これ
float theta01 = theta / (2.0 * PI) + 0.5;

// 花: 「θ に応じて半径が波打つ円」。r と目標半径の差 = 符号付き距離(第8章)
float petalRadius = BASE_RADIUS + AMPLITUDE * sin(theta * PETALS);
float d = r - petalRadius;
float w = fwidth(d);
float mask = 1.0 - smoothstep(-w, w, d); // 第8章の塗りの常套句

#version 300 es

// 第10章 デモ2: 極座標で作る模様 — 放射模様と花。
// 冒頭の定数は書き換え前提。まず PETALS を変えて、枚数と ±PI の継ぎ目を観察する。

precision highp float;

uniform float u_time;
uniform vec2 u_resolution;

out vec4 fragColor;

const float PI = 3.141592653589793;

// 花びらの枚数。整数なら ±PI の継ぎ目は見えない。5.5 などにすると左に切れ目が出る
const float PETALS = 6.0;
const float BASE_RADIUS = 0.5; // 花の基準半径
const float AMPLITUDE = 0.13; // 花びらの出っ張り(半径の振幅)

void main() {
  vec2 p = (gl_FragCoord.xy * 2.0 - u_resolution) / min(u_resolution.x, u_resolution.y);

  float r = length(p);
  // θ に一定角を足すだけで模様全体が回る(回転を行列で書くのはデモ4)
  float theta = atan(p.y, p.x) + u_time * 0.15;

  // 放射模様: sin(θ * N) は一周でちょうど N 回振動する
  float stripes = sin(theta * PETALS);
  // 渦にするなら: 位相に r も混ぜる。上の行とこの行を差し替えて試す
  // float stripes = sin(theta * PETALS + r * 12.0 - u_time);

  vec3 color = mix(
    vec3(0.07, 0.09, 0.16),
    vec3(0.16, 0.22, 0.38),
    stripes * 0.5 + 0.5 // -1〜+1 → 0〜1(第9章)
  );

  // 花: 「θ に応じて半径が波打つ円」。r と目標半径の差 = 符号付き距離(第8章)
  float petalRadius = BASE_RADIUS + AMPLITUDE * sin(theta * PETALS);
  float d = r - petalRadius;
  float w = fwidth(d);
  float mask = 1.0 - smoothstep(-w, w, d); // 第8章の塗りの常套句

  vec3 flowerColor = mix(
    vec3(0.95, 0.75, 0.35),
    vec3(0.90, 0.40, 0.25),
    r / (BASE_RADIUS + AMPLITUDE) // 中心から外へ向かうグラデーション
  );
  color = mix(color, flowerColor, mask);

  fragColor = vec4(color, 1.0);
}

// ここがドメイン変形: θ を mod(第9章)で扇形 1 枚分に畳み込み、
// さらに中央で折り返す(abs)と、隣どうしが鏡映しになって継ぎ目がつながる
float a = mod(theta, sector);
a = abs(a - sector * 0.5);

// 畳んだ極座標 (r, a) を直交座標に戻す。以降は普通に絵を描くだけ
vec2 q = r * vec2(cos(a), sin(a));

#version 300 es

// 第10章 デモ3: θ の mod による万華鏡。
// 「座標を加工してから、いつもどおり形を描く」= ドメイン変形の最初の例。
// canvas 上でポインタを左右に動かすと、分割数が 3〜12 で切り替わる。

precision highp float;

uniform float u_time;
uniform vec2 u_resolution;
uniform vec2 u_mouse;

out vec4 fragColor;

const float PI = 3.141592653589793;

void main() {
  vec2 p = (gl_FragCoord.xy * 2.0 - u_resolution) / min(u_resolution.x, u_resolution.y);

  float r = length(p);
  float theta = atan(p.y, p.x);

  // マウス x(0〜1)→ 分割数 3〜12。floor(x + 0.5) で四捨五入して整数にする
  float mouse01 = u_mouse.x / u_resolution.x;
  float n = floor(mix(3.0, 12.0, mouse01) + 0.5);
  float sector = 2.0 * PI / n; // 扇形 1 枚分の角度

  // ここがドメイン変形: θ を mod(第9章)で扇形 1 枚分に畳み込み、
  // さらに中央で折り返す(abs)と、隣どうしが鏡映しになって継ぎ目がつながる
  float a = mod(theta, sector);
  a = abs(a - sector * 0.5);

  // 畳んだ極座標 (r, a) を直交座標に戻す。以降は普通に絵を描くだけ
  vec2 q = r * vec2(cos(a), sin(a));

  // 「1 枚分の絵」: 動き回る円 1 個と縞。ここを描き替えると全扇形に反映される
  vec2 center = vec2(0.5 + 0.10 * sin(u_time * 0.7), 0.22 + 0.08 * cos(u_time * 0.9));
  float d = length(q - center) - 0.16;
  float w = fwidth(d);
  float circle = 1.0 - smoothstep(-w, w, d); // 第8章の塗りの常套句
  // なお分割数を増やすと円の中心が扇形の外に出て、鏡映で花びら状に切り取られる。
  // これは万華鏡の「筒の外の景色が映り込む」のと同じで、意図した見え方

  float waves = sin(q.x * 18.0 - u_time * 1.5) * 0.5 + 0.5;
  float vignette = 1.0 - smoothstep(0.8, 1.15, r);

  vec3 color = mix(vec3(0.06, 0.08, 0.14), vec3(0.18, 0.30, 0.50), waves * vignette);
  color = mix(color, vec3(0.95, 0.60, 0.30), circle);

  fragColor = vec4(color, 1.0);
}

// ① ゆっくり回転する。sin / cos を直接書いた 2D 回転
//    (この計算が mat2 という行列 1 つにまとまることを第10章で学ぶ)
float angle = u_time * 0.5;
float c = cos(angle);
float s = sin(angle);
vec2 pos = vec2(
  a_position.x * c - a_position.y * s,
  a_position.x * s + a_position.y * c
);

// 第4章で sin / cos を直書きした回転が、この 1 行にまとまる。
// GLSL の mat2(a, b, c, d) は「列」から埋まる:
//   1 列目 (c, s) = x 軸の基底 (1, 0) の行き先
//   2 列目 (-s, c) = y 軸の基底 (0, 1) の行き先
float c = cos(angle);
float s = sin(angle);
mat2 rot = mat2(c, s, -s, c);

// 先に座標を回し、それから模様を描く(順序が大事。入れ替えの実験は下のコメント)
vec2 q = rot * p;

// 行列 × ベクトルは「各列を、ベクトルの成分で重み付けして足す」
// rot * p = p.x * (1 列目) + p.y * (2 列目)
//         = p.x * vec2(c, s) + p.y * vec2(-s, c)
//         = vec2(c * p.x - s * p.y,
//                s * p.x + c * p.y) // 第4章の直書きの式と同じ

#version 300 es

// 第10章 デモ4: mat2 による 2D 回転の総仕上げ。
// 市松模様の格子(第9章の fract / mod)を、mat2 で組んだ回転行列で回す。
// u_time でゆっくり回り、ポインタを左右に動かすと角度が -PI〜+PI ぶん加わる。

precision highp float;

uniform float u_time;
uniform vec2 u_resolution;
uniform vec2 u_mouse;

out vec4 fragColor;

const float PI = 3.141592653589793;

void main() {
  vec2 p = (gl_FragCoord.xy * 2.0 - u_resolution) / min(u_resolution.x, u_resolution.y);

  // 回転角: 時間でゆっくり進み、マウス x で手動のオフセットを足す
  float mouse01 = u_mouse.x / u_resolution.x;
  float angle = u_time * 0.2 + (mouse01 - 0.5) * 2.0 * PI;

  // 第4章で sin / cos を直書きした回転が、この 1 行にまとまる。
  // GLSL の mat2(a, b, c, d) は「列」から埋まる:
  //   1 列目 (c, s) = x 軸の基底 (1, 0) の行き先
  //   2 列目 (-s, c) = y 軸の基底 (0, 1) の行き先
  float c = cos(angle);
  float s = sin(angle);
  mat2 rot = mat2(c, s, -s, c);

  // 先に座標を回し、それから模様を描く(順序が大事。入れ替えの実験は下のコメント)
  vec2 q = rot * p;

  // 市松模様: fract でタイル内の座標(第9章)、floor でタイルの番地(こちらはこの章が初出)
  vec2 cell = fract(q * 2.0) - 0.5; // 各タイル内の -0.5〜+0.5
  vec2 tile = floor(q * 2.0); // タイルの番地(整数)
  float checker = mod(tile.x + tile.y, 2.0); // 0 と 1 が交互に

  // タイルより少し小さい正方形を描く。max(|x|, |y|) は正方形の簡易距離で、
  // 内側と輪郭付近では十分正確(外側の遠方は正確な距離ではない。厳密な式は第8章の sdBox)
  float d = max(abs(cell.x), abs(cell.y)) - 0.42;
  float w = fwidth(d);
  float mask = 1.0 - smoothstep(-w, w, d); // 第8章の塗りの常套句

  vec3 tileColor = mix(vec3(0.90, 0.55, 0.25), vec3(0.30, 0.50, 0.85), checker);
  vec3 color = mix(vec3(0.06, 0.07, 0.11), tileColor, mask);

  fragColor = vec4(color, 1.0);

  // 実験: 「模様を作ってから回す」と何が変わるか。
  // vec2 q = p; にした上で、cell の行を
  //   vec2 cell = rot * (fract(q * 2.0) - 0.5);
  // に変えると、格子の並びは止まったまま、各タイルの中の正方形だけが回る。
  // 「座標の変形は、形を描く前に済ませる」— 順序で結果が変わることの確認
}

// 第10章: 極座標と 2D 回転
// 第2部共通の構成: 1 つの canvas に対して、切替ボタンでフラグメントシェーダーを
// 差し替える。CPU 側のコードはこれだけで、主役は 4 本の .frag ファイル。

import { startFullscreenShader } from '../../lib/fullscreen-shader';
import polarSource from './01-polar-debug.frag?raw';
import radialSource from './02-radial.frag?raw';
import kaleidoSource from './03-kaleido.frag?raw';
import rotationSource from './04-rotation.frag?raw';

const demos = [
  { id: 'polar', label: '極座標の可視化', source: polarSource },
  { id: 'radial', label: '放射模様と花', source: radialSource },
  { id: 'kaleido', label: '万華鏡', source: kaleidoSource },
  { id: 'rotation', label: 'mat2 回転', source: rotationSource },
] as const;

const canvas = document.querySelector<HTMLCanvasElement>('#demo');
const controls = document.querySelector<HTMLParagraphElement>('#demo-buttons');
if (!canvas || !controls) {
  throw new Error('デモに必要な要素が見つかりません');
}

let handle = startFullscreenShader(canvas, demos[0].source);

for (const [index, demo] of demos.entries()) {
  const button = document.createElement('button');
  button.type = 'button';
  button.textContent = demo.label;
  button.setAttribute('aria-pressed', index === 0 ? 'true' : 'false');
  button.addEventListener('click', () => {
    // いまのループを止めてから、新しいシェーダーで開始し直す(第6章の stop() の出番)。
    // 古いプログラムの解放は省略している(後始末は第35章)
    handle.stop();
    handle = startFullscreenShader(canvas, demo.source);
    for (const b of controls.querySelectorAll('button')) {
      b.setAttribute('aria-pressed', 'false');
    }
    button.setAttribute('aria-pressed', 'true');
  });
  controls.append(button);
}