vireuikit 0.2.0 → 0.3.0

package/dist/web/index.cjs

@@ -3,125 +3,6 @@
 var vireglass = require('vireglass');
 var web = require('vireglass/web');
 
-// src/medium/oklab.ts
-var LINEAR_TO_LMS = [
-  [0.4122214708, 0.5363325363, 0.0514459929],
-  [0.2119034982, 0.6806995451, 0.1073969566],
-  [0.0883024619, 0.2817188376, 0.6299787005]
-];
-var LMS_TO_OKLAB = [
-  [0.2104542553, 0.793617785, -0.0040720468],
-  [1.9779984951, -2.428592205, 0.4505937099],
-  [0.0259040371, 0.7827717662, -0.808675766]
-];
-var OKLAB_TO_LMS = [
-  [1, 0.3963377774, 0.2158037573],
-  [1, -0.1055613458, -0.0638541728],
-  [1, -0.0894841775, -1.291485548]
-];
-var LMS_TO_LINEAR = [
-  [4.0767416621, -3.3077115913, 0.2309699292],
-  [-1.2684380046, 2.6097574011, -0.3413193965],
-  [-0.0041960863, -0.7034186147, 1.707614701]
-];
-var glsl = (v) => Number.isInteger(v) ? v.toFixed(1) : String(v);
-var row = (m, i, vars) => m[i].map((k, j) => `${glsl(k)} * ${vars[j]}`).join(" + ");
-var VG_OKLAB_TO_SRGB = `
-float3 vgLinearToSrgb(float3 c) {
-  float3 lo = c * 12.92;
-  float3 hi = 1.055 * pow(max(c, float3(0.0)), float3(1.0 / 2.4)) - 0.055;
-  return mix(lo, hi, step(float3(0.0031308), c));
-}
-
-float3 vgOklabToLinear(float3 lab) {
-  float l_ = ${row(OKLAB_TO_LMS, 0, ["lab.x", "lab.y", "lab.z"])};
-  float m_ = ${row(OKLAB_TO_LMS, 1, ["lab.x", "lab.y", "lab.z"])};
-  float s_ = ${row(OKLAB_TO_LMS, 2, ["lab.x", "lab.y", "lab.z"])};
-  float l = l_ * l_ * l_;
-  float m = m_ * m_ * m_;
-  float s = s_ * s_ * s_;
-  return float3(
-    ${row(LMS_TO_LINEAR, 0, ["l", "m", "s"])},
-    ${row(LMS_TO_LINEAR, 1, ["l", "m", "s"])},
-    ${row(LMS_TO_LINEAR, 2, ["l", "m", "s"])}
-  );
-}
-`;
-var apply = (m, v) => [
-  m[0][0] * v[0] + m[0][1] * v[1] + m[0][2] * v[2],
-  m[1][0] * v[0] + m[1][1] * v[1] + m[1][2] * v[2],
-  m[2][0] * v[0] + m[2][1] * v[1] + m[2][2] * v[2]
-];
-var srgbChannelToLinear = (c) => c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
-var linearChannelToSrgb = (c) => c <= 31308e-7 ? c * 12.92 : 1.055 * Math.pow(Math.max(c, 0), 1 / 2.4) - 0.055;
-function srgbToOklab(rgb) {
-  const linear = rgb.map(srgbChannelToLinear);
-  const lms = apply(LINEAR_TO_LMS, linear);
-  return apply(LMS_TO_OKLAB, lms.map((v) => Math.cbrt(Math.max(v, 0))));
-}
-function oklabToSrgb(lab) {
-  const lms = apply(OKLAB_TO_LMS, lab).map((v) => v * v * v);
-  return apply(LMS_TO_LINEAR, lms).map(linearChannelToSrgb);
-}
-
-// src/medium/species.ts
-var MEDIUM_SPECIES_LIGHTNESS = 0.44;
-var MEDIUM_SPECIES_HUE_SPREAD = 32;
-var clamp01 = (v) => Math.min(1, Math.max(0, v));
-function characterOf(color) {
-  const [lightness, a, b] = srgbToOklab(color);
-  return {
-    hue: Math.atan2(b, a) * 180 / Math.PI,
-    chroma: Math.hypot(a, b),
-    lightness
-  };
-}
-function speciesFamily(character, spreadDeg = MEDIUM_SPECIES_HUE_SPREAD) {
-  const { hue, chroma, lightness } = character;
-  const tone = (deg) => {
-    const rad = deg * Math.PI / 180;
-    return oklabToSrgb([lightness, chroma * Math.cos(rad), chroma * Math.sin(rad)]).map(
-      clamp01
-    );
-  };
-  return [tone(hue - spreadDeg), tone(hue), tone(hue + spreadDeg)];
-}
-function neutralSpecies(baseColor) {
-  const { hue, chroma } = characterOf(baseColor);
-  return speciesFamily({ hue, chroma, lightness: MEDIUM_SPECIES_LIGHTNESS });
-}
-
-// src/medium/params.ts
-var BASE_COLOR = [0.07, 0.08, 0.1];
-var MEDIUM_DEFAULTS = {
-  decay: 0.06,
-  curlFreq: 0.045,
-  curlSpeed: 0.12,
-  advectSpeed: 26,
-  turbulence: 1,
-  condensationRate: 0.18,
-  condensationFloor: 0.12,
-  evaporationRate: 0.2,
-  condensateSettleSpeed: 8,
-  condensateSpreadRate: 0.08,
-  condensateTint: 0.2,
-  condensateGain: 5,
-  condensateColor: [0.94, 0.95, 0.97],
-  channelColors: neutralSpecies(BASE_COLOR),
-  baseColor: BASE_COLOR,
-  baseWeight: 0.9,
-  depthFarScale: 1.6,
-  depthFarOffsetFrac: [0.47, 0.53],
-  depthFarBlurRadius: 5,
-  depthFarWeight: 0.5,
-  gravityVaporDrift: 0.6,
-  gravityBottomBoost: 2,
-  gravityBottomBoostStart: 0.75
-};
-function depthFarOffsetPx(offsetFrac, gridWidth, gridHeight) {
-  return [offsetFrac[0] * gridWidth, offsetFrac[1] * gridHeight];
-}
-
 // src/medium/noise.ts
 var VG_VALUE_NOISE = `
 float vgHash21(float2 p) {
@@ -252,7 +133,210 @@ float2 vgCurlVelocity(float2 p, float phase) {
   float py0 = vgPotential(p - float2(0.0, e), phase);
   return float2(py1 - py0, -(px1 - px0)) / (2.0 * e);
 }
+
+// vgPotential above is periodic in TIME only: the simulation domain is a torus (gl.REPEAT), but
+// the lattice itself never wraps in x/y, so velocity jumps at the domain seam and dye on either
+// side of it is transported differently \u2014 a straight seam, made worse wherever something re-reads
+// the field at a different scale (the far depth plane's tile boundary). vgValueNoise3Seamless
+// wraps ALL THREE lattice axes: xyPeriod/zPeriod fold BOTH neighbors of a cell into their own
+// period before hashing, so the field is EXACTLY the same one period over, in space exactly as it
+// already was in time.
+//
+// The period has to be an integer number of lattice cells, or the wrap would jump instead of
+// closing seamlessly (the same requirement MEDIUM_TIME_OCTAVES/mediumOctavePeriod enforces for
+// time) \u2014 but unlike time, the spatial period depends on the GRID SIZE, which this shader has no
+// notion of. So xyPeriod travels together with a per-octave spatial frequency the CPU computes to
+// make gridSize * frequency land on that exact integer (see computeMediumSpatialPeriods below);
+// both arrive together as one uniform per octave (u_spatialN.xy = frequency, .zw = period),
+// recomputed by web/medium.ts whenever the grid resizes.
+float vgValueNoise3Seamless(float3 p, float2 xyPeriod, float zPeriod) {
+  float3 i = floor(p);
+  float3 f = fract(p);
+  float3 u = f * f * (3.0 - 2.0 * f);
+  float x0 = mod(i.x, xyPeriod.x);
+  float x1 = mod(i.x + 1.0, xyPeriod.x);
+  float y0 = mod(i.y, xyPeriod.y);
+  float y1 = mod(i.y + 1.0, xyPeriod.y);
+  float z0 = mod(i.z, zPeriod);
+  float z1 = mod(i.z + 1.0, zPeriod);
+  float n000 = vgHash31(float3(x0, y0, z0));
+  float n100 = vgHash31(float3(x1, y0, z0));
+  float n010 = vgHash31(float3(x0, y1, z0));
+  float n110 = vgHash31(float3(x1, y1, z0));
+  float n001 = vgHash31(float3(x0, y0, z1));
+  float n101 = vgHash31(float3(x1, y0, z1));
+  float n011 = vgHash31(float3(x0, y1, z1));
+  float n111 = vgHash31(float3(x1, y1, z1));
+  float nx00 = mix(n000, n100, u.x);
+  float nx10 = mix(n010, n110, u.x);
+  float nx01 = mix(n001, n101, u.x);
+  float nx11 = mix(n011, n111, u.x);
+  float nxy0 = mix(nx00, nx10, u.y);
+  float nxy1 = mix(nx01, nx11, u.y);
+  return mix(nxy0, nxy1, u.z) * 2.0 - 1.0;
+}
+
+// Same four-octave fbm as vgPotential, but every octave reads the seamless lattice above at its
+// OWN (frequency, period) pair \u2014 sN.xy replaces that octave's compile-time \`scale\` constant (it
+// has to be a uniform now: the adjustment depends on the live grid size), sN.zw is the matching
+// integer period. \`p\` is still curlFreq-scaled exactly as vgPotential's caller scales it \u2014 only
+// the per-octave multiplier changed from a constant to a grid-dependent uniform, so the finite
+// difference in vgCurlVelocitySeamless below needs no epsilon change of its own.
+float vgPotentialSeamless(float2 p, float phase, float4 s0, float4 s1, float4 s2, float4 s3) {
+  float v = vgValueNoise3Seamless(float3(p * s0.xy, phase * ${VG_OCT0.rate} + ${VG_OCT0.offset}), s0.zw, ${VG_OCT0.period}) * 0.5;
+  v += vgValueNoise3Seamless(float3(p * s1.xy, phase * ${VG_OCT1.rate} + ${VG_OCT1.offset}), s1.zw, ${VG_OCT1.period}) * 0.25;
+  v += vgValueNoise3Seamless(float3(p * s2.xy, phase * ${VG_OCT2.rate} + ${VG_OCT2.offset}), s2.zw, ${VG_OCT2.period}) * 0.125;
+  float macro = vgValueNoise3Seamless(float3(p * s3.xy, phase * ${VG_OCT3.rate} + ${VG_OCT3.offset}), s3.zw, ${VG_OCT3.period});
+  return v * (0.7 + 0.3 * macro);
+}
+
+float2 vgCurlVelocitySeamless(float2 p, float phase, float4 s0, float4 s1, float4 s2, float4 s3) {
+  float e = 0.6;
+  float px1 = vgPotentialSeamless(p + float2(e, 0.0), phase, s0, s1, s2, s3);
+  float px0 = vgPotentialSeamless(p - float2(e, 0.0), phase, s0, s1, s2, s3);
+  float py1 = vgPotentialSeamless(p + float2(0.0, e), phase, s0, s1, s2, s3);
+  float py0 = vgPotentialSeamless(p - float2(0.0, e), phase, s0, s1, s2, s3);
+  return float2(py1 - py0, -(px1 - px0)) / (2.0 * e);
+}
+`;
+var MIN_SPATIAL_PERIOD = 2;
+function computeMediumSpatialPeriods(gridWidth, gridHeight, curlFreq) {
+  const freq = Math.max(curlFreq, 1e-6);
+  return MEDIUM_TIME_OCTAVES.map((o) => {
+    const rawX = gridWidth * freq * o.scale;
+    const rawY = gridHeight * freq * o.scale;
+    const minRaw = Math.min(rawX, rawY);
+    const scaleUp = minRaw > 0 && minRaw < MIN_SPATIAL_PERIOD ? MIN_SPATIAL_PERIOD / minRaw : 1;
+    const periodX = Math.max(MIN_SPATIAL_PERIOD, Math.round(rawX * scaleUp));
+    const periodY = Math.max(MIN_SPATIAL_PERIOD, Math.round(rawY * scaleUp));
+    return {
+      freqX: periodX / (gridWidth * freq),
+      freqY: periodY / (gridHeight * freq),
+      periodX,
+      periodY
+    };
+  });
+}
+
+// src/medium/oklab.ts
+var LINEAR_TO_LMS = [
+  [0.4122214708, 0.5363325363, 0.0514459929],
+  [0.2119034982, 0.6806995451, 0.1073969566],
+  [0.0883024619, 0.2817188376, 0.6299787005]
+];
+var LMS_TO_OKLAB = [
+  [0.2104542553, 0.793617785, -0.0040720468],
+  [1.9779984951, -2.428592205, 0.4505937099],
+  [0.0259040371, 0.7827717662, -0.808675766]
+];
+var OKLAB_TO_LMS = [
+  [1, 0.3963377774, 0.2158037573],
+  [1, -0.1055613458, -0.0638541728],
+  [1, -0.0894841775, -1.291485548]
+];
+var LMS_TO_LINEAR = [
+  [4.0767416621, -3.3077115913, 0.2309699292],
+  [-1.2684380046, 2.6097574011, -0.3413193965],
+  [-0.0041960863, -0.7034186147, 1.707614701]
+];
+var glsl = (v) => Number.isInteger(v) ? v.toFixed(1) : String(v);
+var row = (m, i, vars) => m[i].map((k, j) => `${glsl(k)} * ${vars[j]}`).join(" + ");
+var VG_OKLAB_TO_SRGB = `
+float3 vgLinearToSrgb(float3 c) {
+  float3 lo = c * 12.92;
+  float3 hi = 1.055 * pow(max(c, float3(0.0)), float3(1.0 / 2.4)) - 0.055;
+  return mix(lo, hi, step(float3(0.0031308), c));
+}
+
+float3 vgOklabToLinear(float3 lab) {
+  float l_ = ${row(OKLAB_TO_LMS, 0, ["lab.x", "lab.y", "lab.z"])};
+  float m_ = ${row(OKLAB_TO_LMS, 1, ["lab.x", "lab.y", "lab.z"])};
+  float s_ = ${row(OKLAB_TO_LMS, 2, ["lab.x", "lab.y", "lab.z"])};
+  float l = l_ * l_ * l_;
+  float m = m_ * m_ * m_;
+  float s = s_ * s_ * s_;
+  return float3(
+    ${row(LMS_TO_LINEAR, 0, ["l", "m", "s"])},
+    ${row(LMS_TO_LINEAR, 1, ["l", "m", "s"])},
+    ${row(LMS_TO_LINEAR, 2, ["l", "m", "s"])}
+  );
+}
 `;
