@paper-design/shaders 0.0.0-canary.390a3d9

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

@@ -0,0 +1,337 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import {} from "../shader-sizing.js";
+import { declarePI, rotation2, proceduralHash21 } from "../shader-utils.js";
+const imageHalftoneDotsFragmentShader = `#version 300 es
+precision lowp float;
+
+uniform mediump vec2 u_resolution;
+uniform mediump float u_pixelRatio;
+uniform mediump float u_originX;
+uniform mediump float u_originY;
+uniform mediump float u_fit;
+
+uniform mediump float u_scale;
+uniform mediump float u_rotation;
+uniform mediump float u_offsetX;
+uniform mediump float u_offsetY;
+
+uniform float u_time;
+
+uniform vec4 u_colorFront;
+uniform vec4 u_colorBack;
+uniform float u_radius;
+uniform float u_contrast;
+
+uniform sampler2D u_image;
+uniform mediump float u_imageAspectRatio;
+
+uniform float u_size;
+uniform float u_grainMixer;
+uniform float u_grainOverlay;
+uniform bool u_diagonalGrid;
+uniform bool u_originalColors;
+uniform bool u_inverted;
+uniform float u_type;
+
+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);
+}
+
+vec2 getImageUV(vec2 uv, vec2 extraScale) {
+  vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);
+  float r = u_rotation * PI / 180.;
+  mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));
+  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);
+
+  vec2 imageBoxSize;
+  if (u_fit == 1.) {
+    imageBoxSize.x = min(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;
+  } else {
+    imageBoxSize.x = max(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;
+  }
+  imageBoxSize.y = imageBoxSize.x / u_imageAspectRatio;
+  vec2 imageBoxScale = u_resolution.xy / imageBoxSize;
+
+  vec2 imageUV = uv;
+  imageUV *= imageBoxScale;
+  imageUV += boxOrigin * (imageBoxScale - 1.);
+  imageUV += graphicOffset;
+  imageUV /= u_scale;
+  imageUV *= extraScale;
+  imageUV.x *= u_imageAspectRatio;
+  imageUV = graphicRotation * imageUV;
+  imageUV.x /= u_imageAspectRatio;
+
+  imageUV += .5;
+  imageUV.y = 1. - imageUV.y;
+  
+  return imageUV;
+}
+
+float getCircle(vec2 uv, float r) {
+  r = mix(.25 * u_radius, 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 cell = getCell(uv);
+
+  r = mix(.5 * u_radius, 0., r);
+  float rMod = mod(r, .25);
+  
+  float d = length(uv - .5);
+  float aa = fwidth(d);
+  float circle = 1. - smoothstep(rMod - aa, rMod + aa, d);
+  if (r < .25) {
+    return circle;
+  } else {
+    return cell - circle;
+  }
+}
+
+float getGooeyBall(vec2 uv, float r) {
+  float d = length(uv - .5);
+  float sizeRadius = mix((u_diagonalGrid ? .4 : .25) * u_radius, 0., r);
+  d = 1. - sst(0., sizeRadius, d);
+  
+  d = pow(d, 2. + u_radius);
+  return d;
+}
+
+float getSoftBall(vec2 uv, float r) {
+  float d = length(uv - .5);
+  float sizeRadius = clamp(u_radius, 0., 1.);
+  sizeRadius = mix(.5 * sizeRadius, 0., r);
+  d = 1. - lst(0., sizeRadius, d);
+  float powRadius = 1. - lst(0., 2., u_radius);
+  d = pow(d, 4. + 3. * powRadius);
+  return d;
+}
+
+float getUvFrame(vec2 uv) {
+  float aa = 0.0001;
+
+  float left   = smoothstep(0., aa, uv.x);
+  float right  = smoothstep(1., 1. - aa, uv.x);
+  float bottom = smoothstep(0., aa, uv.y);
+  float top    = smoothstep(1., 1. - 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 = u_inverted ? (1. - lum) : lum;
+  return lum;
+}
+
+float getLumBall(vec2 p, vec2 pxSize, vec2 inCellOffset, float contrast, out vec4 ballColor) {
+  p += inCellOffset;
+  vec2 uv_i = floor(p);
+  vec2 uv_f = fract(p);
+  vec2 samplePx = ((uv_i + .5 - inCellOffset) * pxSize) / u_resolution.xy;
+  vec2 samplingUV = getImageUV(samplePx, vec2(1.));
+  float outOfFrame = getUvFrame(samplingUV);
+  
+  float lum = getLumAtPx(samplingUV, contrast);
+  ballColor = texture(u_image, samplingUV);
+  ballColor.rgb *= ballColor.a;
+  ballColor *= outOfFrame;
+
+  float ball = 0.;
+  if (u_type < .5) {
+    // classic
+    ball = getCircle(uv_f, lum);
+  } else if (u_type < 1.5) {
+    // hole
+    ball = getCircleWithHole(uv_f, lum);
+  } else if (u_type < 2.5) {
+    // gooey
+    ball = getGooeyBall(uv_f, lum);
+  }else if (u_type < 3.5) {
+    // soft
+    ball = getSoftBall(uv_f, lum);
+  }
+
+  return ball * outOfFrame;
+}
+
+void main() {
+
+  float stepMultiplier = 1.;
+  if (u_type < 1.) {
+    // classic
+    stepMultiplier = 2.;
+  } else if (u_type > 1.5) {
+    // gooey
+    stepMultiplier = 6.;
+  } 
+  
+  vec2 pxSize = vec2(stepMultiplier) * u_size * u_pixelRatio;
+  if (u_type == 2. && u_diagonalGrid == true) {
+    pxSize *= .6;
+  }
+  float contrast = mix(0., 15., u_contrast);
+
+  vec2 uv = gl_FragCoord.xy - .5 * u_resolution;
+  vec2 p = uv / pxSize;
+  
+  vec2 uvNormalised = uv / u_resolution.xy;
+  vec2 uvOriginal = getImageUV(uvNormalised, vec2(1.));
+  vec4 textureOriginal = texture(u_image, uvOriginal);
+
+  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_diagonalGrid == true) {
+        float rowIndex = floor((y + .5) / stepSize);
+        float colIndex = floor((x + .5) / stepSize);
+        if (stepSize == 1.) {
+          rowIndex = floor(p.y + y + 1.);
+          if (u_type == 2.) {
+            colIndex = floor(p.x + x + 1.);
+          } 
+          if (u_type == 1.) {
+            rowIndex = floor(p.y + y + 1.);
+          }
+        }
+        if (u_type == 2.) {
+          if (mod(rowIndex + colIndex, 2.) == 1.) {
+            continue;
+          }
+        } else {
+          if (mod(rowIndex, 2.) == 1.) {
+            offset.x += .5 * stepSize;
+          }
+        }
+      }
+
+      shape = getLumBall(p, pxSize, offset, contrast, ballColor);
+      totalColor   += ballColor.rgb * shape;
+      totalShape   += shape;
+      totalOpacity += ballColor.a * shape;
+    }
+  }
+  
+  totalShape *= textureOriginal.a;
+
+  const float eps = 1e-4;
+  
+  totalColor /= max(totalShape, eps);
+  totalOpacity /= max(totalShape, eps);
+
+  float finalShape = 0.;
+  if (u_type < 1.5) {
+    finalShape = min(1., totalShape);
+  } else if (u_type < 2.5) {
+    float aa = fwidth(totalShape);
+    float th = .5;
+    finalShape = smoothstep(th - aa, th + aa, totalShape);
+//    finalShape = totalShape;
+  } else if (u_type < 3.5) {
+    finalShape = totalShape;
+  }
+
+  vec2 dudx = dFdx(uvOriginal);
+  vec2 dudy = dFdy(uvOriginal);
+  vec2 grainUV = getImageUV(uvNormalised, .6 / vec2(length(dudx), length(dudy)));
+  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);
+  }
+
+  float rr = valueNoise(rotate(grainUV, 1.) + vec2(3.));
+  float gg = valueNoise(rotate(grainUV, 2.) + vec2(-1.));
+  float bb = valueNoise(grainUV + vec2(5.));
+  vec3 grainColor = vec3(rr, gg, bb);
+  color = mix(color, grainColor, .01 + .5 * u_grainOverlay);
+
+  fragColor = vec4(color, opacity);
+}
+`;
+const ImageHalftoneDotsTypes = {
+  classic: 0,
+  hole: 1,
+  gooey: 2,
+  soft: 3
+};
+export {
+  ImageHalftoneDotsTypes,
+  imageHalftoneDotsFragmentShader
+};
+//# sourceMappingURL=image-halftone-dots.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/image-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\n\n Uniforms:\n - u_colorBack, u_colorFront, u_colorHighlight (RGBA)\n (u_colorHighlight to be the lighdiagonalGrid parts of u_colorFront pixels)\n - size: px size set relative to canvas resolution\n */\n\n// language=GLSL\nexport const imageHalftoneDotsFragmentShader: string = `#version 300 es\nprecision lowp float;\n\nuniform mediump vec2 u_resolution;\nuniform mediump float u_pixelRatio;\nuniform mediump float u_originX;\nuniform mediump float u_originY;\nuniform mediump float u_fit;\n\nuniform mediump float u_scale;\nuniform mediump float u_rotation;\nuniform mediump float u_offsetX;\nuniform mediump float u_offsetY;\n\nuniform float u_time;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\nuniform float u_radius;\nuniform float u_contrast;\n\nuniform sampler2D u_image;\nuniform mediump float u_imageAspectRatio;\n\nuniform float u_size;\nuniform float u_grainMixer;\nuniform float u_grainOverlay;\nuniform bool u_diagonalGrid;\nuniform bool u_originalColors;\nuniform bool u_inverted;\nuniform float u_type;\n\nout vec4 fragColor;\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\nvec2 getImageUV(vec2 uv, vec2 extraScale) {\n  vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);\n  float r = u_rotation * PI / 180.;\n  mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\n  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\n\n  vec2 imageBoxSize;\n  if (u_fit == 1.) {\n    imageBoxSize.x = min(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;\n  } else {\n    imageBoxSize.x = max(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;\n  }\n  imageBoxSize.y = imageBoxSize.x / u_imageAspectRatio;\n  vec2 imageBoxScale = u_resolution.xy / imageBoxSize;\n\n  vec2 imageUV = uv;\n  imageUV *= imageBoxScale;\n  imageUV += boxOrigin * (imageBoxScale - 1.);\n  imageUV += graphicOffset;\n  imageUV /= u_scale;\n  imageUV *= extraScale;\n  imageUV.x *= u_imageAspectRatio;\n  imageUV = graphicRotation * imageUV;\n  imageUV.x /= u_imageAspectRatio;\n\n  imageUV += .5;\n  imageUV.y = 1. - imageUV.y;\n  \n  return imageUV;\n}\n\nfloat getCircle(vec2 uv, float r) {\n  r = mix(.25 * u_radius, 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) {\n  float cell = getCell(uv);\n\n  r = mix(.5 * u_radius, 0., r);\n  float rMod = mod(r, .25);\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 < .25) {\n    return circle;\n  } else {\n    return cell - circle;\n  }\n}\n\nfloat getGooeyBall(vec2 uv, float r) {\n  float d = length(uv - .5);\n  float sizeRadius = mix((u_diagonalGrid ? .4 : .25) * u_radius, 0., r);\n  d = 1. - sst(0., sizeRadius, d);\n  \n  d = pow(d, 2. + u_radius);\n  return d;\n}\n\nfloat getSoftBall(vec2 uv, float r) {\n  float d = length(uv - .5);\n  float sizeRadius = clamp(u_radius, 0., 1.);\n  sizeRadius = mix(.5 * sizeRadius, 0., r);\n  d = 1. - lst(0., sizeRadius, d);\n  float powRadius = 1. - lst(0., 2., u_radius);\n  d = pow(d, 4. + 3. * powRadius);\n  return d;\n}\n\nfloat getUvFrame(vec2 uv) {\n  float aa = 0.0001;\n\n  float left   = smoothstep(0., aa, uv.x);\n  float right  = smoothstep(1., 1. - aa, uv.x);\n  float bottom = smoothstep(0., aa, uv.y);\n  float top    = smoothstep(1., 1. - 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 = texture(u_image, 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 = u_inverted ? (1. - lum) : lum;\n  return lum;\n}\n\nfloat getLumBall(vec2 p, vec2 pxSize, vec2 inCellOffset, float contrast, out vec4 ballColor) {\n  p += inCellOffset;\n  vec2 uv_i = floor(p);\n  vec2 uv_f = fract(p);\n  vec2 samplePx = ((uv_i + .5 - inCellOffset) * pxSize) / u_resolution.xy;\n  vec2 samplingUV = getImageUV(samplePx, vec2(1.));\n  float outOfFrame = getUvFrame(samplingUV);\n  \n  float lum = getLumAtPx(samplingUV, contrast);\n  ballColor = texture(u_image, samplingUV);\n  ballColor.rgb *= ballColor.a;\n  ballColor *= outOfFrame;\n\n  float ball = 0.;\n  if (u_type < .5) {\n    // classic\n    ball = getCircle(uv_f, lum);\n  } else if (u_type < 1.5) {\n    // hole\n    ball = getCircleWithHole(uv_f, lum);\n  } else if (u_type < 2.5) {\n    // gooey\n    ball = getGooeyBall(uv_f, lum);\n  }else if (u_type < 3.5) {\n    // soft\n    ball = getSoftBall(uv_f, lum);\n  }\n\n  return ball * outOfFrame;\n}\n\nvoid main() {\n\n  float stepMultiplier = 1.;\n  if (u_type < 1.) {\n    // classic\n    stepMultiplier = 2.;\n  } else if (u_type > 1.5) {\n    // gooey\n    stepMultiplier = 6.;\n  } \n  \n  vec2 pxSize = vec2(stepMultiplier) * u_size * u_pixelRatio;\n  if (u_type == 2. && u_diagonalGrid == true) {\n    pxSize *= .6;\n  }\n  float contrast = mix(0., 15., u_contrast);\n\n  vec2 uv = gl_FragCoord.xy - .5 * u_resolution;\n  vec2 p = uv / pxSize;\n  \n  vec2 uvNormalised = uv / u_resolution.xy;\n  vec2 uvOriginal = getImageUV(uvNormalised, vec2(1.));\n  vec4 textureOriginal = texture(u_image, uvOriginal);\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_diagonalGrid == true) {\n        float rowIndex = floor((y + .5) / stepSize);\n        float colIndex = floor((x + .5) / stepSize);\n        if (stepSize == 1.) {\n          rowIndex = floor(p.y + y + 1.);\n          if (u_type == 2.) {\n            colIndex = floor(p.x + x + 1.);\n          } \n          if (u_type == 1.) {\n            rowIndex = floor(p.y + y + 1.);\n          }\n        }\n        if (u_type == 2.) {\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(p, pxSize, offset, contrast, ballColor);\n      totalColor   += ballColor.rgb * shape;\n      totalShape   += shape;\n      totalOpacity += ballColor.a * shape;\n    }\n  }\n  \n  totalShape *= textureOriginal.a;\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 < 1.5) {\n    finalShape = min(1., totalShape);\n  } else if (u_type < 2.5) {\n    float aa = fwidth(totalShape);\n    float th = .5;\n    finalShape = smoothstep(th - aa, th + aa, totalShape);\n//    finalShape = totalShape;\n  } else if (u_type < 3.5) {\n    finalShape = totalShape;\n  }\n\n  vec2 dudx = dFdx(uvOriginal);\n  vec2 dudy = dFdy(uvOriginal);\n  vec2 grainUV = getImageUV(uvNormalised, .6 / vec2(length(dudx), length(dudy)));\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  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  float rr = valueNoise(rotate(grainUV, 1.) + vec2(3.));\n  float gg = valueNoise(rotate(grainUV, 2.) + vec2(-1.));\n  float bb = valueNoise(grainUV + vec2(5.));\n  vec3 grainColor = vec3(rr, gg, bb);\n  color = mix(color, grainColor, .01 + .5 * u_grainOverlay);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface ImageHalftoneDotsUniforms 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_diagonalGrid: boolean;\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_type: (typeof ImageHalftoneDotsTypes)[ImageHalftoneDotsType];\n}\n\nexport interface ImageHalftoneDotsParams extends ShaderSizingParams, ShaderMotionParams {\n  image?: HTMLImageElement | string;\n  colorFront?: string;\n  colorBack?: string;\n  size?: number;\n  diagonalGrid?: boolean;\n  radius?: number;\n  contrast?: number;\n  originalColors?: boolean;\n  inverted?: boolean;\n  grainMixer?: number;\n  grainOverlay?: number;\n  type?: ImageHalftoneDotsType;\n}\n\nexport const ImageHalftoneDotsTypes = {\n  classic: 0,\n  hole: 1,\n  gooey: 2,\n  soft: 3,\n} as const;\n\nexport type ImageHalftoneDotsType = keyof typeof ImageHalftoneDotsTypes;\n"],
+  "mappings": ";;;;;AACA,eAAmE;AACnE,SAAS,WAAW,WAAW,wBAAwB;AAYhD,MAAM,kCAA0C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkCrD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0TX,MAAM,yBAAyB;AAAA,EACpC,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AACR;",
+  "names": []
+}

