2D SDF

  float dUnion = min(d1, d2); // 和: 近い方の形までの距離
  float dDifference = max(d1, -d2); // 差: d2 の内側(-d2 が負)を打ち消して穴を開ける
  float dIntersection = max(d1, d2); // 積: 両方の内側でだけ負
  float dSmooth = smin(d1, d2, SMOOTH_K); // なめらかな和

float smin(float a, float b, float k) {
  float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);
  return mix(b, a, h) - k * h * (1.0 - h);
}

float smax(float a, float b, float k) {
  float h = clamp(0.5 - 0.5 * (b - a) / k, 0.0, 1.0);
  return mix(b, a, h) + k * h * (1.0 - h);
}

// 壊さない: 平行移動・回転・鏡映 — 長さを変えない変換なので、距離もそのまま
float dMoved = sdBox(rot * (p - offset), b);

// 直せる: 一様スケール — 座標を s で割ったぶん、結果に s を掛け戻す
float dScaled = sdBox(p / s, b) * s;

// 直せない: 非一様スケール — 軸ごとに倍率が違うと、どんな定数を掛けても距離にならない
float dSquashed = sdBox(p / vec2(sx, sy), b) * min(sx, sy);

// 壊さない: オフセット — d = 0 の線が r だけ外側の等高線へ移るだけ
float dRounded = sdBox(p, b) - r;

  vec2 scale = vec2(ELLIPSE_X, mix(ELLIPSE_X, 0.12, mouse01.y));
  float dEllipse = sdCircle(qTop / scale, 1.0) * min(scale.x, scale.y);

  float slope = AMPLITUDE * frequency * cos(phase);
  float dNormalized = dVertical / length(vec2(slope, 1.0));

// 解析的な勾配が書けないときは、dFdx / dFdy で数値的に取る。
// この 2 つは「隣のピクセルとの差」なので、割った結果の単位は
// 標準座標ではなく「ピクセル」になる(fwidth と同じ土俵。第5・8章)
float pixels = d / length(vec2(dFdx(d), dFdy(d)));

// 標準座標に戻したいなら、1 ピクセルぶんの幅を掛ける
float side = min(u_resolution.x, u_resolution.y);
float corrected = pixels * (2.0 / side);

  vec2 qMod = mod(q, c) - 0.5 * c;
  float dTiled = sdCircle(qMod, radius);

// mod 版: 畳んだ座標は -c/2〜+c/2。原点 p = 0 はセルの「角」に来る
vec2 qMod = mod(p, c) - 0.5 * c;

// round 版: 範囲は同じだが、原点 p = 0 はセルの「中心」に来る。
// セルの番地 id がそのまま手に入るのも利点
vec2 id = round(p / c);
vec2 qRound = p - c * id;

  vec2 limitedId = clamp(round(q / c), -LIMIT, LIMIT);
  float dLimited = sdCircle(q - c * limitedId, radius);

  float sectors = floor(mix(4.0, 12.0, mouse01.x) + 0.5);
  float sector = 2.0 * PI / sectors;
  float a = mod(theta + u_time * SPIN, sector);
  a = abs(a - sector * 0.5);
  vec2 q = r * vec2(cos(a), sin(a));

  float k = mix(0.005, 0.20, mouse01.y); // 溶ける幅。ほぼ 0 なら min と同じ
  float d = sdCircle(q - vec2(0.62, 0.13), 0.14);
  d = smin(d, sdBox(q - vec2(0.40, 0.03), vec2(0.30, 0.035)), k); // 中心へ伸びる腕
  d = smin(d, sdCircle(q - vec2(0.20, 0.02), 0.10), k); // 内側の玉
  d = smin(d, sdCircle(q - vec2(0.88, 0.06), 0.07), k); // 外側の玉
  d = max(d, -sdCircle(q - vec2(0.62, 0.13), 0.06)); // 差で穴を開ける

function resolveIncludes(source: string): string {
  return source.replace('#include "sdf.glsl"', () => sdfChunkSource.trim());
}

