UV 座標と色

// gl_FragCoord.xy: いま塗っているピクセルの位置(左下原点・ピクセル単位)
// u_resolution:    描画バッファ全体のサイズ(ピクセル)
vec2 uv = gl_FragCoord.xy / u_resolution; // → どちらの成分も 0〜1 に収まる

#version 300 es

// 第7章デモ 1: UV 座標の可視化 — シェーダーデバッグの定番。
// uv.x を赤(R)、uv.y を緑(G)にそのまま出力する。
//   左下 (0, 0) → 黒 / 右下 (1, 0) → 赤 / 左上 (0, 1) → 緑 / 右上 (1, 1) → 黄
// 「座標が思ったとおりに取れているか?」を疑ったら、まずこの形に戻って目で確かめる。

precision highp float;

uniform vec2 u_resolution; // 描画バッファのサイズ(ピクセル)

out vec4 fragColor;

void main() {
  // gl_FragCoord.xy は、いま塗っているピクセルの位置(左下原点・ピクセル単位)。
  // 画面全体のサイズ u_resolution で割ると、canvas の大きさによらず
  // どちらの成分も 0〜1 に収まる。これが UV 座標
  vec2 uv = gl_FragCoord.xy / u_resolution;

  // x を R、y を G に入れる。B は使わない。
  // 色がそのまま「このピクセルの座標の値」の読み出し結果になる
  fragColor = vec4(uv.x, uv.y, 0.0, 1.0);
}

// uv 空間では「中心 (0.25, 0.5)・半径 0.18 の円」のつもりだが、
// uv の 0〜1 の正方形ごと canvas に引き伸ばされるため、画面上では楕円になる
float dLeft = distance(uv, vec2(0.25, 0.5));
float circleLeft = 1.0 - smoothstep(0.175, 0.185, dLeft);

vec2 uv = gl_FragCoord.xy / u_resolution;

// 手順 1: ×2 − 1 で、0〜1 を -1〜+1 に写す。これで画面中央が原点になる。
// 実はこの範囲は NDC(クリップ空間を w で割った後の座標。第3章)の xy と同じで、
// 歪みもまだそのまま
vec2 ndc = uv * 2.0 - 1.0;

// 手順 2: いったんピクセルに戻し(× u_resolution)、
// 縦横どちらも「短辺の長さ min(w, h)」という同じ 1 つの数で割り直す。
// x も y も同じ数で割るので、「長さ 1.0」が縦横で同じピクセル数になる
vec2 p = ndc * u_resolution / min(u_resolution.x, u_resolution.y);

vec2 uv = gl_FragCoord.xy / u_resolution; // 0〜1。左下原点
vec2 p = (gl_FragCoord.xy * 2.0 - u_resolution) / min(u_resolution.x, u_resolution.y);
// ↑ 中心原点・アスペクト比補正済み。短辺方向が -1〜+1

#version 300 es

// 第7章デモ 2: アスペクト比の壁。
// 「半径が一定の円」を、左半分は uv 基準(補正なし)、右半分は p 基準(補正あり)で塗る。
// 左は canvas の横縦比のぶんだけ横に伸びて楕円になり、右は常に真円になる。

precision highp float;

uniform vec2 u_resolution; // 描画バッファのサイズ(ピクセル)

out vec4 fragColor;