+var apply = (m, v) => [
+  m[0][0] * v[0] + m[0][1] * v[1] + m[0][2] * v[2],
+  m[1][0] * v[0] + m[1][1] * v[1] + m[1][2] * v[2],
+  m[2][0] * v[0] + m[2][1] * v[1] + m[2][2] * v[2]
+];
+var srgbChannelToLinear = (c) => c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+var linearChannelToSrgb = (c) => c <= 31308e-7 ? c * 12.92 : 1.055 * Math.pow(Math.max(c, 0), 1 / 2.4) - 0.055;
+function srgbToOklab(rgb) {
+  const linear = rgb.map(srgbChannelToLinear);
+  const lms = apply(LINEAR_TO_LMS, linear);
+  return apply(LMS_TO_OKLAB, lms.map((v) => Math.cbrt(Math.max(v, 0))));
+}
+function oklabToSrgb(lab) {
+  const lms = apply(OKLAB_TO_LMS, lab).map((v) => v * v * v);
+  return apply(LMS_TO_LINEAR, lms).map(linearChannelToSrgb);
+}
+
+// src/medium/species.ts
+var MEDIUM_SPECIES_LIGHTNESS = 0.44;
+var MEDIUM_SPECIES_HUE_SPREAD = 32;
+var clamp01 = (v) => Math.min(1, Math.max(0, v));
+function characterOf(color) {
+  const [lightness, a, b] = srgbToOklab(color);
+  return {
+    hue: Math.atan2(b, a) * 180 / Math.PI,
+    chroma: Math.hypot(a, b),
+    lightness
+  };
+}
+function speciesFamily(character, spreadDeg = MEDIUM_SPECIES_HUE_SPREAD) {
+  const { hue, chroma, lightness } = character;
+  const tone = (deg) => {
+    const rad = deg * Math.PI / 180;
+    return oklabToSrgb([lightness, chroma * Math.cos(rad), chroma * Math.sin(rad)]).map(
+      clamp01
+    );
+  };
+  return [tone(hue - spreadDeg), tone(hue), tone(hue + spreadDeg)];
+}
+function neutralSpecies(baseColor) {
+  const { hue, chroma } = characterOf(baseColor);
+  return speciesFamily({ hue, chroma, lightness: MEDIUM_SPECIES_LIGHTNESS });
+}
+
+// src/medium/params.ts
+var BASE_COLOR = [0.07, 0.08, 0.1];
+var MEDIUM_DEFAULTS = {
+  decay: 0.06,
+  curlFreq: 0.045,
+  curlSpeed: 0.12,
+  advectSpeed: 26,
+  turbulence: 1,
+  condensationRate: 0.18,
+  condensationFloor: 0.12,
+  evaporationRate: 0.2,
+  condensateSettleSpeed: 8,
+  condensateSettleWiggle: 0.4,
+  condensateSpreadRate: 0.08,
+  condensateTint: 0.2,
+  condensateGain: 5,
+  condensateColor: [0.94, 0.95, 0.97],
+  channelColors: neutralSpecies(BASE_COLOR),
+  baseColor: BASE_COLOR,
+  baseWeight: 0.9,
+  depthFarScale: 1.6,
+  depthFarOffsetFrac: [0.47, 0.53],
+  depthFarBlurRadius: 5,
+  depthFarWeight: 0.5,
+  gravityVaporDrift: 0.6,
+  gravityBottomBoost: 2,
+  gravityBottomBoostStart: 0.75
+};
+function depthFarOffsetPx(offsetFrac, gridWidth, gridHeight) {
+  return [offsetFrac[0] * gridWidth, offsetFrac[1] * gridHeight];
+}
 
 // src/medium/seed-shader.ts
 var MEDIUM_SEED_SHADER = `
@@ -295,15 +379,25 @@ uniform float  u_phase;
 uniform float  u_curlFreq;
 uniform float  u_advectSpeed;
 uniform float  u_turbulence;
+// One float4 per MEDIUM_TIME_OCTAVES entry: xy is that octave's seamless spatial frequency, zw its
+// matching integer lattice period \u2014 both grid-size-dependent, so they can't be compile-time
+// constants (see vgPotentialSeamless/computeMediumSpatialPeriods in noise.ts). Recomputed by
+// web/medium.ts's bindVelocityUniforms every frame from the live grid dimensions.
+uniform float4 u_spatial0;
+uniform float4 u_spatial1;
+uniform float4 u_spatial2;
+uniform float4 u_spatial3;
 
 ${VG_CURL_NOISE}
 `;
 var MEDIUM_ADVECT_VELOCITY = `
-  float2 vel = vgCurlVelocity(xy * u_curlFreq, u_phase) * u_advectSpeed * u_turbulence;
+  float2 curl = vgCurlVelocitySeamless(xy * u_curlFreq, u_phase, u_spatial0, u_spatial1, u_spatial2, u_spatial3);
+  float2 vel = curl * u_advectSpeed * u_turbulence;
 `;
 var MEDIUM_ADVECT_VELOCITY_SETTLE = `
 ${MEDIUM_ADVECT_VELOCITY}
   vel.y += u_settleSpeed;
+  vel.x += curl.x * u_advectSpeed * u_settleWiggle;
 `;
 var MEDIUM_ADVECT_VELOCITY_VAPOR = `
 ${MEDIUM_ADVECT_VELOCITY}
@@ -322,6 +416,7 @@ ${MEDIUM_ADVECT_VELOCITY_VAPOR}
 var MEDIUM_CONDENSATE_FORWARD_SHADER = `
 ${MEDIUM_ADVECT_UNIFORMS}
 uniform float u_settleSpeed;