// 第24章の 4 本のデモが共有する距離関数チャンク。
// 各 .frag の `#include "sdf.glsl"` を main.ts が文字列置換で差し替える
// (仕組みは第23章の pbr.glsl と同じ)。

// ---- 第8章の形。1 文字も変えていない -----------------------------------

float sdCircle(vec2 p, float r) {
  return length(p) - r;
}

float sdBox(vec2 p, vec2 b) {
  vec2 q = abs(p) - b;
  return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0);
}

// 塗りの常套句: 距離 → 0〜1 のマスク(輪郭の両側を約 1 ピクセルずつぼかす)
float fill(float d) {
  float w = fwidth(d);
  return 1.0 - smoothstep(-w, w, d);
}

// ---- この章の主役 -------------------------------------------------------

// なめらかな最小値(Inigo Quilez の quadratic polynomial smooth minimum・オリジナル版)。
// k は「溶ける幅」で、|a - b| が k 以上離れると h が 0 か 1 に張り付き、
// 結果は min(a, b) にぴったり一致する。最も深く食い込むのは a == b のときで、
// min より k / 4 だけ小さい値を返す。2 つの面がつながるのは、面どうしの隙間が
// k / 2 まで縮んだときになる(いずれも本文 3 節で数値確認済み)。
float smin(float a, float b, float k) {
  float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);
  return mix(b, a, h) - k * h * (1.0 - h);
}

// なめらかな最大値。smin の比較の向きと符号を裏返しただけで、
// a == b のとき max より k / 4 だけ大きい値を返す。
// この章のデモは使っていない(実験リストで差し替えて使う)
float smax(float a, float b, float k) {
  float h = clamp(0.5 - 0.5 * (b - a) / k, 0.0, 1.0);
  return mix(b, a, h) + k * h * (1.0 - h);
}

// ---- 可視化 -------------------------------------------------------------

// 距離場そのものを絵にする(第8章デモ2の色分けと等高線を関数にまとめ直したもの)。
// spacing は等高線の間隔。等高線が等間隔に並ぶかどうかが、
// 「この d は本物の距離場か」を目で判定する手がかりになる(本文 1 節)
vec3 fieldColor(float d, float spacing) {
  vec3 color = mix(vec3(0.95, 0.55, 0.25), vec3(0.20, 0.36, 0.70), step(0.0, d));
  color *= 1.0 - 0.55 * clamp(abs(d), 0.0, 1.0); // 遠いほど暗く

  // 最寄りの等高線までの距離。線の太さのほうは fwidth で画面上約 1.5 ピクセルに
  // 揃えてあるので、目に入る違いは「縞の間隔」だけになる
  float g = abs(fract(d / spacing - 0.5) - 0.5) * spacing;
  float w = max(1.5 * fwidth(d), 1e-5); // 平らな場所で edge0 == edge1 にならないよう下限を置く
  color *= 1.0 - 0.45 * (1.0 - smoothstep(0.0, w, g));
  return color;
}

// 比較デモの仕切り線。区画の境界までの距離 e を渡すと、線の上で 0 に近づく係数を返す
float panelDivider(float e) {
  return smoothstep(0.0, 0.007, e);
}

  float g = abs(fract(d / spacing - 0.5) - 0.5) * spacing;
  float w = max(1.5 * fwidth(d), 1e-5); // 平らな場所で edge0 == edge1 にならないよう下限を置く
  color *= 1.0 - 0.45 * (1.0 - smoothstep(0.0, w, g));

#version 300 es

// 第24章 デモ1: 4 つの合成を並べて比べる。
// 画面を 2×2 に分け、まったく同じ「円 + 矩形」に別々の合成を掛ける。
//   左上 = 和   min(d1, d2)         右上 = 差 max(d1, -d2)
//   左下 = 積   max(d1, d2)         右下 = なめらかな和 smin(d1, d2, SMOOTH_K)
// 色は塗りではなく距離場そのもの(内外の色分け + 等高線)。
// 形の見た目だけでなく、外側の等高線がどう走るかを見比べるのがこのデモの本題。
// ポインタを左右に動かすと、円が矩形を通り抜ける。