void main() {
  vec2 uv = gl_FragCoord.xy / u_resolution;

  // この章で決める標準座標 p: 中心原点・アスペクト比補正済み。
  // 短辺方向がちょうど -1〜+1 になる(導出は本文 3 節)
  vec2 p = (gl_FragCoord.xy * 2.0 - u_resolution) / min(u_resolution.x, u_resolution.y);

  // --- 左半分: uv のまま円を描く(補正なし) ---
  // uv 空間では「中心 (0.25, 0.5)・半径 0.18 の円」のつもりだが、
  // uv の 0〜1 の正方形ごと canvas に引き伸ばされるため、画面上では楕円になる
  float dLeft = distance(uv, vec2(0.25, 0.5));
  float circleLeft = 1.0 - smoothstep(0.175, 0.185, dLeft);

  // --- 右半分: p で円を描く(補正あり) ---
  // 円の中心は「uv の (0.75, 0.5) にあたる点」。中心の座標にも同じ補正式を通す
  vec2 center =
      (vec2(0.75, 0.5) * u_resolution * 2.0 - u_resolution) /
      min(u_resolution.x, u_resolution.y);
  float dRight = distance(p, center);
  // p の単位は「短辺の半分 = 1.0」なので、半径 0.36 は左の 0.18(縦基準)と同じ見た目の大きさ
  float circleRight = 1.0 - smoothstep(0.35, 0.37, dRight);

  // step(0.5, uv.x) は画面の左半分で 0、右半分で 1。これで左右を塗り分ける
  float side = step(0.5, uv.x);
  float circle = mix(circleLeft, circleRight, side);

  // 左(補正なし)は警告っぽい暖色、右(補正済み)は落ち着いた寒色
  vec3 background = vec3(0.06, 0.07, 0.09);
  vec3 colorLeft = vec3(0.90, 0.45, 0.25); // 楕円になってしまう uv 基準
  vec3 colorRight = vec3(0.30, 0.75, 0.65); // 真円になる p 基準
  vec3 color = mix(background, mix(colorLeft, colorRight, side), circle);

  // 中央に境界線を 1 本(smoothstep で細く塗る。境目の塗り方の本格解説は第8章)
  float divider = 1.0 - smoothstep(0.001, 0.003, abs(uv.x - 0.5));
  color = mix(color, vec3(0.35), divider);

  fragColor = vec4(color, 1.0);
}

// mix(a, b, t) = a * (1.0 - t) + b * t  … 成分ごとの単純な重み付き平均
vec3 color = mix(colorA, colorB, t); // t = 0.0 で colorA、1.0 で colorB、0.5 で中間色

#version 300 es

// 第7章デモ 3: 補間関数のカタログ。
// 画面を横帯 4 本に分け、同じ「暗い色 → 明るい色」のグラデーションを
// t の作り方だけ変えて並べる。上から順に:
//   最上段(オレンジ): t = uv.x             — mix にそのまま。直線的な変化
//   2 段目(緑):       t = smoothstep(...)  — 0.25〜0.75 の間だけ、なめらかに 0 → 1
//   3 段目(青):       t = step(0.5, uv.x)  — 0.5 を境に 0 か 1。中間がない
//   最下段(ピンク):   t = fract(uv.x*4.0)  — のこぎり波。0〜1 を 4 回繰り返す縞
// band の番号は下から 0, 1, 2, 3(uv.y は下が 0 なので)。上の並びとは逆向きに数える

precision highp float;

uniform vec2 u_resolution; // 描画バッファのサイズ(ピクセル)

out vec4 fragColor;

void main() {
  vec2 uv = gl_FragCoord.xy / u_resolution;

  // 何本目の帯か(下から 0, 1, 2, 3)と、帯の中での縦位置(0〜1)
  int band = int(uv.y * 4.0);
  float bandY = fract(uv.y * 4.0);

  float t; // 「混ぜる割合」。帯ごとに作り方だけを変える
  vec3 bright; // 帯ごとの明るい側の色(どの帯か見分けるため)
  if (band >= 3) {
    t = uv.x; // そのまま渡す = 一定の速さで変わる直線的なグラデーション
    bright = vec3(0.95, 0.55, 0.25); // オレンジ
  } else if (band == 2) {
    t = smoothstep(0.25, 0.75, uv.x); // 0.25 以下は 0、0.75 以上は 1、間はなめらかな S 字
    bright = vec3(0.35, 0.85, 0.55); // 緑
  } else if (band == 1) {
    t = step(0.5, uv.x); // 0.5 未満は 0、0.5 以上は 1。くっきりした境目
    bright = vec3(0.35, 0.55, 0.95); // 青
  } else {
    t = fract(uv.x * 4.0); // 整数部を捨てる → 0 → 1 の上り坂を 4 回繰り返す
    bright = vec3(0.90, 0.40, 0.70); // ピンク
  }

  vec3 dark = vec3(0.07, 0.08, 0.11);
  vec3 color = mix(dark, bright, t);

  // 帯と帯の境目を暗くして区切りを見せる(bandY が 0 と 1 に近いところだけ暗く)
  float separator = smoothstep(0.0, 0.06, bandY) * (1.0 - smoothstep(0.94, 1.0, bandY));
  color *= mix(0.3, 1.0, separator);

  fragColor = vec4(color, 1.0);
}

// mix(colorA, colorB, t) の t に何を入れるかで、グラデーションの姿が決まる
t = uv.x;                          // 左 → 右
t = uv.y;                          // 下 → 上
t = (uv.x + uv.y) * 0.5;           // 斜め
t = clamp(length(p), 0.0, 1.0);    // 中心から放射状(真円になるのは p のおかげ)。
                                   // length(p) は画面の隅で 1 を超えるので clamp する