+uniform float u_settleWiggle;
 
 half4 main(float2 xy) {
 ${MEDIUM_ADVECT_VELOCITY_SETTLE}
@@ -361,6 +456,7 @@ ${MEDIUM_MACCORMACK_CORRECT}
 var MEDIUM_CONDENSATE_CORRECT_SHADER = `
 ${MEDIUM_ADVECT_UNIFORMS}
 uniform float u_settleSpeed;
+uniform float u_settleWiggle;
 uniform shader u_forward;
 
 half4 main(float2 xy) {
@@ -460,6 +556,39 @@ ${MEDIUM_ADVECT_VELOCITY}
 `;
 
 // src/medium/composite-shader.ts
+var VG_CUBIC_WEIGHTS = `
+float4 vgCubicWeights(float v) {
+  float4 n = float4(1.0, 2.0, 3.0, 4.0) - v;
+  float4 s = n * n * n;
+  float x = s.x;
+  float y = s.y - 4.0 * s.x;
+  float z = s.z - 4.0 * s.y + 6.0 * s.x;
+  float w = 6.0 - x - y - z;
+  return float4(x, y, z, w) * (1.0 / 6.0);
+}
+`;
+function vgBicubicSampler(fnName, textureName) {
+  return `
+half4 ${fnName}(float2 px) {
+  float2 shifted = px - 0.5;
+  float2 fxy = fract(shifted);
+  float2 base = shifted - fxy;
+  float4 xw = vgCubicWeights(fxy.x);
+  float4 yw = vgCubicWeights(fxy.y);
+  float2 sx = float2(xw.x + xw.y, xw.z + xw.w);
+  float2 sy = float2(yw.x + yw.y, yw.z + yw.w);
+  float2 offsetX = float2(base.x - 0.5 + xw.y / sx.x, base.x + 1.5 + xw.w / sx.y);
+  float2 offsetY = float2(base.y - 0.5 + yw.y / sy.x, base.y + 1.5 + yw.w / sy.y);
+  half4 s00 = ${textureName}.eval(float2(offsetX.x, offsetY.x));
+  half4 s10 = ${textureName}.eval(float2(offsetX.y, offsetY.x));
+  half4 s01 = ${textureName}.eval(float2(offsetX.x, offsetY.y));
+  half4 s11 = ${textureName}.eval(float2(offsetX.y, offsetY.y));
+  float wx = sx.x / (sx.x + sx.y);
+  float wy = sy.x / (sy.x + sy.y);
+  return mix(mix(s11, s01, wx), mix(s10, s00, wx), wy);
+}
+`;
+}
 var MEDIUM_COMPOSITE_SHADER = `
 uniform shader u_vapor;
 uniform shader u_condensate;
@@ -481,25 +610,44 @@ uniform float  u_gravityBoost;
 uniform float  u_gravityBoostStart;
 
 ${VG_OKLAB_TO_SRGB}
+${VG_CUBIC_WEIGHTS}
+${vgBicubicSampler("vgBicubicVapor", "u_vapor")}
+${vgBicubicSampler("vgBicubicCondensate", "u_condensate")}
 
 half4 main(float2 xy) {
   float2 baseSrc = xy * u_dyeScale;
 
-  // Near plane \u2014 sampled exactly as before the depth work; the calibrated look lives here.
-  half4 vapor = u_vapor.eval(baseSrc);
-  half4 condensate = u_condensate.eval(baseSrc);
+  // Near plane \u2014 the calibrated look lives here. Bicubic (see the file header) on vapor and
+  // condensate; track stays a plain bilinear read.
+  half4 vapor = vgBicubicVapor(baseSrc);
+  half4 condensate = vgBicubicCondensate(baseSrc);
   half4 track = u_track.eval(baseSrc);
 
-  // Far plane \u2014 the identical field, scaled and offset (see the file header). A 4-tap box blur
-  // (no separate center sample, the cheapest isotropic blur available) supplies aerial perspective's
-  // blur and, as a side effect of averaging, its lower contrast too.
+  // Far plane \u2014 the identical field, scaled and offset (see the file header). An 8-tap ring, not
+  // the near plane's \xB1x/\xB1y box: axis-aligned taps read the SAME column/row on both sides of any
+  // residual axis-aligned structure (a seam, a resize artifact), which is exactly how a straight
+  // line gets doubled into four parallel copies instead of softened away \u2014 measured directly via
+  // check-medium.mjs's isotropy gate (see its report). The ring is rotated a half-step (22.5\xB0) off
+  // the axes so no tap direction ever coincides with a grid row or column. Radius stays in the same
+  // far-plane texture-space unit as before (u_farBlurRadius, grid-px) \u2014 only the tap PATTERN
+  // changed, not what it measures in.
   float2 farSrc = baseSrc * u_farScale + u_farOffset;
-  float2 blurX = float2(u_farBlurRadius, 0.0);
-  float2 blurY = float2(0.0, u_farBlurRadius);
-  half4 vaporFar = (u_vapor.eval(farSrc + blurX) + u_vapor.eval(farSrc - blurX) +
-                     u_vapor.eval(farSrc + blurY) + u_vapor.eval(farSrc - blurY)) * half4(0.25);
-  half4 condensateFar = (u_condensate.eval(farSrc + blurX) + u_condensate.eval(farSrc - blurX) +
-                          u_condensate.eval(farSrc + blurY) + u_condensate.eval(farSrc - blurY)) * half4(0.25);
+  float2 ring0 = float2( 0.9238795,  0.3826834) * u_farBlurRadius;
+  float2 ring1 = float2( 0.3826834,  0.9238795) * u_farBlurRadius;
+  float2 ring2 = float2(-0.3826834,  0.9238795) * u_farBlurRadius;
+  float2 ring3 = float2(-0.9238795,  0.3826834) * u_farBlurRadius;
+  float2 ring4 = float2(-0.9238795, -0.3826834) * u_farBlurRadius;
+  float2 ring5 = float2(-0.3826834, -0.9238795) * u_farBlurRadius;
+  float2 ring6 = float2( 0.3826834, -0.9238795) * u_farBlurRadius;
+  float2 ring7 = float2( 0.9238795, -0.3826834) * u_farBlurRadius;
+  half4 vaporFar = (u_vapor.eval(farSrc + ring0) + u_vapor.eval(farSrc + ring1) +
+                     u_vapor.eval(farSrc + ring2) + u_vapor.eval(farSrc + ring3) +
+                     u_vapor.eval(farSrc + ring4) + u_vapor.eval(farSrc + ring5) +
+                     u_vapor.eval(farSrc + ring6) + u_vapor.eval(farSrc + ring7)) * half4(0.125);
+  half4 condensateFar = (u_condensate.eval(farSrc + ring0) + u_condensate.eval(farSrc + ring1) +
+                          u_condensate.eval(farSrc + ring2) + u_condensate.eval(farSrc + ring3) +
+                          u_condensate.eval(farSrc + ring4) + u_condensate.eval(farSrc + ring5) +
+                          u_condensate.eval(farSrc + ring6) + u_condensate.eval(farSrc + ring7)) * half4(0.125);
 
   // Gravity's "denser layer at the bottom of the chamber" \u2014 a compositing-only boost (see
   // MEDIUM_DEFAULTS.gravityBottomBoost): it scales how density already in the conserved buffers is
@@ -745,7 +893,7 @@ function createMediumRuntime(gl, vertexSource) {
     }
     resizeGrid(w, h);
   }
-  function bindVelocityUniforms(loc, dt, phase2, p) {
+  function bindVelocityUniforms(loc, dt, phase2, p, spatial) {
     web.setUniform(gl, loc("u_dyeSize"), [gridW, gridH]);
     web.setUniform(gl, loc("u_resolution"), [gridW, gridH]);
     web.setUniform(gl, loc("u_dt"), dt);
@@ -754,6 +902,10 @@ function createMediumRuntime(gl, vertexSource) {
     web.setUniform(gl, loc("u_advectSpeed"), p.advectSpeed);
     web.setUniform(gl, loc("u_turbulence"), p.turbulence);
     web.setUniform(gl, loc("u_vaporDrift"), p.gravityVaporDrift);
+    web.setUniform(gl, loc("u_spatial0"), [spatial[0].freqX, spatial[0].freqY, spatial[0].periodX, spatial[0].periodY]);
+    web.setUniform(gl, loc("u_spatial1"), [spatial[1].freqX, spatial[1].freqY, spatial[1].periodX, spatial[1].periodY]);
+    web.setUniform(gl, loc("u_spatial2"), [spatial[2].freqX, spatial[2].freqY, spatial[2].periodX, spatial[2].periodY]);
+    web.setUniform(gl, loc("u_spatial3"), [spatial[3].freqX, spatial[3].freqY, spatial[3].periodX, spatial[3].periodY]);
   }
   let phase = 0;
   function wrapPhase(value) {
@@ -770,6 +922,7 @@ function createMediumRuntime(gl, vertexSource) {
       return;
     }
     const p = { ...MEDIUM_DEFAULTS, ...params };
+    const spatial = computeMediumSpatialPeriods(gridW, gridH, p.curlFreq);
     const clampedDt = Math.min(Math.max(dt, 0), 1 / 15);
     phase = wrapPhase(phase + clampedDt * p.curlSpeed);
     const back = front === 0 ? 1 : 0;
@@ -779,28 +932,30 @@ function createMediumRuntime(gl, vertexSource) {
     gl.bindFramebuffer(gl.FRAMEBUFFER, vaporForward.fbo);
     gl.useProgram(vaporForwardProgram);
     web.bindTextureAt(gl, 0, vapor[front].texture, vaporForwardProgram, "u_dye");
-    bindVelocityUniforms(vaporForwardLoc, clampedDt, phase, p);
+    bindVelocityUniforms(vaporForwardLoc, clampedDt, phase, p, spatial);
     web.drawFullscreenTriangle(gl);
     gl.bindFramebuffer(gl.FRAMEBUFFER, condensateForward.fbo);
     gl.useProgram(condensateForwardProgram);
     web.bindTextureAt(gl, 0, condensate[front].texture, condensateForwardProgram, "u_dye");
-    bindVelocityUniforms(condensateForwardLoc, clampedDt, phase, p);
+    bindVelocityUniforms(condensateForwardLoc, clampedDt, phase, p, spatial);
     web.setUniform(gl, condensateForwardLoc("u_settleSpeed"), p.condensateSettleSpeed);
+    web.setUniform(gl, condensateForwardLoc("u_settleWiggle"), p.condensateSettleWiggle);
     web.drawFullscreenTriangle(gl);
     gl.bindFramebuffer(gl.FRAMEBUFFER, vaporCorrected.fbo);
     gl.useProgram(vaporCorrectProgram);
     web.bindTextureAt(gl, 0, vapor[front].texture, vaporCorrectProgram, "u_dye");
     web.bindTextureAt(gl, 1, vaporForward.texture, vaporCorrectProgram, "u_forward");
     web.setUniform(gl, vaporCorrectLoc("u_forwardSize"), gridSize);
-    bindVelocityUniforms(vaporCorrectLoc, clampedDt, phase, p);
+    bindVelocityUniforms(vaporCorrectLoc, clampedDt, phase, p, spatial);
     web.drawFullscreenTriangle(gl);
     gl.bindFramebuffer(gl.FRAMEBUFFER, condensateCorrected.fbo);
     gl.useProgram(condensateCorrectProgram);
     web.bindTextureAt(gl, 0, condensate[front].texture, condensateCorrectProgram, "u_dye");
     web.bindTextureAt(gl, 1, condensateForward.texture, condensateCorrectProgram, "u_forward");
     web.setUniform(gl, condensateCorrectLoc("u_forwardSize"), gridSize);
-    bindVelocityUniforms(condensateCorrectLoc, clampedDt, phase, p);
+    bindVelocityUniforms(condensateCorrectLoc, clampedDt, phase, p, spatial);
     web.setUniform(gl, condensateCorrectLoc("u_settleSpeed"), p.condensateSettleSpeed);
+    web.setUniform(gl, condensateCorrectLoc("u_settleWiggle"), p.condensateSettleWiggle);
     web.drawFullscreenTriangle(gl);
     gl.bindFramebuffer(gl.FRAMEBUFFER, vapor[back].fbo);
     gl.useProgram(vaporReactProgram);
@@ -834,7 +989,7 @@ function createMediumRuntime(gl, vertexSource) {
     gl.bindFramebuffer(gl.FRAMEBUFFER, track[back].fbo);
     gl.useProgram(trackAdvectProgram);
     web.bindTextureAt(gl, 0, track[front].texture, trackAdvectProgram, "u_dye");
-    bindVelocityUniforms(trackAdvectLoc, clampedDt, phase, p);
+    bindVelocityUniforms(trackAdvectLoc, clampedDt, phase, p, spatial);
     web.setUniform(gl, trackAdvectLoc("u_decay"), p.decay);
     web.drawFullscreenTriangle(gl);
     gl.bindFramebuffer(gl.FRAMEBUFFER, null);