precision highp float;

uniform vec2 u_resolution;
uniform vec2 u_mouse;

out vec4 fragColor;

#include "sdf.glsl"

// ---- 書き換えて試すための定数 ----------------------------------------
// 円の半径
const float RADIUS = 0.20;
// 矩形の半サイズ(中心から辺まで)
const vec2 HALF_SIZE = vec2(0.18, 0.14);
// smin の「溶ける幅」。0 に近づけると min に戻る
const float SMOOTH_K = 0.12;
// 等高線の間隔
const float SPACING = 0.06;
// ----------------------------------------------------------------------

void main() {
  // 標準座標(第7章)
  vec2 p = (gl_FragCoord.xy * 2.0 - u_resolution) / min(u_resolution.x, u_resolution.y);

  // 2×2 の区画。区画の中心を原点に置き直した局所座標 q の上で形を描く
  vec2 q = p - vec2(p.x < 0.0 ? -0.75 : 0.75, p.y < 0.0 ? -0.5 : 0.5);
  int panel = (p.y > 0.0 ? 0 : 2) + (p.x > 0.0 ? 1 : 0);

  // 円だけポインタで左右に動かす(0〜1 を -0.34〜+0.10 に写す)
  float mouse01 = u_mouse.x / u_resolution.x;
  float d1 = sdCircle(q - vec2(mix(-0.34, 0.10, mouse01), 0.0), RADIUS);
  float d2 = sdBox(q - vec2(0.13, 0.0), HALF_SIZE);

  // 4 通りの合成をすべて計算しておいてから区画で選ぶ。
  // fwidth を使う fill / fieldColor は、分岐の外で 1 回だけ呼ぶ(第8章)
  float dUnion = min(d1, d2); // 和: 近い方の形までの距離
  float dDifference = max(d1, -d2); // 差: d2 の内側(-d2 が負)を打ち消して穴を開ける
  float dIntersection = max(d1, d2); // 積: 両方の内側でだけ負
  float dSmooth = smin(d1, d2, SMOOTH_K); // なめらかな和

  float d = panel == 0
      ? dUnion
      : (panel == 1 ? dDifference : (panel == 2 ? dIntersection : dSmooth));

  vec3 color = fieldColor(d, SPACING);
  color = mix(color, vec3(1.0), fill(abs(d) - 0.004)); // d = 0 の輪郭を白で重ねる
  color *= panelDivider(min(abs(p.x), abs(p.y))); // 区画の仕切り

  fragColor = vec4(color, 1.0);
}

#version 300 es

// 第24章 デモ2: 「その値は本物の距離か」を等高線と線の太さで見分ける。
// 4 つの区画に、まったく同じ描き方(等間隔の等高線 + 太さ一定の白い輪郭線)で
// 4 つの「距離らしきもの」を並べる。
//   左上   = 円 length(p) - r          … 本物。等高線は等間隔、輪郭線の太さも一定
//   右上   = 円を x と y で違う倍率に伸ばした楕円 … |∇d| < 1 になり、横方向の
//                                        等高線が間延びし、輪郭線も太くなる
//   下段上 = sin 曲線までの「縦方向の距離」(第9章) … 斜面で等高線が詰まり、線が細る
//   下段下 = それを勾配の大きさで割った版         … 線の太さがほぼ均一になる
// ポインタ: 左右で sin の周波数、上下で楕円の潰し具合が変わる。

precision highp float;

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

out vec4 fragColor;

#include "sdf.glsl"