package/dist/shaders/liquid-metal.d.ts

@@ -0,0 +1,66 @@
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
+/**
+ *
+ * Fluid motion imitation applied over user image
+ * (animated stripe pattern getting distorted with shape edges)
+ *
+ * Uniforms:
+ * - u_colorBack, u_colorTint (RGBA)
+ * - u_repetition: density of pattern stripes
+ * - u_softness: blur between stripes
+ * - u_shiftRed & u_shiftBlue: color dispersion between the stripes
+ * - u_distortion: pattern distortion on the whole canvas
+ * - u_contour: distortion power over the shape edges
+ * - u_shape (float used as integer):
+ * ---- 0: canvas-screen rectangle, needs u_worldWidth = u_worldHeight = 0 to be responsive (see vertex shader)
+ * ---- 1: static circle
+ * ---- 2: animated flower-like polar shape
+ * ---- 3: animated metaballs
+ *
+ */
+export declare const liquidMetalFragmentShader: string;
+export declare const POISSON_CONFIG_OPTIMIZED: {
+    measurePerformance: boolean;
+    workingSize: number;
+    iterations: number;
+};
+export declare function toProcessedLiquidMetal(file: File | string): Promise<{
+    imageData: ImageData;
+    pngBlob: Blob;
+}>;
+export interface LiquidMetalUniforms extends ShaderSizingUniforms {
+    u_colorBack: [number, number, number, number];
+    u_colorTint: [number, number, number, number];
+    u_image: HTMLImageElement | string | undefined;
+    u_repetition: number;
+    u_shiftRed: number;
+    u_shiftBlue: number;
+    u_contour: number;
+    u_softness: number;
+    u_distortion: number;
+    u_angle: number;
+    u_shape: (typeof LiquidMetalShapes)[LiquidMetalShape];
+    u_isImage: boolean;
+}
+export interface LiquidMetalParams extends ShaderSizingParams, ShaderMotionParams {
+    colorBack?: string;
+    colorTint?: string;
+    image?: HTMLImageElement | string | undefined;
+    repetition?: number;
+    shiftRed?: number;
+    shiftBlue?: number;
+    contour?: number;
+    softness?: number;
+    distortion?: number;
+    angle?: number;
+    shape?: LiquidMetalShape;
+}
+export declare const LiquidMetalShapes: {
+    readonly none: 0;
+    readonly circle: 1;
+    readonly daisy: 2;
+    readonly diamond: 3;
+    readonly metaballs: 4;
+};
+export type LiquidMetalShape = keyof typeof LiquidMetalShapes;