t = 0.5 + 0.5 * sin(u_time);       // 位置と無関係に、時間で全体が往復
t = fract(uv.x * 4.0);             // 繰り返す縞

// 3 色のグラデーション: t の前半で A → B、後半で B → C と 2 段重ねる。
// smoothstep の範囲を重ねたりずらしたりすると、各色の「幅」を設計できる
vec3 color = mix(colorA, colorB, smoothstep(0.0, 0.5, t));
color = mix(color, colorC, smoothstep(0.5, 1.0, t));

// u_mouse はピクセル値(左下原点)なので、割合として使うなら u_resolution で割る
vec2 mouse = u_mouse / u_resolution; // 0〜1。uv とちょうど同じ座標系になる
vec3 color = mix(colorA, colorB, mouse.x); // ポインタの横位置で 2 色を混ぜる

#version 300 es

// 第7章デモ 4: 仕上げ — この章の道具だけで作る、ゆっくり動く多色グラデーション。
// 使っているのは mix / smoothstep / length / clamp と、揺らし用の sin だけ
// (sin は第4章から登場済み。本格的な使いこなしは第9章)。
// ノイズも図形(SDF)もまだ使っていない — それらは後の章の題材。

precision highp float;

uniform float u_time; // 経過時間(秒)
uniform vec2 u_resolution; // 描画バッファのサイズ(ピクセル)
uniform vec2 u_mouse; // ポインタ位置(ピクセル・左下原点。未操作時は画面中央)

out vec4 fragColor;

void main() {
  // 標準座標 p: 中心原点・アスペクト比補正済み・短辺方向が -1〜+1(本文 3 節)
  vec2 p = (gl_FragCoord.xy * 2.0 - u_resolution) / min(u_resolution.x, u_resolution.y);

  // u_mouse はピクセル値なので、u_resolution で割って 0〜1 の割合にしてから使う
  vec2 mouse = u_mouse / u_resolution;

  // 混ぜる割合 t: 斜めの位置を土台に、時間でゆっくり揺らし、
  // ポインタの横位置で全体を持ち上げ下げする。mix に渡す前に 0〜1 へ clamp
  float t = 0.5
      + 0.35 * p.x * sin(u_time * 0.13)
      + 0.35 * p.y * sin(u_time * 0.09 + 1.7)
      + 0.30 * (mouse.x - 0.5);
  t = clamp(t, 0.0, 1.0);

  // 3 色を 2 段の mix で重ねる。smoothstep の範囲が「どの t でどの色へ移るか」の設計図
  vec3 colorA = vec3(0.08, 0.12, 0.30); // 藍
  vec3 colorB = vec3(0.72, 0.28, 0.40); // 茜
  vec3 colorC = vec3(0.98, 0.84, 0.55); // 金
  vec3 color = mix(colorA, colorB, smoothstep(0.0, 0.65, t));
  color = mix(color, colorC, smoothstep(0.60, 1.0, t));

  // 縁を少し暗くする(ビネット)。length(p) の等距離線が真円になるのは、補正済みの p だから
  color *= 1.0 - 0.35 * smoothstep(0.5, 1.4, length(p));

  // ポインタの縦位置で、全体をほんの少しだけ白へ寄せる(2 つ目の「混ぜ具合」の入力)
  color = mix(color, vec3(1.0), 0.08 * mouse.y);

  fragColor = vec4(color, 1.0);
}

// 第7章: UV 座標と色
// デモは第6章のハーネスの上で動く。この章から、書くのはフラグメントシェーダーだけ。
import { startFullscreenShader } from '../../lib/fullscreen-shader';
import uvDebugSource from './01-uv-debug.frag?raw';
import aspectSource from './02-aspect.frag?raw';
import functionsSource from './03-functions.frag?raw';
import gradientSource from './04-gradient.frag?raw';

// 切替式デモ: ボタンで表示するフラグメントシェーダーを切り替える
const demos = [
  { id: 'uv-debug', label: 'UV の可視化', source: uvDebugSource },
  { id: 'aspect', label: '円と歪み', source: aspectSource },
  { id: 'functions', label: '補間関数', source: functionsSource },
  { id: 'gradient', label: 'グラデーション', source: gradientSource },
] 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);
}