// ---- 書き換えて試すための定数 ----------------------------------------
// 左上の円の半径
const float CIRCLE_RADIUS = 0.30;
// 右上の楕円の x 半径(y 半径はポインタの上下で 0.44 → 0.12 に変わる)
const float ELLIPSE_X = 0.44;
// sin 波の振幅
const float AMPLITUDE = 0.13;
// 白い輪郭線の半分の太さ。4 区画とも同じ値を使う
const float LINE = 0.012;
// 等高線の間隔(上段 / 下段)
const float SPACING_TOP = 0.07;
const float SPACING_BOTTOM = 0.045;
// ----------------------------------------------------------------------

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

  // ---- 上段(p.y > 0): 左右 2 区画。区画の中心を原点にした局所座標
  vec2 qTop = p - vec2(p.x < 0.0 ? -0.75 : 0.75, 0.5);

  // 左上: 本物の距離場。どこでも |∇d| = 1
  float dCircle = sdCircle(qTop, CIRCLE_RADIUS);

  // 右上: 座標を軸ごとに違う倍率で割ってから円の距離を測ったもの。
  // 一様スケールなら sd(p / s) * s で正しい距離に直せるが、s が軸ごとに違うと
  // どんな定数を掛けても距離にはならない(本文 4 節)
  vec2 scale = vec2(ELLIPSE_X, mix(ELLIPSE_X, 0.12, mouse01.y));
  float dEllipse = sdCircle(qTop / scale, 1.0) * min(scale.x, scale.y);

  // ---- 下段(p.y < 0): 上下 2 区画。x はそのまま、y だけ行の中心へ寄せる
  vec2 qRow = vec2(p.x, p.y - (p.y > -0.5 ? -0.25 : -0.75));

  float frequency = mix(6.0, 13.0, mouse01.x);
  float phase = frequency * qRow.x - u_time * 0.7;
  float wave = AMPLITUDE * sin(phase);

  // 第9章の「縦方向の距離」。真上・真下に測った差でしかない
  float dVertical = qRow.y - wave;

  // 勾配は解析的に出せる: ∇d = (-A * F * cos(phase), 1)。
  // その長さで割ると、曲線のすぐ近くでは本当の距離に一致する(本文 5 節)
  float slope = AMPLITUDE * frequency * cos(phase);
  float dNormalized = dVertical / length(vec2(slope, 1.0));

  // 4 区画ぶんを計算してから選ぶ(fwidth を使う関数は分岐の外で呼ぶ)
  bool top = p.y > 0.0;
  float d = top
      ? (p.x < 0.0 ? dCircle : dEllipse)
      : (p.y > -0.5 ? dVertical : dNormalized);
  float spacing = top ? SPACING_TOP : SPACING_BOTTOM;

  vec3 color = fieldColor(d, spacing);
  // 太さを 2 * LINE に固定した輪郭線。d が本物の距離なら、この線はどこでも同じ太さに見える
  color = mix(color, vec3(1.0), fill(abs(d) - LINE));

  // 仕切り: y = 0 と y = -0.5 の横線、それに上段だけの縦線 x = 0
  float edge = min(abs(p.y), abs(p.y + 0.5));
  color *= panelDivider(min(edge, top ? abs(p.x) : 1.0));

  fragColor = vec4(color, 1.0);
}

#version 300 es

// 第24章 デモ3: 座標を折り畳んで形を敷き詰める。
//   左上 = 無限タイリング。形をセルの中央に置く    → 距離は厳密なまま
//   右上 = 同じ形をセルの中でずらしただけ          → 隣のセルのぶんが計算に入らず距離が壊れる
//   左下 = 有限繰り返し clamp(round(p / c), -n, n) → 中央の 3×3 セルだけに形が出る
//   右下 = セルの番地 id で形と大きさを変える
// ポインタを左右に動かすと、セルの一辺 c が 0.20〜0.50 で変わる。

precision highp float;

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

out vec4 fragColor;

#include "sdf.glsl"

