shaders-oneshot 0.0.81-shared.1

package/dist/shaders/halftone-dots.js

@@ -0,0 +1,321 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import {} from "../shader-sizing.js";
+import { declarePI, rotation2, proceduralHash21 } from "../shader-utils.js";
+const halftoneDotsFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform vec4 u_colorFront;
+uniform vec4 u_colorBack;
+uniform float u_radius;
+uniform float u_contrast;
+
+uniform sampler2D u_image;
+uniform float u_imageAspectRatio;
+
+uniform float u_size;
+uniform float u_grainMixer;
+uniform float u_grainOverlay;
+uniform float u_grainSize;
+uniform float u_grid;
+uniform bool u_originalColors;
+uniform bool u_inverted;
+uniform float u_type;
+
+in vec2 v_imageUV;
+
+out vec4 fragColor;
+
+${declarePI}
+${rotation2}
+${proceduralHash21}
+
+float valueNoise(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  float a = hash21(i);
+  float b = hash21(i + vec2(1.0, 0.0));
+  float c = hash21(i + vec2(0.0, 1.0));
+  float d = hash21(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  float x1 = mix(a, b, u.x);
+  float x2 = mix(c, d, u.x);
+  return mix(x1, x2, u.y);
+}
+
+float lst(float edge0, float edge1, float x) {
+  return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
+}
+
+float sst(float edge0, float edge1, float x) {
+  return smoothstep(edge0, edge1, x);
+}
+
+float getCircle(vec2 uv, float r, float baseR) {
+  r = mix(.25 * baseR, 0., r);
+  float d = length(uv - .5);
+  float aa = fwidth(d);
+  return 1. - smoothstep(r - aa, r + aa, d);
+}
+
+float getCell(vec2 uv) {
+  float insideX = step(0.0, uv.x) * (1.0 - step(1.0, uv.x));
+  float insideY = step(0.0, uv.y) * (1.0 - step(1.0, uv.y));
+  return insideX * insideY;
+}
+
+float getCircleWithHole(vec2 uv, float r, float baseR) {
+  float cell = getCell(uv);
+
+  r = mix(.75 * baseR, 0., r);
+  float rMod = mod(r, .5);
+
+  float d = length(uv - .5);
+  float aa = fwidth(d);
+  float circle = 1. - smoothstep(rMod - aa, rMod + aa, d);
+  if (r < .5) {
+    return circle;
+  } else {
+    return cell - circle;
+  }
+}
+
+float getGooeyBall(vec2 uv, float r, float baseR) {
+  float d = length(uv - .5);
+  float sizeRadius = .3;
+  if (u_grid == 1.) {
+    sizeRadius = .42;
+  }
+  sizeRadius = mix(sizeRadius * baseR, 0., r);
+  d = 1. - sst(0., sizeRadius, d);
+
+  d = pow(d, 2. + baseR);
+  return d;
+}
+
+float getSoftBall(vec2 uv, float r, float baseR) {
+  float d = length(uv - .5);
+  float sizeRadius = clamp(baseR, 0., 1.);
+  sizeRadius = mix(.5 * sizeRadius, 0., r);
+  d = 1. - lst(0., sizeRadius, d);
+  float powRadius = 1. - lst(0., 2., baseR);
+  d = pow(d, 4. + 3. * powRadius);
+  return d;
+}
+
+float getUvFrame(vec2 uv, vec2 pad) {
+  float aa = 0.0001;
+
+  float left   = smoothstep(-pad.x, -pad.x + aa, uv.x);
+  float right  = smoothstep(1.0 + pad.x, 1.0 + pad.x - aa, uv.x);
+  float bottom = smoothstep(-pad.y, -pad.y + aa, uv.y);
+  float top    = smoothstep(1.0 + pad.y, 1.0 + pad.y - aa, uv.y);
+
+  return left * right * bottom * top;
+}
+
+float sigmoid(float x, float k) {
+  return 1.0 / (1.0 + exp(-k * (x - 0.5)));
+}
+
+float getLumAtPx(vec2 uv, float contrast) {
+  vec4 tex = texture(u_image, uv);
+  vec3 color = vec3(
+  sigmoid(tex.r, contrast),
+  sigmoid(tex.g, contrast),
+  sigmoid(tex.b, contrast)
+  );
+  float lum = dot(vec3(0.2126, 0.7152, 0.0722), color);
+  lum = mix(1., lum, tex.a);
+  lum = u_inverted ? (1. - lum) : lum;
+  return lum;
+}
+
+float getLumBall(vec2 p, vec2 pad, vec2 inCellOffset, float contrast, float baseR, float stepSize, out vec4 ballColor) {
+  p += inCellOffset;
+  vec2 uv_i = floor(p);
+  vec2 uv_f = fract(p);
+  vec2 samplingUV = (uv_i + .5 - inCellOffset) * pad + vec2(.5);
+  float outOfFrame = getUvFrame(samplingUV, pad * stepSize);
+
+  float lum = getLumAtPx(samplingUV, contrast);
+  ballColor = texture(u_image, samplingUV);
+  ballColor.rgb *= ballColor.a;
+  ballColor *= outOfFrame;
+
+  float ball = 0.;
+  if (u_type == 0.) {
+    // classic
+    ball = getCircle(uv_f, lum, baseR);
+  } else if (u_type == 1.) {
+    // gooey
+    ball = getGooeyBall(uv_f, lum, baseR);
+  } else if (u_type == 2.) {
+    // holes
+    ball = getCircleWithHole(uv_f, lum, baseR);
+  } else if (u_type == 3.) {
+    // soft
+    ball = getSoftBall(uv_f, lum, baseR);
+  }
+
+  return ball * outOfFrame;
+}
+
+
+void main() {
+
+  float stepMultiplier = 1.;
+  if (u_type == 0.) {
+    // classic
+    stepMultiplier = 2.;
+  } else if (u_type == 1. || u_type == 3.) {
+    // gooey & soft
+    stepMultiplier = 6.;
+  }
+
+  float cellsPerSide = mix(300., 7., pow(u_size, .7));
+  cellsPerSide /= stepMultiplier;
+  float cellSizeY = 1. / cellsPerSide;
+  vec2 pad = cellSizeY * vec2(1. / u_imageAspectRatio, 1.);
+  if (u_type == 1. && u_grid == 1.) {
+    // gooey diagonal grid works differently
+    pad *= .7;
+  }
+
+  vec2 uv = v_imageUV;
+  uv -= vec2(.5);
+  uv /= pad;
+
+  float contrast = mix(0., 15., pow(u_contrast, 1.5));
+  float baseRadius = u_radius;
+  if (u_originalColors == true) {
+    contrast = mix(.1, 4., pow(u_contrast, 2.));
+    baseRadius = 2. * pow(.5 * u_radius, .3);
+  }
+
+  float totalShape = 0.;
+  vec3 totalColor = vec3(0.);
+  float totalOpacity = 0.;
+
+  vec4 ballColor;
+  float shape;
+  float stepSize = 1. / stepMultiplier;
+  for (float x = -0.5; x < 0.5; x += stepSize) {
+    for (float y = -0.5; y < 0.5; y += stepSize) {
+      vec2 offset = vec2(x, y);
+
+      if (u_grid == 1.) {
+        float rowIndex = floor((y + .5) / stepSize);
+        float colIndex = floor((x + .5) / stepSize);
+        if (stepSize == 1.) {
+          rowIndex = floor(uv.y + y + 1.);
+          if (u_type == 1.) {
+            colIndex = floor(uv.x + x + 1.);
+          }
+        }
+        if (u_type == 1.) {
+          if (mod(rowIndex + colIndex, 2.) == 1.) {
+            continue;
+          }
+        } else {
+          if (mod(rowIndex, 2.) == 1.) {
+            offset.x += .5 * stepSize;
+          }
+        }
+      }
+
+      shape = getLumBall(uv, pad, offset, contrast, baseRadius, stepSize, ballColor);
+      totalColor   += ballColor.rgb * shape;
+      totalShape   += shape;
+      totalOpacity += shape;
+    }
+  }
+
+  const float eps = 1e-4;
+
+  totalColor /= max(totalShape, eps);
+  totalOpacity /= max(totalShape, eps);
+
+  float finalShape = 0.;
+  if (u_type == 0.) {
+    finalShape = min(1., totalShape);
+  } else if (u_type == 1.) {
+    float aa = fwidth(totalShape);
+    float th = .5;
+    finalShape = smoothstep(th - aa, th + aa, totalShape);
+  } else if (u_type == 2.) {
+    finalShape = min(1., totalShape);
+  } else if (u_type == 3.) {
+    finalShape = totalShape;
+  }
+
+  vec2 grainSize = mix(2000., 200., u_grainSize) * vec2(1., 1. / u_imageAspectRatio);
+  vec2 grainUV = v_imageUV - .5;
+  grainUV *= grainSize;
+  grainUV += .5;
+  if (u_grainMixer > 0.) {
+    float grain = valueNoise(grainUV);
+    grain = smoothstep(.55, .7 + .2 * u_grainMixer, grain);
+    grain *= u_grainMixer;
+    finalShape = mix(finalShape, 0., grain);
+  }
+
+  vec3 color = vec3(0.);
+  float opacity = 0.;
+
+  if (u_originalColors == true) {
+    color = totalColor * finalShape;
+    opacity = totalOpacity * finalShape;
+
+    vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+    color = color + bgColor * (1. - opacity);
+    opacity = opacity + u_colorBack.a * (1. - opacity);
+  } else {
+    vec3 fgColor = u_colorFront.rgb * u_colorFront.a;
+    float fgOpacity = u_colorFront.a;
+    vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+    float bgOpacity = u_colorBack.a;
+
+    color = fgColor * finalShape;
+    opacity = fgOpacity * finalShape;
+    color += bgColor * (1. - opacity);
+    opacity += bgOpacity * (1. - opacity);
+  }
+
+  if (u_grainOverlay > 0.) {
+    float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.));
+    grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5);
+    grainOverlay = pow(grainOverlay, 1.3);
+
+    float grainOverlayV = grainOverlay * 2. - 1.;
+    vec3 grainOverlayColor = vec3(step(0., grainOverlayV));
+    float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);
+    grainOverlayStrength = pow(grainOverlayStrength, .8);
+    color = mix(color, grainOverlayColor, .5 * grainOverlayStrength);
+
+    opacity += .5 * grainOverlayStrength;
+  }
+  opacity = clamp(opacity, 0., 1.);
+
+  fragColor = vec4(color, opacity);
+}
+`;
+const HalftoneDotsTypes = {
+  classic: 0,
+  gooey: 1,
+  holes: 2,
+  soft: 3
+};
+const HalftoneDotsGrids = {
+  square: 0,
+  hex: 1
+};
+export {
+  HalftoneDotsGrids,
+  HalftoneDotsTypes,
+  halftoneDotsFragmentShader
+};
+//# sourceMappingURL=halftone-dots.js.map

package/dist/shaders/halftone-dots.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/halftone-dots.ts"],
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\r\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\r\nimport { declarePI, rotation2, proceduralHash21 } from '../shader-utils.js';\r\n\r\n/**\r\n * A halftone-dot image filter featuring customizable grids, color palettes, and dot styles.\r\n *\r\n * Fragment shader uniforms:\r\n * - u_image (sampler2D): Source image texture\r\n * - u_imageAspectRatio (float): Aspect ratio of the source image\r\n * - u_colorFront (vec4): Foreground color in RGBA, needs originalColors off\r\n * - u_colorBack (vec4): Background color in RGBA\r\n * - u_originalColors (bool): Use sampled image's original colors instead of colorFront\r\n * - u_type (float): Dot style (0 = classic, 1 = gooey, 2 = holes, 3 = soft)\r\n * - u_inverted (bool): Inverts the image luminance, doesn't affect the color scheme, needs contrast > 0\r\n * - u_grid (float): Grid type (0 = square, 1 = hex)\r\n * - u_size (float): Grid size relative to the image box (0 to 1)\r\n * - u_radius (float): Maximum dot size relative to grid cell (0 to 2)\r\n * - u_contrast (float): Contrast applied to the sampled image, at 0 the luminance is flat so all the dots get equal size (0 to 1)\r\n * - u_grainMixer (float): Strength of grain distortion applied to shape edges (0 to 1)\r\n * - u_grainOverlay (float): Post-processing black/white grain overlay (0 to 1)\r\n * - u_grainSize (float): Scale applied to both grain distortion and grain overlay, needs grainMixer or grainOverlay > 0 (0 to 1)\r\n *\r\n * Vertex shader outputs (used in fragment shader):\r\n * - v_imageUV (vec2): Image UV coordinates with global sizing (rotation, scale, offset, etc) applied\r\n *\r\n * Vertex shader uniforms:\r\n * - u_resolution (vec2): Canvas resolution in pixels\r\n * - u_pixelRatio (float): Device pixel ratio\r\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\r\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\r\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\r\n * - u_scale (float): Overall zoom level of the graphics (0.1 to 4)\r\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\r\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\r\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\r\n * - u_imageAspectRatio (float): Aspect ratio of the source image\r\n *\r\n */\r\n\r\n// language=GLSL\r\nexport const halftoneDotsFragmentShader: string = `#version 300 es\r\nprecision mediump float;\r\n\r\nuniform vec4 u_colorFront;\r\nuniform vec4 u_colorBack;\r\nuniform float u_radius;\r\nuniform float u_contrast;\r\n\r\nuniform sampler2D u_image;\r\nuniform float u_imageAspectRatio;\r\n\r\nuniform float u_size;\r\nuniform float u_grainMixer;\r\nuniform float u_grainOverlay;\r\nuniform float u_grainSize;\r\nuniform float u_grid;\r\nuniform bool u_originalColors;\r\nuniform bool u_inverted;\r\nuniform float u_type;\r\n\r\nin vec2 v_imageUV;\r\n\r\nout vec4 fragColor;\r\n\r\n${ declarePI }\r\n${ rotation2 }\r\n${ proceduralHash21 }\r\n\r\nfloat valueNoise(vec2 st) {\r\n  vec2 i = floor(st);\r\n  vec2 f = fract(st);\r\n  float a = hash21(i);\r\n  float b = hash21(i + vec2(1.0, 0.0));\r\n  float c = hash21(i + vec2(0.0, 1.0));\r\n  float d = hash21(i + vec2(1.0, 1.0));\r\n  vec2 u = f * f * (3.0 - 2.0 * f);\r\n  float x1 = mix(a, b, u.x);\r\n  float x2 = mix(c, d, u.x);\r\n  return mix(x1, x2, u.y);\r\n}\r\n\r\nfloat lst(float edge0, float edge1, float x) {\r\n  return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);\r\n}\r\n\r\nfloat sst(float edge0, float edge1, float x) {\r\n  return smoothstep(edge0, edge1, x);\r\n}\r\n\r\nfloat getCircle(vec2 uv, float r, float baseR) {\r\n  r = mix(.25 * baseR, 0., r);\r\n  float d = length(uv - .5);\r\n  float aa = fwidth(d);\r\n  return 1. - smoothstep(r - aa, r + aa, d);\r\n}\r\n\r\nfloat getCell(vec2 uv) {\r\n  float insideX = step(0.0, uv.x) * (1.0 - step(1.0, uv.x));\r\n  float insideY = step(0.0, uv.y) * (1.0 - step(1.0, uv.y));\r\n  return insideX * insideY;\r\n}\r\n\r\nfloat getCircleWithHole(vec2 uv, float r, float baseR) {\r\n  float cell = getCell(uv);\r\n\r\n  r = mix(.75 * baseR, 0., r);\r\n  float rMod = mod(r, .5);\r\n\r\n  float d = length(uv - .5);\r\n  float aa = fwidth(d);\r\n  float circle = 1. - smoothstep(rMod - aa, rMod + aa, d);\r\n  if (r < .5) {\r\n    return circle;\r\n  } else {\r\n    return cell - circle;\r\n  }\r\n}\r\n\r\nfloat getGooeyBall(vec2 uv, float r, float baseR) {\r\n  float d = length(uv - .5);\r\n  float sizeRadius = .3;\r\n  if (u_grid == 1.) {\r\n    sizeRadius = .42;\r\n  }\r\n  sizeRadius = mix(sizeRadius * baseR, 0., r);\r\n  d = 1. - sst(0., sizeRadius, d);\r\n\r\n  d = pow(d, 2. + baseR);\r\n  return d;\r\n}\r\n\r\nfloat getSoftBall(vec2 uv, float r, float baseR) {\r\n  float d = length(uv - .5);\r\n  float sizeRadius = clamp(baseR, 0., 1.);\r\n  sizeRadius = mix(.5 * sizeRadius, 0., r);\r\n  d = 1. - lst(0., sizeRadius, d);\r\n  float powRadius = 1. - lst(0., 2., baseR);\r\n  d = pow(d, 4. + 3. * powRadius);\r\n  return d;\r\n}\r\n\r\nfloat getUvFrame(vec2 uv, vec2 pad) {\r\n  float aa = 0.0001;\r\n\r\n  float left   = smoothstep(-pad.x, -pad.x + aa, uv.x);\r\n  float right  = smoothstep(1.0 + pad.x, 1.0 + pad.x - aa, uv.x);\r\n  float bottom = smoothstep(-pad.y, -pad.y + aa, uv.y);\r\n  float top    = smoothstep(1.0 + pad.y, 1.0 + pad.y - aa, uv.y);\r\n\r\n  return left * right * bottom * top;\r\n}\r\n\r\nfloat sigmoid(float x, float k) {\r\n  return 1.0 / (1.0 + exp(-k * (x - 0.5)));\r\n}\r\n\r\nfloat getLumAtPx(vec2 uv, float contrast) {\r\n  vec4 tex = texture(u_image, uv);\r\n  vec3 color = vec3(\r\n  sigmoid(tex.r, contrast),\r\n  sigmoid(tex.g, contrast),\r\n  sigmoid(tex.b, contrast)\r\n  );\r\n  float lum = dot(vec3(0.2126, 0.7152, 0.0722), color);\r\n  lum = mix(1., lum, tex.a);\r\n  lum = u_inverted ? (1. - lum) : lum;\r\n  return lum;\r\n}\r\n\r\nfloat getLumBall(vec2 p, vec2 pad, vec2 inCellOffset, float contrast, float baseR, float stepSize, out vec4 ballColor) {\r\n  p += inCellOffset;\r\n  vec2 uv_i = floor(p);\r\n  vec2 uv_f = fract(p);\r\n  vec2 samplingUV = (uv_i + .5 - inCellOffset) * pad + vec2(.5);\r\n  float outOfFrame = getUvFrame(samplingUV, pad * stepSize);\r\n\r\n  float lum = getLumAtPx(samplingUV, contrast);\r\n  ballColor = texture(u_image, samplingUV);\r\n  ballColor.rgb *= ballColor.a;\r\n  ballColor *= outOfFrame;\r\n\r\n  float ball = 0.;\r\n  if (u_type == 0.) {\r\n    // classic\r\n    ball = getCircle(uv_f, lum, baseR);\r\n  } else if (u_type == 1.) {\r\n    // gooey\r\n    ball = getGooeyBall(uv_f, lum, baseR);\r\n  } else if (u_type == 2.) {\r\n    // holes\r\n    ball = getCircleWithHole(uv_f, lum, baseR);\r\n  } else if (u_type == 3.) {\r\n    // soft\r\n    ball = getSoftBall(uv_f, lum, baseR);\r\n  }\r\n\r\n  return ball * outOfFrame;\r\n}\r\n\r\n\r\nvoid main() {\r\n\r\n  float stepMultiplier = 1.;\r\n  if (u_type == 0.) {\r\n    // classic\r\n    stepMultiplier = 2.;\r\n  } else if (u_type == 1. || u_type == 3.) {\r\n    // gooey & soft\r\n    stepMultiplier = 6.;\r\n  }\r\n\r\n  float cellsPerSide = mix(300., 7., pow(u_size, .7));\r\n  cellsPerSide /= stepMultiplier;\r\n  float cellSizeY = 1. / cellsPerSide;\r\n  vec2 pad = cellSizeY * vec2(1. / u_imageAspectRatio, 1.);\r\n  if (u_type == 1. && u_grid == 1.) {\r\n    // gooey diagonal grid works differently\r\n    pad *= .7;\r\n  }\r\n\r\n  vec2 uv = v_imageUV;\r\n  uv -= vec2(.5);\r\n  uv /= pad;\r\n\r\n  float contrast = mix(0., 15., pow(u_contrast, 1.5));\r\n  float baseRadius = u_radius;\r\n  if (u_originalColors == true) {\r\n    contrast = mix(.1, 4., pow(u_contrast, 2.));\r\n    baseRadius = 2. * pow(.5 * u_radius, .3);\r\n  }\r\n\r\n  float totalShape = 0.;\r\n  vec3 totalColor = vec3(0.);\r\n  float totalOpacity = 0.;\r\n\r\n  vec4 ballColor;\r\n  float shape;\r\n  float stepSize = 1. / stepMultiplier;\r\n  for (float x = -0.5; x < 0.5; x += stepSize) {\r\n    for (float y = -0.5; y < 0.5; y += stepSize) {\r\n      vec2 offset = vec2(x, y);\r\n\r\n      if (u_grid == 1.) {\r\n        float rowIndex = floor((y + .5) / stepSize);\r\n        float colIndex = floor((x + .5) / stepSize);\r\n        if (stepSize == 1.) {\r\n          rowIndex = floor(uv.y + y + 1.);\r\n          if (u_type == 1.) {\r\n            colIndex = floor(uv.x + x + 1.);\r\n          }\r\n        }\r\n        if (u_type == 1.) {\r\n          if (mod(rowIndex + colIndex, 2.) == 1.) {\r\n            continue;\r\n          }\r\n        } else {\r\n          if (mod(rowIndex, 2.) == 1.) {\r\n            offset.x += .5 * stepSize;\r\n          }\r\n        }\r\n      }\r\n\r\n      shape = getLumBall(uv, pad, offset, contrast, baseRadius, stepSize, ballColor);\r\n      totalColor   += ballColor.rgb * shape;\r\n      totalShape   += shape;\r\n      totalOpacity += shape;\r\n    }\r\n  }\r\n\r\n  const float eps = 1e-4;\r\n\r\n  totalColor /= max(totalShape, eps);\r\n  totalOpacity /= max(totalShape, eps);\r\n\r\n  float finalShape = 0.;\r\n  if (u_type == 0.) {\r\n    finalShape = min(1., totalShape);\r\n  } else if (u_type == 1.) {\r\n    float aa = fwidth(totalShape);\r\n    float th = .5;\r\n    finalShape = smoothstep(th - aa, th + aa, totalShape);\r\n  } else if (u_type == 2.) {\r\n    finalShape = min(1., totalShape);\r\n  } else if (u_type == 3.) {\r\n    finalShape = totalShape;\r\n  }\r\n\r\n  vec2 grainSize = mix(2000., 200., u_grainSize) * vec2(1., 1. / u_imageAspectRatio);\r\n  vec2 grainUV = v_imageUV - .5;\r\n  grainUV *= grainSize;\r\n  grainUV += .5;\r\n  if (u_grainMixer > 0.) {\r\n    float grain = valueNoise(grainUV);\r\n    grain = smoothstep(.55, .7 + .2 * u_grainMixer, grain);\r\n    grain *= u_grainMixer;\r\n    finalShape = mix(finalShape, 0., grain);\r\n  }\r\n\r\n  vec3 color = vec3(0.);\r\n  float opacity = 0.;\r\n\r\n  if (u_originalColors == true) {\r\n    color = totalColor * finalShape;\r\n    opacity = totalOpacity * finalShape;\r\n\r\n    vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\r\n    color = color + bgColor * (1. - opacity);\r\n    opacity = opacity + u_colorBack.a * (1. - opacity);\r\n  } else {\r\n    vec3 fgColor = u_colorFront.rgb * u_colorFront.a;\r\n    float fgOpacity = u_colorFront.a;\r\n    vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\r\n    float bgOpacity = u_colorBack.a;\r\n\r\n    color = fgColor * finalShape;\r\n    opacity = fgOpacity * finalShape;\r\n    color += bgColor * (1. - opacity);\r\n    opacity += bgOpacity * (1. - opacity);\r\n  }\r\n\r\n  if (u_grainOverlay > 0.) {\r\n    float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.));\r\n    grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5);\r\n    grainOverlay = pow(grainOverlay, 1.3);\r\n\r\n    float grainOverlayV = grainOverlay * 2. - 1.;\r\n    vec3 grainOverlayColor = vec3(step(0., grainOverlayV));\r\n    float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);\r\n    grainOverlayStrength = pow(grainOverlayStrength, .8);\r\n    color = mix(color, grainOverlayColor, .5 * grainOverlayStrength);\r\n\r\n    opacity += .5 * grainOverlayStrength;\r\n  }\r\n  opacity = clamp(opacity, 0., 1.);\r\n\r\n  fragColor = vec4(color, opacity);\r\n}\r\n`;\r\n\r\nexport interface HalftoneDotsUniforms extends ShaderSizingUniforms {\r\n  u_image: HTMLImageElement | string | undefined;\r\n  u_colorFront: [number, number, number, number];\r\n  u_colorBack: [number, number, number, number];\r\n  u_size: number;\r\n  u_grid: (typeof HalftoneDotsGrids)[HalftoneDotsGrid];\r\n  u_radius: number;\r\n  u_contrast: number;\r\n  u_originalColors: boolean;\r\n  u_inverted: boolean;\r\n  u_grainMixer: number;\r\n  u_grainOverlay: number;\r\n  u_grainSize: number;\r\n  u_type: (typeof HalftoneDotsTypes)[HalftoneDotsType];\r\n}\r\n\r\nexport interface HalftoneDotsParams extends ShaderSizingParams, ShaderMotionParams {\r\n  image?: HTMLImageElement | string;\r\n  colorFront?: string;\r\n  colorBack?: string;\r\n  size?: number;\r\n  grid?: HalftoneDotsGrid;\r\n  radius?: number;\r\n  contrast?: number;\r\n  originalColors?: boolean;\r\n  inverted?: boolean;\r\n  grainMixer?: number;\r\n  grainOverlay?: number;\r\n  grainSize?: number;\r\n  type?: HalftoneDotsType;\r\n}\r\n\r\nexport const HalftoneDotsTypes = {\r\n  classic: 0,\r\n  gooey: 1,\r\n  holes: 2,\r\n  soft: 3,\r\n} as const;\r\n\r\nexport type HalftoneDotsType = keyof typeof HalftoneDotsTypes;\r\n\r\nexport const HalftoneDotsGrids = {\r\n  square: 0,\r\n  hex: 1,\r\n} as const;\r\n\r\nexport type HalftoneDotsGrid = keyof typeof HalftoneDotsGrids;\r\n"],
+  "mappings": ";;;;;AACA,eAAmE;AACnE,SAAS,WAAW,WAAW,wBAAwB;AAuChD,MAAM,6BAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwB/C,SAAU;AAAA,EACV,SAAU;AAAA,EACV,gBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiTb,MAAM,oBAAoB;AAAA,EAC/B,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AACR;AAIO,MAAM,oBAAoB;AAAA,EAC/B,QAAQ;AAAA,EACR,KAAK;AACP;",
+  "names": []
+}

