三角関数

// この章の主役。x に入れる値と 4 つの定数で、あらゆる「揺れ」を設計する
//   y = A * sin(F * x + P) + C
//
//   A (振幅)      : 振れ幅。中心から上下にどれだけ揺れるか
//   F (周波数)    : 詰まり具合。周期(1 回の繰り返しの長さ)は 2π / F
//   P (位相)      : 波の「進み具合」。曲線ごと左右にずらす
//   C (オフセット): 中心の位置。曲線ごと上下にずらす

// sin は -1〜+1 を往復する。色や mix の割合には 0〜1 が欲しいので、
// 「半分に縮めて、0.5 持ち上げる」— A = 0.5, C = 0.5 の形にする
float t = 0.5 + 0.5 * sin(u_time); // 0〜1 を往復
vec3 color = mix(colorA, colorB, t);

// 「曲線 y = A・sin(F・x + P) + C の上」をピクセルの言葉に直す:
// 各ピクセルが、自分の高さ p.y と曲線の高さ wave の差を測る(第8章の距離→マスク)。
// fwidth は abs を取る前の符号付きの値に掛ける(折れ目で幅がつぶれるのを避ける)
float wave = AMPLITUDE * sin(FREQUENCY * p.x - SPEED * u_time) + OFFSET;
float sd = p.y - wave;
float aa = fwidth(sd);
float dist = abs(sd);
float line = 1.0 - smoothstep(0.025 - aa, 0.025 + aa, dist);

#version 300 es

// 第9章 デモ1: sin 波の解剖
// 曲線 y = A * sin(F * x + P) + C を 1 本の線として描く。
// 下の定数 4 つを書き換えて、それぞれが波のどこに効くかを確かめるためのシェーダー。

precision highp float;

uniform float u_time;
uniform vec2 u_resolution;

out vec4 fragColor;

// ---- 書き換えて試すための定数 ----------------------------------------
// A: 振幅。中心線からの振れ幅(波の高さ)
const float AMPLITUDE = 0.5;
// F: 周波数。x 方向にどれだけ波が詰まるか(周期は 2π / F)
const float FREQUENCY = 3.0;
// 位相 P を時間で進める速さ。0.0 にすると波は止まる
const float SPEED = 2.0;
// C: オフセット。波全体を上下にずらす
const float OFFSET = 0.0;
// ----------------------------------------------------------------------

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

  // 曲線の高さ。位相 P の位置に -SPEED * u_time を入れているので波は右へ流れる
  float wave = AMPLITUDE * sin(FREQUENCY * p.x - SPEED * u_time) + OFFSET;

  // 「このピクセルは曲線の上か」= 自分の高さ p.y と曲線の高さの差(第8章の距離→マスク)。
  // fwidth は符号付きの sd に対して取る。abs(sd) に取ると、曲線の真上(折れ目)で
  // 左右の差が打ち消し合って幅がつぶれ、縁の AA が効かなくなることがある
  float sd = p.y - wave;
  float aa = fwidth(sd);
  float dist = abs(sd);
  float line = 1.0 - smoothstep(0.025 - aa, 0.025 + aa, dist);

  // 曲線より下もうっすら塗って、波の「面」も見えるようにする
  float below = 1.0 - smoothstep(-aa, aa, sd);

  vec3 color = vec3(0.06, 0.07, 0.09); // 背景(canvas の CSS 背景色と同じ)
  color = mix(color, vec3(0.16, 0.24, 0.38), below * 0.6);
  color = mix(color, vec3(0.55, 0.80, 1.00), line);

  fragColor = vec4(color, 1.0);
}

float wave1 = 0.40 * sin(2.0 * p.x + 1.1 * u_time);
float wave2 = 0.20 * sin(5.0 * p.x - 1.7 * u_time);
float wave3 = 0.10 * sin(11.0 * p.x + 2.9 * u_time);

// 重ね合わせは、ただの足し算
float sum = wave1 + wave2 + wave3;

#version 300 es

// 第9章 デモ2: 波の重ね合わせ
// 振幅・周波数・速さの違う 3 本の sin 波(細い線)と、
// それを全部足しただけの合成波(太い明るい線)を同時に描く。
// 波を足したり係数を変えたりして、合成波の表情の変化を確かめる。

