shaders-oneshot 0.0.81-shared.1

package/dist/shaders/halftone-cmyk.d.ts

@@ -0,0 +1,104 @@
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
+/**
+ * CMYK halftone printing effect applied to images with customizable dot patterns
+ * and ink colors for each channel (Cyan, Magenta, Yellow, Black).
+ *
+ * Fragment shader uniforms:
+ * - u_image (sampler2D): Source image texture
+ * - u_imageAspectRatio (float): Aspect ratio of the source image
+ * - u_colorBack (vec4): Background (paper) color in RGBA
+ * - u_colorC (vec4): Cyan ink color in RGBA
+ * - u_colorM (vec4): Magenta ink color in RGBA
+ * - u_colorY (vec4): Yellow ink color in RGBA
+ * - u_colorK (vec4): Black ink color in RGBA
+ * - u_size (float): Halftone cell size (0 to 1)
+ * - u_contrast (float): Image contrast adjustment (0 to 2)
+ * - u_softness (float): Edge softness of dots (0 to 1)
+ * - u_grainSize (float): Size of grain texture, applied to both grain and overlay, needs grainMixer or grainOverlay > 0 (0 to 1)
+ * - u_grainMixer (float): Strength of grain affecting dot size (0 to 1)
+ * - u_grainOverlay (float): Strength of grain overlay on final output (0 to 1)
+ * - u_gridNoise (float): Strength of smooth noise applied to both dot positions and color sampling, positions only with sharp type (0 to 1)
+ * - u_floodC (float): Flat cyan dot size adjustment applied uniformly, needs colorC alpha > 0 (0 to 1)
+ * - u_floodM (float): Flat magenta dot size adjustment applied uniformly, needs colorM alpha > 0 (0 to 1)
+ * - u_floodY (float): Flat yellow dot size adjustment applied uniformly, needs colorY alpha > 0 (0 to 1)
+ * - u_floodK (float): Flat black dot size adjustment applied uniformly, needs colorK alpha > 0 (0 to 1)
+ * - u_gainC (float): Proportional cyan dot size gain, needs colorC alpha > 0 (enhances existing dots, -1 to 1)
+ * - u_gainM (float): Proportional magenta dot size gain, needs colorM alpha > 0 (enhances existing dots, -1 to 1)
+ * - u_gainY (float): Proportional yellow dot size gain, needs colorY alpha > 0 (enhances existing dots, -1 to 1)
+ * - u_gainK (float): Proportional black dot size gain, needs colorK alpha > 0 (enhances existing dots, -1 to 1)
+ * - u_type (float): Dot shape style (0 = dots, 1 = ink, 2 = sharp)
+ * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture
+ *
+ * Vertex shader outputs (used in fragment shader):
+ * - v_imageUV (vec2): UV coordinates for sampling the source image, with fit, scale, rotation, and offset 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_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 halftoneCmykFragmentShader: string;
+export interface HalftoneCmykUniforms extends ShaderSizingUniforms {
+    u_image: HTMLImageElement | string | undefined;
+    u_noiseTexture?: HTMLImageElement;
+    u_colorBack: [number, number, number, number];
+    u_colorC: [number, number, number, number];
+    u_colorM: [number, number, number, number];
+    u_colorY: [number, number, number, number];
+    u_colorK: [number, number, number, number];
+    u_size: number;
+    u_contrast: number;
+    u_softness: number;
+    u_grainSize: number;
+    u_grainMixer: number;
+    u_grainOverlay: number;
+    u_gridNoise: number;
+    u_floodC: number;
+    u_floodM: number;
+    u_floodY: number;
+    u_floodK: number;
+    u_gainC: number;
+    u_gainM: number;
+    u_gainY: number;
+    u_gainK: number;
+    u_type: (typeof HalftoneCmykTypes)[HalftoneCmykType];
+}
+export interface HalftoneCmykParams extends ShaderSizingParams, ShaderMotionParams {
+    image?: HTMLImageElement | string;
+    colorBack?: string;
+    colorC?: string;
+    colorM?: string;
+    colorY?: string;
+    colorK?: string;
+    size?: number;
+    contrast?: number;
+    softness?: number;
+    grainSize?: number;
+    grainMixer?: number;
+    grainOverlay?: number;
+    gridNoise?: number;
+    floodC?: number;
+    floodM?: number;
+    floodY?: number;
+    floodK?: number;
+    gainC?: number;
+    gainM?: number;
+    gainY?: number;
+    gainK?: number;
+    type?: HalftoneCmykType;
+}
+export declare const HalftoneCmykTypes: {
+    readonly dots: 0;
+    readonly ink: 1;
+    readonly sharp: 2;
+};
+export type HalftoneCmykType = keyof typeof HalftoneCmykTypes;

package/dist/shaders/halftone-cmyk.js

@@ -0,0 +1,295 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import {} from "../shader-sizing.js";
+import { declarePI } from "../shader-utils.js";
+const halftoneCmykFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform sampler2D u_image;
+uniform float u_imageAspectRatio;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colorC;
+uniform vec4 u_colorM;
+uniform vec4 u_colorY;
+uniform vec4 u_colorK;
+uniform float u_size;
+uniform float u_contrast;
+uniform float u_grainSize;
+uniform float u_grainMixer;
+uniform float u_grainOverlay;
+uniform float u_gridNoise;
+uniform float u_softness;
+uniform float u_floodC;
+uniform float u_floodM;
+uniform float u_floodY;
+uniform float u_floodK;
+uniform float u_gainC;
+uniform float u_gainM;
+uniform float u_gainY;
+uniform float u_gainK;
+uniform float u_type;
+uniform sampler2D u_noiseTexture;
+
+in vec2 v_imageUV;
+out vec4 fragColor;
+
+const float shiftC = -.5;
+const float shiftM = -.25;
+const float shiftY = .2;
+const float shiftK = 0.;
+
+// Precomputed sin/cos for rotation angles (15\xB0, 75\xB0, 0\xB0, 45\xB0)
+const float cosC = 0.9659258;  const float sinC = 0.2588190;   // 15\xB0
+const float cosM = 0.2588190;  const float sinM = 0.9659258;   // 75\xB0
+const float cosY = 1.0;        const float sinY = 0.0;         // 0\xB0
+const float cosK = 0.7071068;  const float sinK = 0.7071068;   // 45\xB0
+
+${declarePI}
+
+vec2 randomRG(vec2 p) {
+  vec2 uv = floor(p) / 100. + .5;
+  return texture(u_noiseTexture, fract(uv)).rg;
+}
+vec3 hash23(vec2 p) {
+  vec3 p3 = fract(vec3(p.xyx) * vec3(0.3183099, 0.3678794, 0.3141592)) + 0.1;
+  p3 += dot(p3, p3.yzx + 19.19);
+  return fract(vec3(p3.x * p3.y, p3.y * p3.z, p3.z * p3.x));
+}
+
+float sst(float edge0, float edge1, float x) {
+  return smoothstep(edge0, edge1, x);
+}
+
+vec3 valueNoise3(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  vec3 a = hash23(i);
+  vec3 b = hash23(i + vec2(1.0, 0.0));
+  vec3 c = hash23(i + vec2(0.0, 1.0));
+  vec3 d = hash23(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  vec3 x1 = mix(a, b, u.x);
+  vec3 x2 = mix(c, d, u.x);
+  return mix(x1, x2, u.y);
+}
+
+float getUvFrame(vec2 uv, vec2 pad) {
+  float left   = smoothstep(-pad.x, 0., uv.x);
+  float right  = smoothstep(1. + pad.x, 1., uv.x);
+  float bottom = smoothstep(-pad.y, 0., uv.y);
+  float top    = smoothstep(1. + pad.y, 1., uv.y);
+
+  return left * right * bottom * top;
+}
+
+vec4 RGBAtoCMYK(vec4 rgba) {
+  float k = 1. - max(max(rgba.r, rgba.g), rgba.b);
+  float denom = 1. - k;
+  vec3 cmy = vec3(0.);
+  if (denom > 1e-5) {
+    cmy = (1. - rgba.rgb - vec3(k)) / denom;
+  }
+  return vec4(cmy, k) * rgba.a;
+}
+
+vec3 applyContrast(vec3 rgb) {
+  return clamp((rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);
+}
+
+// Single-component CMYK extractors with contrast built-in, alpha-aware
+float getCyan(vec4 rgba) {
+  vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);
+  float maxRGB = max(max(c.r, c.g), c.b);
+  return (maxRGB > 1e-5 ? (maxRGB - c.r) / maxRGB : 0.) * rgba.a;
+}
+float getMagenta(vec4 rgba) {
+  vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);
+  float maxRGB = max(max(c.r, c.g), c.b);
+  return (maxRGB > 1e-5 ? (maxRGB - c.g) / maxRGB : 0.) * rgba.a;
+}
+float getYellow(vec4 rgba) {
+  vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);
+  float maxRGB = max(max(c.r, c.g), c.b);
+  return (maxRGB > 1e-5 ? (maxRGB - c.b) / maxRGB : 0.) * rgba.a;
+}
+float getBlack(vec4 rgba) {
+  vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);
+  return (1. - max(max(c.r, c.g), c.b)) * rgba.a;
+}
+
+vec2 cellCenterPos(vec2 uv, vec2 cellOffset, float channelIdx) {
+  vec2 cellCenter = floor(uv) + .5 + cellOffset;
+  return cellCenter + (randomRG(cellCenter + channelIdx * 50.) - .5) * u_gridNoise;
+}
+
+vec2 gridToImageUV(vec2 cellCenter, float cosA, float sinA, float shift, vec2 pad) {
+  vec2 uvGrid = mat2(cosA, -sinA, sinA, cosA) * (cellCenter - shift);
+  return uvGrid * pad + 0.5;
+}
+
+void colorMask(vec2 pos, vec2 cellCenter, float rad, float transparency, float grain, float channelAddon, float channelgain, float generalComp, bool isJoined, inout float outMask) {
+  float dist = length(pos - cellCenter);
+
+  float radius = rad;
+  radius *= (1. + generalComp);
+  radius += (.15 + channelgain * radius);
+  radius = max(0., radius);
+  radius = mix(0., radius, transparency);
+  radius += channelAddon;
+  radius *= (1. - grain);
+
+  float mask = 1. - sst(0., radius, dist);
+  if (isJoined) {
+    // ink or sharp (joined)
+    mask = pow(mask, 1.2);
+  } else {
+    // dots (separate)
+    mask = sst(.5 - .5 * u_softness, .51 + .49 * u_softness, mask);
+  }
+
+  mask *= mix(1., mix(.5, 1., 1.5 * radius), u_softness);
+  outMask += mask;
+}
+
+vec3 applyInk(vec3 paper, vec3 inkColor, float cov) {
+  vec3 inkEffect = mix(vec3(1.0), inkColor, clamp(cov, 0.0, 1.0));
+  return paper * inkEffect;
+}
+
+void main() {
+  vec2 uv = v_imageUV;
+
+  float cellsPerSide = mix(400.0, 7.0, pow(u_size, 0.7));
+  float cellSizeY = 1.0 / cellsPerSide;
+  vec2 pad = cellSizeY * vec2(1.0 / u_imageAspectRatio, 1.0);
+  vec2 uvGrid = (uv - .5) / pad;
+  float insideImageBox = getUvFrame(uv, pad);
+
+  float generalComp = .1 * u_softness + .1 * u_gridNoise + .1 * (1. - step(0.5, u_type)) * (1.5 - u_softness);
+
+  vec2 uvC = mat2(cosC, sinC, -sinC, cosC) * uvGrid + shiftC;
+  vec2 uvM = mat2(cosM, sinM, -sinM, cosM) * uvGrid + shiftM;
+  vec2 uvY = mat2(cosY, sinY, -sinY, cosY) * uvGrid + shiftY;
+  vec2 uvK = mat2(cosK, sinK, -sinK, cosK) * uvGrid + shiftK;
+
+  vec2 grainSize = mix(2000., 200., u_grainSize) * vec2(1., 1. / u_imageAspectRatio);
+  vec2 grainUV = (v_imageUV - .5) * grainSize + .5;
+  // shared by the grain mixer and the grain overlay, skip it when neither is on
+  vec3 noiseValues = vec3(0.);
+  if (u_grainMixer > 0. || u_grainOverlay > 0.) {
+    noiseValues = valueNoise3(grainUV);
+  }
+  float grain = sst(.55, 1., noiseValues.r);
+  grain *= u_grainMixer;
+
+  vec4 outMask = vec4(0.);
+  bool isJoined = u_type > 0.5;
+
+  if (u_type < 1.5) {
+    // dots or ink: per-cell color sampling
+    for (int dy = -1; dy <= 1; dy++) {
+      for (int dx = -1; dx <= 1; dx++) {
+        vec2 cellOffset = vec2(float(dx), float(dy));
+
+        vec2 cellCenterC = cellCenterPos(uvC, cellOffset, 0.);
+        vec4 texC = texture(u_image, gridToImageUV(cellCenterC, cosC, sinC, shiftC, pad));
+        colorMask(uvC, cellCenterC, getCyan(texC), insideImageBox * texC.a, grain, u_floodC, u_gainC, generalComp, isJoined, outMask[0]);
+
+        vec2 cellCenterM = cellCenterPos(uvM, cellOffset, 1.);
+        vec4 texM = texture(u_image, gridToImageUV(cellCenterM, cosM, sinM, shiftM, pad));
+        colorMask(uvM, cellCenterM, getMagenta(texM), insideImageBox * texM.a, grain, u_floodM, u_gainM, generalComp, isJoined, outMask[1]);
+
+        vec2 cellCenterY = cellCenterPos(uvY, cellOffset, 2.);
+        vec4 texY = texture(u_image, gridToImageUV(cellCenterY, cosY, sinY, shiftY, pad));
+        colorMask(uvY, cellCenterY, getYellow(texY), insideImageBox * texY.a, grain, u_floodY, u_gainY, generalComp, isJoined, outMask[2]);
+
+        vec2 cellCenterK = cellCenterPos(uvK, cellOffset, 3.);
+        vec4 texK = texture(u_image, gridToImageUV(cellCenterK, cosK, sinK, shiftK, pad));
+        colorMask(uvK, cellCenterK, getBlack(texK), insideImageBox * texK.a, grain, u_floodK, u_gainK, generalComp, isJoined, outMask[3]);
+      }
+    }
+  } else {
+    // sharp: direct px color sampling
+    vec4 tex = texture(u_image, uv);
+    tex.rgb = applyContrast(tex.rgb);
+    insideImageBox *= tex.a;
+    vec4 cmykOriginal = RGBAtoCMYK(tex);
+    for (int dy = -1; dy <= 1; dy++) {
+      for (int dx = -1; dx <= 1; dx++) {
+        vec2 cellOffset = vec2(float(dx), float(dy));
+
+        colorMask(uvC, cellCenterPos(uvC, cellOffset, 0.), cmykOriginal.x, insideImageBox, grain, u_floodC, u_gainC, generalComp, isJoined, outMask[0]);
+        colorMask(uvM, cellCenterPos(uvM, cellOffset, 1.), cmykOriginal.y, insideImageBox, grain, u_floodM, u_gainM, generalComp, isJoined, outMask[1]);
+        colorMask(uvY, cellCenterPos(uvY, cellOffset, 2.), cmykOriginal.z, insideImageBox, grain, u_floodY, u_gainY, generalComp, isJoined, outMask[2]);
+        colorMask(uvK, cellCenterPos(uvK, cellOffset, 3.), cmykOriginal.w, insideImageBox, grain, u_floodK, u_gainK, generalComp, isJoined, outMask[3]);
+      }
+    }
+  }
+
+  float shape;
+
+  float C = outMask[0];
+  float M = outMask[1];
+  float Y = outMask[2];
+  float K = outMask[3];
+
+  if (isJoined) {
+    // ink or sharp: apply threshold for joined dots
+    float th = .5;
+    float sLeft = th * u_softness;
+    float sRight = (1. - th) * u_softness + .01;
+    C = smoothstep(th - sLeft - fwidth(C), th + sRight, C);
+    M = smoothstep(th - sLeft - fwidth(M), th + sRight, M);
+    Y = smoothstep(th - sLeft - fwidth(Y), th + sRight, Y);
+    K = smoothstep(th - sLeft - fwidth(K), th + sRight, K);
+  }
+
+  C *= u_colorC.a;
+  M *= u_colorM.a;
+  Y *= u_colorY.a;
+  K *= u_colorK.a;
+
+  vec3 ink = vec3(1.);
+  ink = applyInk(ink, u_colorK.rgb, K);
+  ink = applyInk(ink, u_colorC.rgb, C);
+  ink = applyInk(ink, u_colorM.rgb, M);
+  ink = applyInk(ink, u_colorY.rgb, Y);
+
+  shape = clamp(max(max(C, M), max(Y, K)), 0., 1.);
+
+  vec3 color = u_colorBack.rgb * u_colorBack.a;
+
+  float opacity = u_colorBack.a;
+  color = mix(color, ink, shape);
+  opacity += shape;
+  opacity = clamp(opacity, 0., 1.);
+
+  float grainOverlay = mix(noiseValues.g, noiseValues.b, .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 HalftoneCmykTypes = {
+  dots: 0,
+  ink: 1,
+  sharp: 2
+};
+export {
+  HalftoneCmykTypes,
+  halftoneCmykFragmentShader
+};
+//# sourceMappingURL=halftone-cmyk.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/halftone-cmyk.ts"],
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\r\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\r\nimport { declarePI } from '../shader-utils.js';\r\n\r\n/**\r\n * CMYK halftone printing effect applied to images with customizable dot patterns\r\n * and ink colors for each channel (Cyan, Magenta, Yellow, Black).\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_colorBack (vec4): Background (paper) color in RGBA\r\n * - u_colorC (vec4): Cyan ink color in RGBA\r\n * - u_colorM (vec4): Magenta ink color in RGBA\r\n * - u_colorY (vec4): Yellow ink color in RGBA\r\n * - u_colorK (vec4): Black ink color in RGBA\r\n * - u_size (float): Halftone cell size (0 to 1)\r\n * - u_contrast (float): Image contrast adjustment (0 to 2)\r\n * - u_softness (float): Edge softness of dots (0 to 1)\r\n * - u_grainSize (float): Size of grain texture, applied to both grain and overlay, needs grainMixer or grainOverlay > 0 (0 to 1)\r\n * - u_grainMixer (float): Strength of grain affecting dot size (0 to 1)\r\n * - u_grainOverlay (float): Strength of grain overlay on final output (0 to 1)\r\n * - u_gridNoise (float): Strength of smooth noise applied to both dot positions and color sampling, positions only with sharp type (0 to 1)\r\n * - u_floodC (float): Flat cyan dot size adjustment applied uniformly, needs colorC alpha > 0 (0 to 1)\r\n * - u_floodM (float): Flat magenta dot size adjustment applied uniformly, needs colorM alpha > 0 (0 to 1)\r\n * - u_floodY (float): Flat yellow dot size adjustment applied uniformly, needs colorY alpha > 0 (0 to 1)\r\n * - u_floodK (float): Flat black dot size adjustment applied uniformly, needs colorK alpha > 0 (0 to 1)\r\n * - u_gainC (float): Proportional cyan dot size gain, needs colorC alpha > 0 (enhances existing dots, -1 to 1)\r\n * - u_gainM (float): Proportional magenta dot size gain, needs colorM alpha > 0 (enhances existing dots, -1 to 1)\r\n * - u_gainY (float): Proportional yellow dot size gain, needs colorY alpha > 0 (enhances existing dots, -1 to 1)\r\n * - u_gainK (float): Proportional black dot size gain, needs colorK alpha > 0 (enhances existing dots, -1 to 1)\r\n * - u_type (float): Dot shape style (0 = dots, 1 = ink, 2 = sharp)\r\n * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture\r\n *\r\n * Vertex shader outputs (used in fragment shader):\r\n * - v_imageUV (vec2): UV coordinates for sampling the source image, with fit, scale, rotation, and offset 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 halftoneCmykFragmentShader: string = `#version 300 es\r\nprecision mediump float;\r\n\r\nuniform sampler2D u_image;\r\nuniform float u_imageAspectRatio;\r\n\r\nuniform vec4 u_colorBack;\r\nuniform vec4 u_colorC;\r\nuniform vec4 u_colorM;\r\nuniform vec4 u_colorY;\r\nuniform vec4 u_colorK;\r\nuniform float u_size;\r\nuniform float u_contrast;\r\nuniform float u_grainSize;\r\nuniform float u_grainMixer;\r\nuniform float u_grainOverlay;\r\nuniform float u_gridNoise;\r\nuniform float u_softness;\r\nuniform float u_floodC;\r\nuniform float u_floodM;\r\nuniform float u_floodY;\r\nuniform float u_floodK;\r\nuniform float u_gainC;\r\nuniform float u_gainM;\r\nuniform float u_gainY;\r\nuniform float u_gainK;\r\nuniform float u_type;\r\nuniform sampler2D u_noiseTexture;\r\n\r\nin vec2 v_imageUV;\r\nout vec4 fragColor;\r\n\r\nconst float shiftC = -.5;\r\nconst float shiftM = -.25;\r\nconst float shiftY = .2;\r\nconst float shiftK = 0.;\r\n\r\n// Precomputed sin/cos for rotation angles (15\u00B0, 75\u00B0, 0\u00B0, 45\u00B0)\r\nconst float cosC = 0.9659258;  const float sinC = 0.2588190;   // 15\u00B0\r\nconst float cosM = 0.2588190;  const float sinM = 0.9659258;   // 75\u00B0\r\nconst float cosY = 1.0;        const float sinY = 0.0;         // 0\u00B0\r\nconst float cosK = 0.7071068;  const float sinK = 0.7071068;   // 45\u00B0\r\n\r\n${ declarePI }\r\n\r\nvec2 randomRG(vec2 p) {\r\n  vec2 uv = floor(p) / 100. + .5;\r\n  return texture(u_noiseTexture, fract(uv)).rg;\r\n}\r\nvec3 hash23(vec2 p) {\r\n  vec3 p3 = fract(vec3(p.xyx) * vec3(0.3183099, 0.3678794, 0.3141592)) + 0.1;\r\n  p3 += dot(p3, p3.yzx + 19.19);\r\n  return fract(vec3(p3.x * p3.y, p3.y * p3.z, p3.z * p3.x));\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\nvec3 valueNoise3(vec2 st) {\r\n  vec2 i = floor(st);\r\n  vec2 f = fract(st);\r\n  vec3 a = hash23(i);\r\n  vec3 b = hash23(i + vec2(1.0, 0.0));\r\n  vec3 c = hash23(i + vec2(0.0, 1.0));\r\n  vec3 d = hash23(i + vec2(1.0, 1.0));\r\n  vec2 u = f * f * (3.0 - 2.0 * f);\r\n  vec3 x1 = mix(a, b, u.x);\r\n  vec3 x2 = mix(c, d, u.x);\r\n  return mix(x1, x2, u.y);\r\n}\r\n\r\nfloat getUvFrame(vec2 uv, vec2 pad) {\r\n  float left   = smoothstep(-pad.x, 0., uv.x);\r\n  float right  = smoothstep(1. + pad.x, 1., uv.x);\r\n  float bottom = smoothstep(-pad.y, 0., uv.y);\r\n  float top    = smoothstep(1. + pad.y, 1., uv.y);\r\n\r\n  return left * right * bottom * top;\r\n}\r\n\r\nvec4 RGBAtoCMYK(vec4 rgba) {\r\n  float k = 1. - max(max(rgba.r, rgba.g), rgba.b);\r\n  float denom = 1. - k;\r\n  vec3 cmy = vec3(0.);\r\n  if (denom > 1e-5) {\r\n    cmy = (1. - rgba.rgb - vec3(k)) / denom;\r\n  }\r\n  return vec4(cmy, k) * rgba.a;\r\n}\r\n\r\nvec3 applyContrast(vec3 rgb) {\r\n  return clamp((rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);\r\n}\r\n\r\n// Single-component CMYK extractors with contrast built-in, alpha-aware\r\nfloat getCyan(vec4 rgba) {\r\n  vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);\r\n  float maxRGB = max(max(c.r, c.g), c.b);\r\n  return (maxRGB > 1e-5 ? (maxRGB - c.r) / maxRGB : 0.) * rgba.a;\r\n}\r\nfloat getMagenta(vec4 rgba) {\r\n  vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);\r\n  float maxRGB = max(max(c.r, c.g), c.b);\r\n  return (maxRGB > 1e-5 ? (maxRGB - c.g) / maxRGB : 0.) * rgba.a;\r\n}\r\nfloat getYellow(vec4 rgba) {\r\n  vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);\r\n  float maxRGB = max(max(c.r, c.g), c.b);\r\n  return (maxRGB > 1e-5 ? (maxRGB - c.b) / maxRGB : 0.) * rgba.a;\r\n}\r\nfloat getBlack(vec4 rgba) {\r\n  vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);\r\n  return (1. - max(max(c.r, c.g), c.b)) * rgba.a;\r\n}\r\n\r\nvec2 cellCenterPos(vec2 uv, vec2 cellOffset, float channelIdx) {\r\n  vec2 cellCenter = floor(uv) + .5 + cellOffset;\r\n  return cellCenter + (randomRG(cellCenter + channelIdx * 50.) - .5) * u_gridNoise;\r\n}\r\n\r\nvec2 gridToImageUV(vec2 cellCenter, float cosA, float sinA, float shift, vec2 pad) {\r\n  vec2 uvGrid = mat2(cosA, -sinA, sinA, cosA) * (cellCenter - shift);\r\n  return uvGrid * pad + 0.5;\r\n}\r\n\r\nvoid colorMask(vec2 pos, vec2 cellCenter, float rad, float transparency, float grain, float channelAddon, float channelgain, float generalComp, bool isJoined, inout float outMask) {\r\n  float dist = length(pos - cellCenter);\r\n\r\n  float radius = rad;\r\n  radius *= (1. + generalComp);\r\n  radius += (.15 + channelgain * radius);\r\n  radius = max(0., radius);\r\n  radius = mix(0., radius, transparency);\r\n  radius += channelAddon;\r\n  radius *= (1. - grain);\r\n\r\n  float mask = 1. - sst(0., radius, dist);\r\n  if (isJoined) {\r\n    // ink or sharp (joined)\r\n    mask = pow(mask, 1.2);\r\n  } else {\r\n    // dots (separate)\r\n    mask = sst(.5 - .5 * u_softness, .51 + .49 * u_softness, mask);\r\n  }\r\n\r\n  mask *= mix(1., mix(.5, 1., 1.5 * radius), u_softness);\r\n  outMask += mask;\r\n}\r\n\r\nvec3 applyInk(vec3 paper, vec3 inkColor, float cov) {\r\n  vec3 inkEffect = mix(vec3(1.0), inkColor, clamp(cov, 0.0, 1.0));\r\n  return paper * inkEffect;\r\n}\r\n\r\nvoid main() {\r\n  vec2 uv = v_imageUV;\r\n\r\n  float cellsPerSide = mix(400.0, 7.0, pow(u_size, 0.7));\r\n  float cellSizeY = 1.0 / cellsPerSide;\r\n  vec2 pad = cellSizeY * vec2(1.0 / u_imageAspectRatio, 1.0);\r\n  vec2 uvGrid = (uv - .5) / pad;\r\n  float insideImageBox = getUvFrame(uv, pad);\r\n\r\n  float generalComp = .1 * u_softness + .1 * u_gridNoise + .1 * (1. - step(0.5, u_type)) * (1.5 - u_softness);\r\n\r\n  vec2 uvC = mat2(cosC, sinC, -sinC, cosC) * uvGrid + shiftC;\r\n  vec2 uvM = mat2(cosM, sinM, -sinM, cosM) * uvGrid + shiftM;\r\n  vec2 uvY = mat2(cosY, sinY, -sinY, cosY) * uvGrid + shiftY;\r\n  vec2 uvK = mat2(cosK, sinK, -sinK, cosK) * uvGrid + shiftK;\r\n\r\n  vec2 grainSize = mix(2000., 200., u_grainSize) * vec2(1., 1. / u_imageAspectRatio);\r\n  vec2 grainUV = (v_imageUV - .5) * grainSize + .5;\r\n  // shared by the grain mixer and the grain overlay, skip it when neither is on\r\n  vec3 noiseValues = vec3(0.);\r\n  if (u_grainMixer > 0. || u_grainOverlay > 0.) {\r\n    noiseValues = valueNoise3(grainUV);\r\n  }\r\n  float grain = sst(.55, 1., noiseValues.r);\r\n  grain *= u_grainMixer;\r\n\r\n  vec4 outMask = vec4(0.);\r\n  bool isJoined = u_type > 0.5;\r\n\r\n  if (u_type < 1.5) {\r\n    // dots or ink: per-cell color sampling\r\n    for (int dy = -1; dy <= 1; dy++) {\r\n      for (int dx = -1; dx <= 1; dx++) {\r\n        vec2 cellOffset = vec2(float(dx), float(dy));\r\n\r\n        vec2 cellCenterC = cellCenterPos(uvC, cellOffset, 0.);\r\n        vec4 texC = texture(u_image, gridToImageUV(cellCenterC, cosC, sinC, shiftC, pad));\r\n        colorMask(uvC, cellCenterC, getCyan(texC), insideImageBox * texC.a, grain, u_floodC, u_gainC, generalComp, isJoined, outMask[0]);\r\n\r\n        vec2 cellCenterM = cellCenterPos(uvM, cellOffset, 1.);\r\n        vec4 texM = texture(u_image, gridToImageUV(cellCenterM, cosM, sinM, shiftM, pad));\r\n        colorMask(uvM, cellCenterM, getMagenta(texM), insideImageBox * texM.a, grain, u_floodM, u_gainM, generalComp, isJoined, outMask[1]);\r\n\r\n        vec2 cellCenterY = cellCenterPos(uvY, cellOffset, 2.);\r\n        vec4 texY = texture(u_image, gridToImageUV(cellCenterY, cosY, sinY, shiftY, pad));\r\n        colorMask(uvY, cellCenterY, getYellow(texY), insideImageBox * texY.a, grain, u_floodY, u_gainY, generalComp, isJoined, outMask[2]);\r\n\r\n        vec2 cellCenterK = cellCenterPos(uvK, cellOffset, 3.);\r\n        vec4 texK = texture(u_image, gridToImageUV(cellCenterK, cosK, sinK, shiftK, pad));\r\n        colorMask(uvK, cellCenterK, getBlack(texK), insideImageBox * texK.a, grain, u_floodK, u_gainK, generalComp, isJoined, outMask[3]);\r\n      }\r\n    }\r\n  } else {\r\n    // sharp: direct px color sampling\r\n    vec4 tex = texture(u_image, uv);\r\n    tex.rgb = applyContrast(tex.rgb);\r\n    insideImageBox *= tex.a;\r\n    vec4 cmykOriginal = RGBAtoCMYK(tex);\r\n    for (int dy = -1; dy <= 1; dy++) {\r\n      for (int dx = -1; dx <= 1; dx++) {\r\n        vec2 cellOffset = vec2(float(dx), float(dy));\r\n\r\n        colorMask(uvC, cellCenterPos(uvC, cellOffset, 0.), cmykOriginal.x, insideImageBox, grain, u_floodC, u_gainC, generalComp, isJoined, outMask[0]);\r\n        colorMask(uvM, cellCenterPos(uvM, cellOffset, 1.), cmykOriginal.y, insideImageBox, grain, u_floodM, u_gainM, generalComp, isJoined, outMask[1]);\r\n        colorMask(uvY, cellCenterPos(uvY, cellOffset, 2.), cmykOriginal.z, insideImageBox, grain, u_floodY, u_gainY, generalComp, isJoined, outMask[2]);\r\n        colorMask(uvK, cellCenterPos(uvK, cellOffset, 3.), cmykOriginal.w, insideImageBox, grain, u_floodK, u_gainK, generalComp, isJoined, outMask[3]);\r\n      }\r\n    }\r\n  }\r\n\r\n  float shape;\r\n\r\n  float C = outMask[0];\r\n  float M = outMask[1];\r\n  float Y = outMask[2];\r\n  float K = outMask[3];\r\n\r\n  if (isJoined) {\r\n    // ink or sharp: apply threshold for joined dots\r\n    float th = .5;\r\n    float sLeft = th * u_softness;\r\n    float sRight = (1. - th) * u_softness + .01;\r\n    C = smoothstep(th - sLeft - fwidth(C), th + sRight, C);\r\n    M = smoothstep(th - sLeft - fwidth(M), th + sRight, M);\r\n    Y = smoothstep(th - sLeft - fwidth(Y), th + sRight, Y);\r\n    K = smoothstep(th - sLeft - fwidth(K), th + sRight, K);\r\n  }\r\n\r\n  C *= u_colorC.a;\r\n  M *= u_colorM.a;\r\n  Y *= u_colorY.a;\r\n  K *= u_colorK.a;\r\n\r\n  vec3 ink = vec3(1.);\r\n  ink = applyInk(ink, u_colorK.rgb, K);\r\n  ink = applyInk(ink, u_colorC.rgb, C);\r\n  ink = applyInk(ink, u_colorM.rgb, M);\r\n  ink = applyInk(ink, u_colorY.rgb, Y);\r\n\r\n  shape = clamp(max(max(C, M), max(Y, K)), 0., 1.);\r\n\r\n  vec3 color = u_colorBack.rgb * u_colorBack.a;\r\n\r\n  float opacity = u_colorBack.a;\r\n  color = mix(color, ink, shape);\r\n  opacity += shape;\r\n  opacity = clamp(opacity, 0., 1.);\r\n\r\n  float grainOverlay = mix(noiseValues.g, noiseValues.b, .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  opacity = clamp(opacity, 0., 1.);\r\n\r\n  fragColor = vec4(color, opacity);\r\n}\r\n`;\r\n\r\nexport interface HalftoneCmykUniforms extends ShaderSizingUniforms {\r\n  u_image: HTMLImageElement | string | undefined;\r\n  u_noiseTexture?: HTMLImageElement;\r\n  u_colorBack: [number, number, number, number];\r\n  u_colorC: [number, number, number, number];\r\n  u_colorM: [number, number, number, number];\r\n  u_colorY: [number, number, number, number];\r\n  u_colorK: [number, number, number, number];\r\n  u_size: number;\r\n  u_contrast: number;\r\n  u_softness: number;\r\n  u_grainSize: number;\r\n  u_grainMixer: number;\r\n  u_grainOverlay: number;\r\n  u_gridNoise: number;\r\n  u_floodC: number;\r\n  u_floodM: number;\r\n  u_floodY: number;\r\n  u_floodK: number;\r\n  u_gainC: number;\r\n  u_gainM: number;\r\n  u_gainY: number;\r\n  u_gainK: number;\r\n  u_type: (typeof HalftoneCmykTypes)[HalftoneCmykType];\r\n}\r\n\r\nexport interface HalftoneCmykParams extends ShaderSizingParams, ShaderMotionParams {\r\n  image?: HTMLImageElement | string;\r\n  colorBack?: string;\r\n  colorC?: string;\r\n  colorM?: string;\r\n  colorY?: string;\r\n  colorK?: string;\r\n  size?: number;\r\n  contrast?: number;\r\n  softness?: number;\r\n  grainSize?: number;\r\n  grainMixer?: number;\r\n  grainOverlay?: number;\r\n  gridNoise?: number;\r\n  floodC?: number;\r\n  floodM?: number;\r\n  floodY?: number;\r\n  floodK?: number;\r\n  gainC?: number;\r\n  gainM?: number;\r\n  gainY?: number;\r\n  gainK?: number;\r\n  type?: HalftoneCmykType;\r\n}\r\n\r\nexport const HalftoneCmykTypes = {\r\n  dots: 0,\r\n  ink: 1,\r\n  sharp: 2,\r\n} as const;\r\n\r\nexport type HalftoneCmykType = keyof typeof HalftoneCmykTypes;\r\n\r\n"],
+  "mappings": ";;;;;AACA,eAAmE;AACnE,SAAS,iBAAiB;AAkDnB,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;AAAA;AAAA;AAAA;AAAA,EA2C/C,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+RN,MAAM,oBAAoB;AAAA,EAC/B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AACT;",
+  "names": []
+}

package/dist/shaders/halftone-dots.d.ts

@@ -0,0 +1,80 @@
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
+/**
+ * A halftone-dot image filter featuring customizable grids, color palettes, and dot styles.
+ *
+ * Fragment shader uniforms:
+ * - u_image (sampler2D): Source image texture
+ * - u_imageAspectRatio (float): Aspect ratio of the source image
+ * - u_colorFront (vec4): Foreground color in RGBA, needs originalColors off
+ * - u_colorBack (vec4): Background color in RGBA
+ * - u_originalColors (bool): Use sampled image's original colors instead of colorFront
+ * - u_type (float): Dot style (0 = classic, 1 = gooey, 2 = holes, 3 = soft)
+ * - u_inverted (bool): Inverts the image luminance, doesn't affect the color scheme, needs contrast > 0
+ * - u_grid (float): Grid type (0 = square, 1 = hex)
+ * - u_size (float): Grid size relative to the image box (0 to 1)
+ * - u_radius (float): Maximum dot size relative to grid cell (0 to 2)
+ * - 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)
+ * - u_grainMixer (float): Strength of grain distortion applied to shape edges (0 to 1)
+ * - u_grainOverlay (float): Post-processing black/white grain overlay (0 to 1)
+ * - u_grainSize (float): Scale applied to both grain distortion and grain overlay, needs grainMixer or grainOverlay > 0 (0 to 1)
+ *
+ * Vertex shader outputs (used in fragment shader):
+ * - v_imageUV (vec2): Image UV coordinates with global sizing (rotation, scale, offset, 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_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 halftoneDotsFragmentShader: string;
+export interface HalftoneDotsUniforms extends ShaderSizingUniforms {
+    u_image: HTMLImageElement | string | undefined;
+    u_colorFront: [number, number, number, number];
+    u_colorBack: [number, number, number, number];
+    u_size: number;
+    u_grid: (typeof HalftoneDotsGrids)[HalftoneDotsGrid];
+    u_radius: number;
+    u_contrast: number;
+    u_originalColors: boolean;
+    u_inverted: boolean;
+    u_grainMixer: number;
+    u_grainOverlay: number;
+    u_grainSize: number;
+    u_type: (typeof HalftoneDotsTypes)[HalftoneDotsType];
+}
+export interface HalftoneDotsParams extends ShaderSizingParams, ShaderMotionParams {
+    image?: HTMLImageElement | string;
+    colorFront?: string;
+    colorBack?: string;
+    size?: number;
+    grid?: HalftoneDotsGrid;
+    radius?: number;
+    contrast?: number;
+    originalColors?: boolean;
+    inverted?: boolean;
+    grainMixer?: number;
+    grainOverlay?: number;
+    grainSize?: number;
+    type?: HalftoneDotsType;
+}
+export declare const HalftoneDotsTypes: {
+    readonly classic: 0;
+    readonly gooey: 1;
+    readonly holes: 2;
+    readonly soft: 3;
+};
+export type HalftoneDotsType = keyof typeof HalftoneDotsTypes;
+export declare const HalftoneDotsGrids: {
+    readonly square: 0;
+    readonly hex: 1;
+};
+export type HalftoneDotsGrid = keyof typeof HalftoneDotsGrids;