// ---- 書き換えて試すための定数 ----------------------------------------
// 形の半径。セルの一辺 c に対する比で決めるので、c を変えても関係は保たれる。
// 0.5 以下ならセルからはみ出さない
const float RADIUS_RATIO = 0.34;
// 右上の区画で形をずらす量(セルの一辺に対する比)。0.0 にすると左上と同じになる
const vec2 OFFSET_RATIO = vec2(0.30, 0.16);
// 有限繰り返しの範囲。中央のセルから ±1 セル = 3×3 セル
const float LIMIT = 1.0;
// ----------------------------------------------------------------------

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

  // 2×2 の区画。区画の中心を原点に置き直した局所座標 q
  vec2 q = p - vec2(p.x < 0.0 ? -0.75 : 0.75, p.y < 0.0 ? -0.5 : 0.5);
  int panel = (p.y > 0.0 ? 0 : 2) + (p.x > 0.0 ? 1 : 0);

  float mouse01 = u_mouse.x / u_resolution.x;
  float c = mix(0.20, 0.50, mouse01); // セルの一辺
  float radius = RADIUS_RATIO * c;

  // (1) 無限タイリング。mod で「セルの中での位置」に畳む。
  //     GLSL の mod は 0〜c を返すので、-0.5 * c すると畳んだ座標は -c/2〜+c/2 になる
  vec2 qMod = mod(q, c) - 0.5 * c;
  float dTiled = sdCircle(qMod, radius);

  // (2) 同じ形をセルの中でずらしただけ。形が「自分のセルの領域」からはみ出すので、
  //     隣のセルのコピーのほうが近い点が現れる。折り畳みはそれを見ないので、
  //     距離が過大評価され、形はセルの境界でちぎれる
  float dBroken = sdCircle(qMod - OFFSET_RATIO * c, radius);

  // (3) 有限繰り返し。セルの番地を clamp で止めると、範囲の外では端のセルの形までの
  //     距離が続く。round 版の畳み込みなので原点はセルの中心
  vec2 limitedId = clamp(round(q / c), -LIMIT, LIMIT);
  float dLimited = sdCircle(q - c * limitedId, radius);

  // (4) セルの番地で形を変える。id は第10章の市松模様の「タイルの番地」と同じもの。
  //     隣より大きい形が置かれたセルの周りでは距離が壊れる点は (2) と同じ。
  //     なお番地から「ランダムな値」を作るのはハッシュの仕事で、それは第25章
  vec2 id = round(q / c);
  vec2 qId = q - c * id;
  float variation = 0.5 + 0.5 * sin(id.x * 1.7 + id.y * 2.3 + u_time * 0.5);
  float scaled = radius * (0.55 + 0.45 * variation);
  float dVaried = mod(id.x + id.y, 2.0) < 0.5
      ? sdCircle(qId, scaled)
      : sdBox(qId, vec2(scaled * 0.85));

  float d = panel == 0 ? dTiled : (panel == 1 ? dBroken : (panel == 2 ? dLimited : dVaried));

  vec3 color = fieldColor(d, c * 0.22);
  color = mix(color, vec3(1.0), fill(abs(d) - 0.004));
  color *= panelDivider(min(abs(p.x), abs(p.y)));

  fragColor = vec4(color, 1.0);
}

#version 300 es

// 第24章 デモ4: 第10章の万華鏡の上に、この章の合成で組んだ形を置いた一枚絵。
// 手順は 3 段だけ。
//   ① θ を mod + abs で扇形 1 枚に畳む(ドメイン変形。第10章)
//   ② 畳んだ座標 q の上で、円と矩形を smin でつなぎ、max(d, -d2) で穴を開ける
//   ③ 距離 → マスク → mix で塗る(第8章の常套句)
// ポインタ: 左右で分割数(4〜12 枚)、上下で smin の溶ける幅 k が変わる。
// 上下いっぱいまで動かすと、角ばった谷 → 丸い首、離れていた外側の玉 → 本体と合流、
// と連続的に変わる(k ≒ 0.106 で合流する。本文 7 節)。

precision highp float;

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

out vec4 fragColor;

#include "sdf.glsl"

const float PI = 3.141592653589793;