precision highp float;

uniform float u_time;
uniform vec2 u_resolution;

out vec4 fragColor;

// 「曲線 y = target からの縦方向の距離」を線のマスクにする(第8章)
float lineMask(float y, float target, float halfWidth) {
  float dist = abs(y - target);
  float aa = fwidth(dist);
  return 1.0 - smoothstep(halfWidth - aa, halfWidth + aa, dist);
}

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

  // 周波数を上げるほど振幅を小さくしている(細かい波ほど控えめに足す)
  float wave1 = 0.40 * sin(2.0 * p.x + 1.1 * u_time);
  float wave2 = 0.20 * sin(5.0 * p.x - 1.7 * u_time);
  float wave3 = 0.10 * sin(11.0 * p.x + 2.9 * u_time);

  // 重ね合わせは、ただの足し算
  float sum = wave1 + wave2 + wave3;

  vec3 color = vec3(0.06, 0.07, 0.09);
  // 部品の 3 本は細く、色分けして描く
  color = mix(color, vec3(0.30, 0.45, 0.85), lineMask(p.y, wave1, 0.012));
  color = mix(color, vec3(0.85, 0.55, 0.30), lineMask(p.y, wave2, 0.012));
  color = mix(color, vec3(0.35, 0.70, 0.45), lineMask(p.y, wave3, 0.012));
  // 合成波は太く、明るく
  color = mix(color, vec3(0.92, 0.95, 1.00), lineMask(p.y, sum, 0.028));

  fragColor = vec4(color, 1.0);
}

// 角度 t = 角速度 × 時間 + 初期位相。位置は 半径 × vec2(cos(t), sin(t))
float t1 = 1.6 * speed * u_time;
vec2 pos1 = 0.30 * vec2(cos(t1), sin(t1));
color = mix(color, vec3(0.55, 0.80, 1.00), circleMask(p, pos1, 0.035));

#version 300 es

// 第9章 デモ3: cos と sin で円運動
// vec2(cos(t), sin(t)) は「単位円の上の、角度 t の位置」。
// 半径と速さの違う 3 つの点を回し、ポインタの横位置で全体の速さを変える。

precision highp float;

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

out vec4 fragColor;

// GLSL に π の定数は用意されていないので、自分で書く
const float PI = 3.141592653589793;

// 中心 center・半径 radius の塗りつぶしの円(第8章)
float circleMask(vec2 p, vec2 center, float radius) {
  float dist = length(p - center) - radius;
  float aa = fwidth(dist);
  return 1.0 - smoothstep(-aa, aa, dist);
}

// 原点中心・半径 radius の軌道(細いリング)
float orbitMask(vec2 p, float radius) {
  float dist = abs(length(p) - radius);
  float aa = fwidth(dist);
  return 1.0 - smoothstep(0.004 - aa, 0.004 + aa, dist);
}

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

  // ポインタの横位置(0〜1)→ 速さの倍率(0〜2)。
  // 未操作時の u_mouse は画面中央(第6章)なので、触るまではちょうど 1 倍
  float speed = 2.0 * u_mouse.x / u_resolution.x;

  vec3 color = vec3(0.06, 0.07, 0.09);

  // 軌道を先に薄く描いておく
  color = mix(color, vec3(0.25, 0.30, 0.38), orbitMask(p, 0.30));
  color = mix(color, vec3(0.25, 0.30, 0.38), orbitMask(p, 0.55));
  color = mix(color, vec3(0.25, 0.30, 0.38), orbitMask(p, 0.85));

  // 中心の点(太陽のつもり)
  color = mix(color, vec3(0.95, 0.80, 0.45), circleMask(p, vec2(0.0), 0.06));

  // 惑星: 角度 t = 角速度 × 時間 + 初期位相。位置は 半径 × vec2(cos(t), sin(t))。
  // 内側の惑星ほど角速度を大きく(速く)している
  float t1 = 1.6 * speed * u_time;
  vec2 pos1 = 0.30 * vec2(cos(t1), sin(t1));
  color = mix(color, vec3(0.55, 0.80, 1.00), circleMask(p, pos1, 0.035));

  float t2 = 0.9 * speed * u_time + 0.75 * PI;
  vec2 pos2 = 0.55 * vec2(cos(t2), sin(t2));
  color = mix(color, vec3(0.85, 0.55, 0.30), circleMask(p, pos2, 0.045));

  float t3 = 0.5 * speed * u_time + 1.4 * PI;
  vec2 pos3 = 0.85 * vec2(cos(t3), sin(t3));
  color = mix(color, vec3(0.60, 0.85, 0.55), circleMask(p, pos3, 0.040));

  fragColor = vec4(color, 1.0);
}

