instantshader 0.2.0 → 0.4.0

package/dist/index.d.ts

@@ -123,6 +123,9 @@ declare const flow: ShaderDef;
 //#region src/shaders/beam.d.ts
 declare const beam: ShaderDef;
 //#endregion
+//#region src/shaders/bloom.d.ts
+declare const bloom: ShaderDef;
+//#endregion
 //#region src/registry.d.ts
 declare const shaders: readonly ShaderDef[];
 declare function getShader(id: string): ShaderDef | undefined;
@@ -188,4 +191,4 @@ declare function renderGradientFrame(opts: {
 */
 declare function buildPaletteRamp(colors: string[]): Uint8Array;
 //#endregion
-export { type MountHandle, type MountOptions, type ParamDef, type RenderFrameResult, type Renderer, type RendererOptions, type ShaderDef, beam, buildPaletteRamp, createRenderer, flow, getShader, mountGradient, renderGradientFrame, shaders };
+export { type MountHandle, type MountOptions, type ParamDef, type RenderFrameResult, type Renderer, type RendererOptions, type ShaderDef, beam, bloom, buildPaletteRamp, createRenderer, flow, getShader, mountGradient, renderGradientFrame, shaders };

package/dist/index.js

@@ -190,8 +190,9 @@ float grain(vec2 uv, float time) {
 
 //#endregion
 //#region src/shaders/flow.ts
-const FRAGMENT$1 = `
+const FRAGMENT$2 = `
 uniform float u_scale;
+uniform float u_curl;
 uniform float u_drift;
 uniform float u_openness;
 uniform float u_grain;
@@ -236,11 +237,22 @@ void main() {
   // composition reorganized every ~3 seconds, measured as more pixel change
   // over 3.5s than the beam prototype showed over 7.5s.
   //
-  // The curl field is sampled at 0.55x the fbm's frequency (see below), so
-  // the visible frame spans curlScale units of noise. The tile has to be at
-  // least twice that or the field repeats inside a single frame, which looks
-  // like wallpaper; ceil keeps it integral, which pnoise requires.
-  float curlScale = u_scale * 0.55;
+  // Curl field frequency, relative to the fbm's. Below 1.0 the currents are
+  // LARGER than the colour masses they carry, which is the look: sampled at
+  // the same frequency each mass sits inside its own little eddy, the
+  // advection only roughens mass edges, and the result is indistinguishable
+  // from a plain warped fbm.
+  //
+  // u_curl replaces what was a hardcoded 0.55, and its default is 1.05
+  // because the potential is pnoise now. Classic Perlin's lattice is a unit
+  // grid while simplex's skewed cells are roughly 0.7 units, so the same
+  // input scale yields visibly coarser features -- fewer closed eddies. 1.05
+  // was matched by eye against a reference render of the pre-pnoise look.
+  //
+  // The visible frame spans curlScale units of noise, so the tile has to be
+  // at least twice that or the field repeats inside a single frame, which
+  // looks like wallpaper; ceil keeps it integral, which pnoise requires.
+  float curlScale = u_scale * u_curl;
   float tile = max(2.0, ceil(curlScale * 2.0));
 
   // Straight-line travel through a tiling field: the direction never changes,
@@ -264,18 +276,18 @@ void main() {
   // the NUMBER of steps that turns advection into rotation: one step is a
   // plain directional shove, and at two the point still travels an almost
   // straight chord. The third is where it curves enough to close visible
-  // eddies, which is the whole point of the look. Step gain is dropped from
-  // 0.08 to 0.055 to keep the total travel about where it was.
+  // eddies, which is the whole point of the look.
   //
-  // The curl field is sampled at 0.55x the fbm's frequency, i.e. the
-  // currents are deliberately LARGER than the colour masses they carry.
-  // Sampled at the same frequency (as it was) each mass sat inside its own
-  // little eddy, so the advection only roughened mass edges and the result
-  // was indistinguishable from a plain warped fbm.
+  // Step gain 0.19, up from the 0.055 that was tuned against a simplex
+  // potential. pnoise carries shallower gradients, so the old gain advected
+  // the point far too little and the eddies stopped closing -- the frame went
+  // to soft diagonal bands. The gain absorbs that difference rather than the
+  // default of u_drift, which stays at 0.5 in its published 0-1 range so the
+  // knob means the same thing it always did.
   vec2 advected = uv;
-  advected += curl(advected * curlScale + u_seed + drift, tile) * u_drift * 0.055;
-  advected += curl(advected * curlScale + u_seed + drift, tile) * u_drift * 0.055;
-  advected += curl(advected * curlScale + u_seed + drift, tile) * u_drift * 0.055;
+  advected += curl(advected * curlScale + u_seed + drift, tile) * u_drift * 0.19;
+  advected += curl(advected * curlScale + u_seed + drift, tile) * u_drift * 0.19;
+  advected += curl(advected * curlScale + u_seed + drift, tile) * u_drift * 0.19;
 
   float t = fbm2(advected * u_scale + u_seed);
 
@@ -315,7 +327,7 @@ void main() {
 const flow = {
 	id: "flow",
 	label: "Flow",
-	fragment: FRAGMENT$1,
+	fragment: FRAGMENT$2,
 	params: [
 		{
 			key: "scale",
@@ -325,6 +337,14 @@ const flow = {
 			step: .05,
 			default: 1.7
 		},
+		{
+			key: "curl",
+			label: "Curl",
+			min: .3,
+			max: 1.6,
+			step: .05,
+			default: 1.05
+		},
 		{
 			key: "drift",
 			label: "Drift",
@@ -353,7 +373,8 @@ const flow = {
 	randomParams(rand) {
 		return {
 			scale: .6 + rand() * 2,
-			drift: rand() * 1,
+			curl: .6 + rand() * .7000000000000001,
+			drift: .25 + rand() * .75,
 			openness: rand() * 1,
 			grain: .08
 		};
@@ -362,7 +383,7 @@ const flow = {
 
 //#endregion
 //#region src/shaders/beam.ts
-const FRAGMENT = `
+const FRAGMENT$1 = `
 uniform float u_scale;
 uniform float u_width;
 uniform float u_glow;
@@ -616,7 +637,7 @@ void main() {
 const beam = {
 	id: "beam",
 	label: "Beam",
-	fragment: FRAGMENT,
+	fragment: FRAGMENT$1,
 	params: [
 		{
 			key: "scale",
@@ -670,9 +691,246 @@ const beam = {
 	}
 };
 
+//#endregion
+//#region src/shaders/bloom.ts
+const FRAGMENT = `
+uniform float u_scale;
+uniform float u_petals;
+uniform float u_pinch;
+uniform float u_bend;
+uniform float u_sway;
+uniform float u_colorflow;
+uniform float u_grain;
+
+${SIMPLEX_2D}
+${GRAIN}
+
+const float PI = 3.14159265;
+
+// Triangle-wave ping-pong: period 2, range [0,1], IDENTITY on [0,1] when the
+// phase is zero -- so colorflow=off renders the plain radial ramp, and any
+// moving phase slides color bands through the pattern with no fract() seam
+// anywhere (the wave reflects instead of jumping).
+float tri(float x) {
+  return 1.0 - abs(1.0 - 2.0 * fract(0.5 * x));
+}
+
+void main() {
+  vec2 uv = worldUv();
+
+  // Isotropic frame, same construction as beam: worldUv() is 0-1 on both
+  // axes of a 16:9 world, so raw uv would render every petal 1.78x wider
+  // than tall and the fan would smear sideways. Scaling x by the world
+  // aspect makes a unit circle a screen circle; halfIso is the frame's
+  // visible half-extents in that space (cover-fit aware), used to place the
+  // origin against the actual frame edges at any canvas aspect.
+  float worldAspect = 1000.0 / 562.5;
+  float canvasAspect = u_resolution.x / u_resolution.y;
+  vec2 iso = (uv - 0.5) * vec2(worldAspect, 1.0);
+  vec2 halfIso = vec2(0.5 * min(1.0, canvasAspect / worldAspect),
+                      0.5 * min(1.0, worldAspect / canvasAspect))
+               * vec2(worldAspect, 1.0);
+
+  // ---- per-instance composition, all derived from u_seed ----------------
+  float seedRow = u_seed * 0.61 + 7.0;
+
+  // Origin: anywhere along the bottom edge (references use bottom-left and
+  // bottom-center), from slightly inside the frame (the hot core peeks in,
+  // as in all three references) to a bit below it.
+  float ox = snoise(vec2(seedRow, 1.3)) * 0.8 * halfIso.x;
+  // At or just below the edge -- never inside: an origin inside the frame
+  // shows petals radiating in every direction (a starburst), while the
+  // references always crop the fan at its base.
+  float oy = -halfIso.y * (1.02 + 0.11 * (1.0 + snoise(vec2(seedRow, 9.1))));
+  vec2 origin = vec2(ox, oy);
+
+  // Fan rotation. The rose envelope has k lobes evenly spaced around the
+  // full circle, so any rotation leaves several pointing into the frame;
+  // this just varies WHICH part of the fan the frame crops.
+  float theta0 = snoise(vec2(seedRow, 5.2)) * PI;
+
+  vec2 rel = iso - origin;
+  float r = length(rel);
+  float theta = atan(rel.y, rel.x);
+
+  // ---- sway: the shapes move ---------------------------------------------
+  // Lean: the whole fan pivots a few degrees around the origin. Shear pulse:
+  // the bend term below oscillates, so petals flex along their length rather
+  // than rotating rigidly. Both sinusoidal through loopFreq, so they are
+  // exactly periodic when looping (and freeze, rather than speed up, when
+  // the loop is too short for their tuned rates -- see loopFreq).
+  // The sines alone are not enough: loopFreq freezes them at loops shorter
+  // than ~half their period (its documented anti-throb choice), which left
+  // sway with NO motion at all at 4-8s loops. wdrift is the non-freezing
+  // half -- a loopDrift walk through the per-petal noise (below) and the
+  // lean, exactly periodic at ANY loop length by construction, same as the
+  // siblings' primary motion.
+  vec2 wdrift = loopDrift(0.05 * u_sway, vec2(1.0, 0.0));
+  float lean = u_sway * (0.06 * sin(loopFreq(0.21) * u_time + u_seed)
+                       + 0.05 * snoise(vec2(seedRow * 0.47, 9.3) + wdrift));
+  float shearPulse = u_sway * 0.08 * sin(loopFreq(0.15) * u_time + 2.3 + u_seed);
+
+  // Bend: angular shear proportional to r curves each petal progressively
+  // toward its tip -- the gentle bow the reference petals have -- instead of
+  // rotating the fan rigidly.
+  float th = theta - theta0 - lean + (u_bend + shearPulse) * r;
+
+  // ---- rose-curve envelope ------------------------------------------------
+  // k is snapped to an integer: |cos| has period pi, so integer k makes the
+  // envelope exactly 2pi-periodic and the atan branch cut at theta = +-pi is
+  // invisible. A fractional k would draw a hard radial seam there.
+  float k = floor(u_petals + 0.5);
+  float a = 0.5 * k * th;
+  float e = pow(abs(cos(a)), u_pinch);
+
+  // Per-petal identity: which lobe this pixel belongs to, expressed as the
+  // lobe's center ANGLE and hashed through cos/sin so it is periodic around
+  // the circle -- a raw lobe index would jump by k across the branch cut and
+  // tear the per-petal variation along that ray. The discontinuity between
+  // ADJACENT lobes is harmless: it sits exactly in the crease, where e ~ 0
+  // pushes both sides to the background color anyway.
+  float lobe = floor(a / PI + 0.5);
+  float cAngle = theta0 + 2.0 * PI * lobe / k;
+  float perLobe = 0.28 * snoise(vec2(cos(cAngle), sin(cAngle)) * 1.9
+                              + vec2(seedRow * 0.13, seedRow * 0.29) + wdrift);
+
+  // Breathing: each petal's length swells ~10%, phase-offset around the fan
+  // by 2*cAngle (integer multiple of the angle, so it survives the branch
+  // cut) -- the petals ripple in sequence instead of pulsing in lockstep.
+  float breathe = u_sway * 0.10 * sin(loopFreq(0.32) * u_time + 2.0 * cAngle + u_seed * 0.7);
+  float len = 1.0 + perLobe + breathe;
+
+  // ---- the field ----------------------------------------------------------
+  // eps = 0.075 is the crease floor (see header). R = 1.4 at scale 1 puts
+  // the default tips just past the frame's top edge with the origin at the
+  // bottom, matching the references' crop.
+  float R = 1.4 * u_scale;
+  float t = r / (R * len * (e + 0.075));
+
+  // Radial shaping: pow < 1 compresses the ramp's early stops into a small
+  // hot core at the origin and hands most of each petal's length to the
+  // later stops -- in the references the petals are dominated by ONE body
+  // color (the second-to-last stop) for ~70% of their length, with the core
+  // colors confined to the base. Linear t spread the early stops across half
+  // the petal and the body color only appeared at the rim.
+  t = pow(t, 0.5);
+
+  // ---- colorflow: the colors move ----------------------------------------
+  // Phase in tri-units (period 2 = one full out-and-back palette cycle).
+  // Not looping: linear crawl; the +37 base offset means the knob has a
+  // visible effect even at t=0 (and 37 is deliberately not a multiple of the
+  // period). Looping: exactly n cycles per loop, floored at ONE -- unlike
+  // the sway sines, colorflow is a headline motion, and freezing it at
+  // common loop lengths (loopFreq's choice) would read as the feature being
+  // broken rather than as restraint. One cycle over a short loop is simply a
+  // faster flow, which is what a short loop asks for.
+  float pRate = 0.05 * u_colorflow;
+  float p;
+  if (u_loop <= 0.0) {
+    p = pRate * (u_time + 37.0);
+  } else {
+    p = 2.0 * max(1.0, floor(pRate * u_loop * 0.5 + 0.5)) * (u_time / u_loop);
+  }
+
+  // The flow lives INSIDE the silhouette: the mask fades it out across the
+  // tips so the background (t >= 1) stays pinned to the last stop and the
+  // negative space never pulses. Gated on u_colorflow so 0 is exactly the
+  // static field even while looping (where p above moves regardless).
+  float flowMix = (1.0 - smoothstep(0.82, 1.0, t)) * smoothstep(0.0, 0.08, u_colorflow);
+  float tc = mix(min(t, 1.0), tri(t - p), flowMix);
+
+  vec3 color = palette(tc);
+
+  // Grain: cheap per-pixel dither, centered at 0 so it can darken or
+  // lighten symmetrically instead of just brightening the whole frame.
+  float g = grain(uv, u_time) - 0.5;
+  color += g * u_grain;
+
+  gl_FragColor = vec4(clamp(color, 0.0, 1.0), 1.0);
+}
+`;
+const bloom = {
+	id: "bloom",
+	label: "Bloom",
+	fragment: FRAGMENT,
+	params: [
+		{
+			key: "scale",
+			label: "Scale",
+			min: .5,
+			max: 2,
+			step: .05,
+			default: .9
+		},
+		{
+			key: "petals",
+			label: "Petals",
+			min: 6,
+			max: 16,
+			step: 1,
+			default: 11
+		},
+		{
+			key: "pinch",
+			label: "Pinch",
+			min: .35,
+			max: 2.5,
+			step: .05,
+			default: .6
+		},
+		{
+			key: "bend",
+			label: "Bend",
+			min: -.9,
+			max: .9,
+			step: .05,
+			default: .25
+		},
+		{
+			key: "sway",
+			label: "Sway",
+			min: 0,
+			max: 1,
+			step: .01,
+			default: .5
+		},
+		{
+			key: "colorflow",
+			label: "Color flow",
+			min: 0,
+			max: 1,
+			step: .01,
+			default: 0
+		},
+		{
+			key: "grain",
+			label: "Grain",
+			min: 0,
+			max: .3,
+			step: .01,
+			default: .08
+		}
+	],
+	randomParams(rand) {
+		return {
+			scale: .7 + rand() * .9000000000000001,
+			petals: Math.floor(8 + rand() * 7),
+			pinch: .5 + rand() * 1.1,
+			bend: -.6 + rand() * 1.2,
+			sway: .2 + rand() * .7,
+			colorflow: rand() * .8,
+			grain: .08
+		};
+	}
+};
+
 //#endregion
 //#region src/registry.ts
-const shaders = [flow, beam];
+const shaders = [
+	flow,
+	beam,
+	bloom
+];
 function getShader(id) {
 	return shaders.find((s) => s.id === id);
 }
@@ -1322,4 +1580,4 @@ function renderGradientFrame(opts) {
 }
 
 //#endregion
-export { beam, buildPaletteRamp, createRenderer, flow, getShader, mountGradient, renderGradientFrame, shaders };
+export { beam, bloom, buildPaletteRamp, createRenderer, flow, getShader, mountGradient, renderGradientFrame, shaders };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "instantshader",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Animated WebGL gradient shaders. Zero dependencies.",
   "type": "module",
   "license": "MIT",