// ---- 書き換えて試すための定数 ----------------------------------------
// 内側に入れる細い縁取りの位置(d = -0.03 の等高線)と、その半分の太さ
const float RIM_OFFSET = 0.03;
const float RIM_WIDTH = 0.008;
// 全体の回転の速さ
const float SPIN = 0.12;
// ----------------------------------------------------------------------

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

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

  // ① 万華鏡の折り畳み(第10章)。回転と鏡映だけでできているので、
  //    折り畳んだ先の座標 q の上では長さがそのまま保たれる = 距離が壊れない。
  //    ただし「扇形からはみ出した形」は隣の扇形のぶんが見えないので、
  //    そこはタイリングと同じ理由で近似になる(本文 6・7 節)
  float sectors = floor(mix(4.0, 12.0, mouse01.x) + 0.5);
  float sector = 2.0 * PI / sectors;
  float a = mod(theta + u_time * SPIN, sector);
  a = abs(a - sector * 0.5);
  vec2 q = r * vec2(cos(a), sin(a));

  // ② 扇形 1 枚ぶんの形。ここを書き換えると全扇形に反映される
  float k = mix(0.005, 0.20, mouse01.y); // 溶ける幅。ほぼ 0 なら min と同じ
  float d = sdCircle(q - vec2(0.62, 0.13), 0.14);
  d = smin(d, sdBox(q - vec2(0.40, 0.03), vec2(0.30, 0.035)), k); // 中心へ伸びる腕
  d = smin(d, sdCircle(q - vec2(0.20, 0.02), 0.10), k); // 内側の玉
  d = smin(d, sdCircle(q - vec2(0.88, 0.06), 0.07), k); // 外側の玉
  d = max(d, -sdCircle(q - vec2(0.62, 0.13), 0.06)); // 差で穴を開ける

  // ③ 塗る。距離は形の外側でも値を持っているので、にじみにもそのまま使える(第8章)
  vec3 color = vec3(0.06, 0.07, 0.09);
  color += vec3(0.10, 0.18, 0.34) * exp(-5.0 * max(d, 0.0));
  vec3 body = mix(vec3(0.98, 0.74, 0.34), vec3(0.88, 0.28, 0.44), clamp(r, 0.0, 1.0));
  color = mix(color, body, fill(d));
  // 形の内側 RIM_OFFSET のところに走る等高線を 1 本だけ白く抜く
  color = mix(color, vec3(1.0), fill(abs(d + RIM_OFFSET) - RIM_WIDTH));
  color *= 1.0 - 0.35 * smoothstep(0.7, 1.5, r); // 周辺減光

  fragColor = vec4(color, 1.0);
}

// 第24章: 2D SDF — 距離場で形を合成する
//
// 第2部と同じ構成: 1 つの canvas に対して、切替ボタンでフラグメントシェーダーを
// 差し替える。CPU 側で増えたのは、4 本のシェーダーが共有する距離関数
// (sdf.glsl)を差し込む極小のインクルードだけ。仕組みは第23章と同じ。

import { startFullscreenShader } from '../../lib/fullscreen-shader';
import operatorsSource from './01-operators.frag?raw';
import trueDistanceSource from './02-true-distance.frag?raw';
import tilingSource from './03-tiling.frag?raw';
import sceneSource from './04-scene.frag?raw';
import sdfChunkSource from './sdf.glsl?raw';

// 置換文字列を関数で渡すのは、String.replace が `$&` などを特別扱いするため(第23章)
function resolveIncludes(source: string): string {
  return source.replace('#include "sdf.glsl"', () => sdfChunkSource.trim());
}

const demos = [
  { id: 'operators', label: '和・差・積・smooth min', source: resolveIncludes(operatorsSource) },
  { id: 'true', label: '本物の距離か', source: resolveIncludes(trueDistanceSource) },
  { id: 'tiling', label: 'タイリング', source: resolveIncludes(tilingSource) },
  { id: 'scene', label: '万華鏡 × SDF', source: resolveIncludes(sceneSource) },
] 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);
}