// mod(q, 1.0) で座標を周期 1.0 の繰り返しにし、0.5 を引いて各タイルの中心を原点にする。
// fract(x) は mod(x, 1.0) と同じものなので、fract(q) - 0.5 と書いてもよい
vec2 q = p * 1.4;
vec2 cell = mod(q, 1.0) - 0.5;

float r = length(cell);
float phase = 2.0 * (p.x + p.y);
float ripple = 0.5 + 0.5 * sin(14.0 * r - 1.2 * u_time + phase); // -1〜+1 → 0〜1

#version 300 es

// 第9章 デモ4: sin と mod で繰り返し模様
// mod で空間を周期 1.0 のタイルに区切り、各タイルに sin の波紋を置く。
// 波紋の位相に「タイルに区切る前の座標」を混ぜているので、
// 模様はタイルをまたいでつながり、波が画面全体を伝わっていくように見える。

precision highp float;

uniform float u_time;
uniform vec2 u_resolution;

out vec4 fragColor;

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

  // mod(q, 1.0) で座標を周期 1.0 の繰り返しにし、0.5 を引いて各タイルの中心を原点にする。
  // fract(x) は mod(x, 1.0) と同じものなので、fract(q) - 0.5 と書いてもよい
  vec2 q = p * 1.4;
  vec2 cell = mod(q, 1.0) - 0.5;

  // タイルの中心からの距離で波紋を作る。
  // 位相に 2.0 * (p.x + p.y) を混ぜている = 場所によって波の進み具合がずれる。
  // このずれが「左下から右上へ波が伝わる」動きになる(係数を 0.0 にすると全タイル同時)
  float r = length(cell);
  float phase = 2.0 * (p.x + p.y);
  float ripple = 0.5 + 0.5 * sin(14.0 * r - 1.2 * u_time + phase); // -1〜+1 → 0〜1

  // もう 1 枚、大きくゆるい斜めの sin を重ねて、画面全体の明るさをゆっくり揺らす
  float swell = 0.5 + 0.5 * sin(2.0 * (p.x - p.y) + 0.4 * u_time);

  // 波紋を 2 色のグラデーションに割り当てる(2 乗して暗い側を締める)
  vec3 colorA = vec3(0.08, 0.10, 0.22);
  vec3 colorB = vec3(0.60, 0.80, 0.95);
  vec3 color = mix(colorA, colorB, ripple * ripple);
  color *= 0.75 + 0.25 * swell;

  // タイルの継ぎ目が気になったら、この行を有効にすると境界が赤く見える:
  // color = mix(color, vec3(1.0, 0.3, 0.3), step(0.48, max(abs(cell.x), abs(cell.y))));

  fragColor = vec4(color, 1.0);
}

// 第9章: 三角関数
// 1 つの canvas を、4 本のフラグメントシェーダーで切り替えるデモ。
// CPU 側の仕事はボタンの生成と、ハーネス(第6章)の起動・停止だけ。

import { startFullscreenShader } from '../../lib/fullscreen-shader';
import waveSource from './01-wave.frag?raw';
import superposeSource from './02-superpose.frag?raw';
import circularSource from './03-circular.frag?raw';
import patternSource from './04-pattern.frag?raw';

const demos = [
  { id: 'wave', label: 'sin 波の解剖', source: waveSource },
  { id: 'superpose', label: '波の重ね合わせ', source: superposeSource },
  { id: 'circular', label: '円運動', source: circularSource },
  { id: 'pattern', label: '繰り返し模様', source: patternSource },
] 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);
}