package/dist/shaders/heatmap.d.ts

@@ -0,0 +1,66 @@
+import type { vec4 } from '../types.js';
+import type { ShaderMotionParams } from '../shader-mount.js';
+import type { ShaderSizingParams, ShaderSizingUniforms } from '../shader-sizing.js';
+export declare const heatmapMeta: {
+    readonly maxColorCount: 10;
+};
+/**
+ * A glowing gradient of colors flowing through an input shape.
+ * The effect creates a smoothly animated wave of intensity across the image.
+ *
+ * Fragment shader uniforms:
+ * - u_time (float): Animation time
+ * - u_image (sampler2D): Pre-processed source image texture (R = contour, G = outer blur, B = inner blur)
+ * - u_colorBack (vec4): Background color in RGBA
+ * - u_colors (vec4[]): Up to 10 heatmap colors in RGBA
+ * - u_colorsCount (float): Number of active colors
+ * - u_contour (float): Heat intensity near the edges of the input shape (0 to 1)
+ * - u_angle (float): Direction of the heatwaves in degrees, needs innerGlow or outerGlow > 0 (0 to 360)
+ * - u_noise (float): Grain applied across the entire graphic (0 to 1)
+ * - u_innerGlow (float): Size of the heated area inside the input shape (0 to 1)
+ * - u_outerGlow (float): Size of the heated area outside the input shape (0 to 1)
+ *
+ * Vertex shader outputs (used in fragment shader):
+ * - v_imageUV (vec2): UV coordinates for sampling the source image, with fit, scale, rotation, and offset applied
+ * - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied
+ *
+ * Vertex shader uniforms:
+ * - u_resolution (vec2): Canvas resolution in pixels
+ * - u_pixelRatio (float): Device pixel ratio
+ * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
+ * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
+ * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
+ * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
+ * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
+ * - u_scale (float): Overall zoom level of the graphics (0.1 to 4)
+ * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
+ * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
+ * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
+ * - u_imageAspectRatio (float): Aspect ratio of the source image
+ *
+ */
+export declare const heatmapFragmentShader: string;
+export declare function toProcessedHeatmap(file: File | string): Promise<{
+    blob: Blob;
+}>;
+export interface HeatmapUniforms extends ShaderSizingUniforms {
+    u_image: HTMLImageElement | string;
+    u_contour: number;
+    u_angle: number;
+    u_noise: number;
+    u_innerGlow: number;
+    u_outerGlow: number;
+    u_colorBack: [number, number, number, number];
+    u_colors: vec4[];
+    u_colorsCount: number;
+}
+export interface HeatmapParams extends ShaderSizingParams, ShaderMotionParams {
+    image: HTMLImageElement | string;
+    contour?: number;
+    angle?: number;
+    noise?: number;
+    innerGlow?: number;
+    outerGlow?: number;
+    colorBack?: string;
+    colors?: string[];
+}