@paper-design/shaders 0.0.0-canary.0d8316e

package/dist/shaders/halftone-dots.js

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