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

package/dist/shaders/heatmap.js

@@ -0,0 +1,303 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+const heatmapMeta = {
+  maxColorCount: 10
+};
+const heatmapFragmentShader = `#version 300 es
+precision highp float;
+
+in mediump vec2 v_imageUV;
+in mediump vec2 v_objectUV;
+out vec4 fragColor;
+
+uniform sampler2D u_image;
+uniform float u_time;
+uniform mediump float u_imageAspectRatio;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colors[${heatmapMeta.maxColorCount}];
+uniform float u_colorsCount;
+
+uniform float u_angle;
+uniform float u_noise;
+uniform float u_innerGlow;
+uniform float u_outerGlow;
+uniform float u_contour;
+
+#define TWO_PI 6.28318530718
+#define PI 3.14159265358979323846
+
+float getImgFrame(vec2 uv, float th) {
+  float frame = 1.;
+  frame *= smoothstep(0., th, uv.y);
+  frame *= 1. - smoothstep(1. - th, 1., uv.y);
+  frame *= smoothstep(0., th, uv.x);
+  frame *= 1. - smoothstep(1. - th, 1., uv.x);
+  return frame;
+}
+
+float circle(vec2 uv, vec2 c, vec2 r) {
+  return 1. - smoothstep(r[0], r[1], length(uv - c));
+}
+
+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 shadowShape(vec2 uv, float t, float contour) {
+  vec2 scaledUV = uv;
+
+  // base shape tranjectory
+  float posY = mix(-1., 2., t);
+
+  // scaleX when it's moving down
+  scaledUV.y -= .5;
+  float mainCircleScale = sst(0., .8, posY) * lst(1.4, .9, posY);
+  scaledUV *= vec2(1., 1. + 1.5 * mainCircleScale);
+  scaledUV.y += .5;
+
+  // base shape
+  float innerR = .4;
+  float outerR = 1. - .3 * (sst(.1, .2, t) * (1. - sst(.2, .5, t)));
+  float s = circle(scaledUV, vec2(.5, posY - .2), vec2(innerR, outerR));
+  float shapeSizing = sst(.2, .3, t) * sst(.6, .3, t);
+  s = pow(s, 1.4);
+  s *= 1.2;
+
+  // flat gradient to take over the shadow shape
+  float topFlattener = 0.;
+  {
+    float pos = posY - uv.y;
+    float edge = 1.2;
+    topFlattener = lst(-.4, 0., pos) * (1. - sst(.0, edge, pos));
+    topFlattener = pow(topFlattener, 3.);
+    float topFlattenerMixer = (1. - sst(.0, .3, pos));
+    s = mix(topFlattener, s, topFlattenerMixer);
+  }
+
+  // apple right circle
+  {
+    float visibility = sst(.6, .7, t) * (1. - sst(.8, .9, t));
+    float angle = -2. -t * TWO_PI;
+    float rightCircle = circle(uv, vec2(.95 - .2 * cos(angle), .4 - .1 * sin(angle)), vec2(.15, .3));
+    rightCircle *= visibility;
+    s = mix(s, 0., rightCircle);
+  }
+
+  // apple top circle
+  {
+    float topCircle = circle(uv, vec2(.5, .19), vec2(.05, .25));
+    topCircle += 2. * contour * circle(uv, vec2(.5, .19), vec2(.2, .5));
+    float visibility = .55 * sst(.2, .3, t) * (1. - sst(.3, .45, t));
+    topCircle *= visibility;
+    s = mix(s, 0., topCircle);
+  }
+
+  float leafMask = circle(uv, vec2(.53, .13), vec2(.08, .19));
+  leafMask = mix(leafMask, 0., 1. - sst(.4, .54, uv.x));
+  leafMask = mix(0., leafMask, sst(.0, .2, uv.y));
+  leafMask *= (sst(.5, 1.1, posY) * sst(1.5, 1.3, posY));
+  s += leafMask;
+
+  // apple bottom circle
+  {
+    float visibility = sst(.0, .4, t) * (1. - sst(.6, .8, t));
+    s = mix(s, 0., visibility * circle(uv, vec2(.52, .92), vec2(.09, .25)));
+  }
+
+  // random balls that are invisible if apple logo is selected
+  {
+    float pos = sst(.0, .6, t) * (1. - sst(.6, 1., t));
+    s = mix(s, .5, circle(uv, vec2(.0, 1.2 - .5 * pos), vec2(.1, .3)));
+    s = mix(s, .0, circle(uv, vec2(1., .5 + .5 * pos), vec2(.1, .3)));
+
+    s = mix(s, 1., circle(uv, vec2(.95, .2 + .2 * sst(.3, .4, t) * sst(.7, .5, t)), vec2(.07, .22)));
+    s = mix(s, 1., circle(uv, vec2(.95, .2 + .2 * sst(.3, .4, t) * (1. - sst(.5, .7, t))), vec2(.07, .22)));
+    s /= max(1e-4, sst(1., .85, uv.y));
+  }
+
+  s = clamp(0., 1., s);
+  return s;
+}
+
+
+void main() {
+  vec2 uv = v_objectUV + .5;
+  uv.y = 1. - uv.y;
+
+  vec2 imgUV = v_imageUV;
+  imgUV -= .5;
+  imgUV *= 0.5714285714285714;
+  imgUV += .5;
+  float imgSoftFrame = getImgFrame(imgUV, .03);
+
+  vec4 img = texture(u_image, imgUV);
+  if (img.a == 0.) {
+    fragColor = u_colorBack;
+    return;
+  }
+
+  float t = .1 * u_time;
+  t -= .3;
+
+  float tCopy = t + 1. / 3.;
+  float tCopy2 = t + 2. / 3.;
+
+  t = mod(t, 1.);
+  tCopy = mod(tCopy, 1.);
+  tCopy2 = mod(tCopy2, 1.);
+
+  vec2 animationUV = imgUV - vec2(.5);
+  float angle = -u_angle * PI / 180.;
+  float cosA = cos(angle);
+  float sinA = sin(angle);
+  animationUV = vec2(
+  animationUV.x * cosA - animationUV.y * sinA,
+  animationUV.x * sinA + animationUV.y * cosA
+  ) + vec2(.5);
+
+  float shape = img[0];
+  float outerBlur = 1. - mix(1., img[1], shape);
+  float innerBlur = mix(img[1], 0., shape);
+  float contour = mix(img[2], 0., shape);
+
+  outerBlur *= imgSoftFrame;
+
+  float shadow = shadowShape(animationUV, t, innerBlur);
+  float shadowCopy = shadowShape(animationUV, tCopy, innerBlur);
+  float shadowCopy2 = shadowShape(animationUV, tCopy2, innerBlur);
+
+  float inner = .8 + .8 * innerBlur;
+  inner = mix(inner, 0., shadow);
+  inner = mix(inner, 0., shadowCopy);
+  inner = mix(inner, 0., shadowCopy2);
+
+  inner *= mix(0., 2., u_innerGlow);
+
+  inner += (u_contour * 2.) * contour;
+  inner = min(1., inner);
+  inner *= (1. - shape);
+
+  float outer = 0.;
+  {
+    t *= 3.;
+    t = mod(t - .1, 1.);
+
+    outer = .9 * pow(outerBlur, .8);
+    float y = mod(animationUV.y - t, 1.);
+    float animatedMask = sst(.3, .65, y) * (1. - sst(.65, 1., y));
+    animatedMask = .5 + animatedMask;
+    outer *= animatedMask;
+    outer *= mix(0., 5., pow(u_outerGlow, 2.));
+    outer *= imgSoftFrame;
+  }
+
+  inner = pow(inner, 1.2);
+  float heat = clamp(inner + outer, 0., 1.);
+
+  heat += (.005 + .35 * u_noise) * (fract(sin(dot(uv, vec2(12.9898, 78.233))) * 43758.5453123) - .5);
+
+  float mixer = heat * u_colorsCount;
+  vec4 gradient = u_colors[0];
+  gradient.rgb *= gradient.a;
+  float outerShape = 0.;
+  for (int i = 1; i < ${heatmapMeta.maxColorCount + 1}; i++) {
+    if (i > int(u_colorsCount)) break;
+    float m = clamp(mixer - float(i - 1), 0., 1.);
+    if (i == 1) {
+      outerShape = m;
+    }
+    vec4 c = u_colors[i - 1];
+    c.rgb *= c.a;
+    gradient = mix(gradient, c, m);
+  }
+
+  vec3 color = gradient.rgb * outerShape;
+  float opacity = gradient.a * outerShape;
+
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  color = color + bgColor * (1.0 - opacity);
+  opacity = opacity + u_colorBack.a * (1.0 - opacity);
+
+  color += .02 * (fract(sin(dot(uv + 1., vec2(12.9898, 78.233))) * 43758.5453123) - .5);
+
+  fragColor = vec4(color, opacity);
+}
+`;
+function toProcessedHeatmap(file) {
+  const canvas = document.createElement("canvas");
+  const canvasSize = 1e3;
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.crossOrigin = "anonymous";
+    image.addEventListener("load", () => {
+      if (typeof file === "string" ? file.endsWith(".svg") : file.type === "image/svg+xml") {
+        image.width = canvasSize;
+        image.height = canvasSize;
+      }
+      const ratio = image.naturalWidth / image.naturalHeight;
+      const maxBlur = Math.floor(canvasSize * 0.15);
+      const padding = Math.ceil(maxBlur * 2.5);
+      let imgWidth = canvasSize;
+      let imgHeight = canvasSize;
+      if (ratio > 1) {
+        imgHeight = Math.floor(canvasSize / ratio);
+      } else {
+        imgWidth = Math.floor(canvasSize * ratio);
+      }
+      canvas.width = imgWidth + 2 * padding;
+      canvas.height = imgHeight + 2 * padding;
+      const ctx = canvas.getContext("2d", { willReadFrequently: true });
+      if (!ctx) {
+        throw new Error("Failed to get canvas 2d context");
+      }
+      ctx.fillStyle = "white";
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      ctx.filter = "grayscale(100%) blur(" + maxBlur + "px)";
+      ctx.drawImage(image, padding, padding, imgWidth, imgHeight);
+      const bigBlurData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      ctx.filter = "grayscale(100%) blur(" + Math.round(0.12 * maxBlur) + "px)";
+      ctx.drawImage(image, padding, padding, imgWidth, imgHeight);
+      const innerBlurSmallData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      ctx.filter = "grayscale(100%) blur(5px)";
+      ctx.drawImage(image, padding, padding, imgWidth, imgHeight);
+      const contourData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+      let processedImageData = ctx.createImageData(canvas.width, canvas.height);
+      const totalPixels = canvas.width * canvas.height;
+      for (let i = 0; i < totalPixels; i++) {
+        const px = i * 4;
+        processedImageData.data[px] = contourData[px];
+        processedImageData.data[px + 1] = bigBlurData[px];
+        processedImageData.data[px + 2] = innerBlurSmallData[px];
+        processedImageData.data[px + 3] = 255;
+      }
+      ctx.putImageData(processedImageData, 0, 0);
+      canvas.toBlob((blob) => {
+        if (!blob) {
+          reject(new Error("Failed to create PNG blob"));
+          return;
+        }
+        resolve({ blob });
+      }, "image/png");
+    });
+    image.addEventListener("error", () => {
+      reject(new Error("Failed to load image"));
+    });
+    image.src = typeof file === "string" ? file : URL.createObjectURL(file);
+  });
+}
+export {
+  heatmapFragmentShader,
+  heatmapMeta,
+  toProcessedHeatmap
+};
+//# sourceMappingURL=heatmap.js.map

package/dist/shaders/heatmap.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/heatmap.ts"],
+  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport type { ShaderSizingParams, ShaderSizingUniforms } from '../shader-sizing.js';\n\nexport const heatmapMeta = {\n  maxColorCount: 10,\n} as const;\n\n// language=GLSL\nexport const heatmapFragmentShader: string = `#version 300 es\nprecision highp float;\n\nin mediump vec2 v_imageUV;\nin mediump vec2 v_objectUV;\nout vec4 fragColor;\n\nuniform sampler2D u_image;\nuniform float u_time;\nuniform mediump float u_imageAspectRatio;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${heatmapMeta.maxColorCount}];\nuniform float u_colorsCount;\n\nuniform float u_angle;\nuniform float u_noise;\nuniform float u_innerGlow;\nuniform float u_outerGlow;\nuniform float u_contour;\n\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n\nfloat getImgFrame(vec2 uv, float th) {\n  float frame = 1.;\n  frame *= smoothstep(0., th, uv.y);\n  frame *= 1. - smoothstep(1. - th, 1., uv.y);\n  frame *= smoothstep(0., th, uv.x);\n  frame *= 1. - smoothstep(1. - th, 1., uv.x);\n  return frame;\n}\n\nfloat circle(vec2 uv, vec2 c, vec2 r) {\n  return 1. - smoothstep(r[0], r[1], length(uv - c));\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 shadowShape(vec2 uv, float t, float contour) {\n  vec2 scaledUV = uv;\n\n  // base shape tranjectory\n  float posY = mix(-1., 2., t);\n\n  // scaleX when it's moving down\n  scaledUV.y -= .5;\n  float mainCircleScale = sst(0., .8, posY) * lst(1.4, .9, posY);\n  scaledUV *= vec2(1., 1. + 1.5 * mainCircleScale);\n  scaledUV.y += .5;\n\n  // base shape\n  float innerR = .4;\n  float outerR = 1. - .3 * (sst(.1, .2, t) * (1. - sst(.2, .5, t)));\n  float s = circle(scaledUV, vec2(.5, posY - .2), vec2(innerR, outerR));\n  float shapeSizing = sst(.2, .3, t) * sst(.6, .3, t);\n  s = pow(s, 1.4);\n  s *= 1.2;\n\n  // flat gradient to take over the shadow shape\n  float topFlattener = 0.;\n  {\n    float pos = posY - uv.y;\n    float edge = 1.2;\n    topFlattener = lst(-.4, 0., pos) * (1. - sst(.0, edge, pos));\n    topFlattener = pow(topFlattener, 3.);\n    float topFlattenerMixer = (1. - sst(.0, .3, pos));\n    s = mix(topFlattener, s, topFlattenerMixer);\n  }\n\n  // apple right circle\n  {\n    float visibility = sst(.6, .7, t) * (1. - sst(.8, .9, t));\n    float angle = -2. -t * TWO_PI;\n    float rightCircle = circle(uv, vec2(.95 - .2 * cos(angle), .4 - .1 * sin(angle)), vec2(.15, .3));\n    rightCircle *= visibility;\n    s = mix(s, 0., rightCircle);\n  }\n\n  // apple top circle\n  {\n    float topCircle = circle(uv, vec2(.5, .19), vec2(.05, .25));\n    topCircle += 2. * contour * circle(uv, vec2(.5, .19), vec2(.2, .5));\n    float visibility = .55 * sst(.2, .3, t) * (1. - sst(.3, .45, t));\n    topCircle *= visibility;\n    s = mix(s, 0., topCircle);\n  }\n\n  float leafMask = circle(uv, vec2(.53, .13), vec2(.08, .19));\n  leafMask = mix(leafMask, 0., 1. - sst(.4, .54, uv.x));\n  leafMask = mix(0., leafMask, sst(.0, .2, uv.y));\n  leafMask *= (sst(.5, 1.1, posY) * sst(1.5, 1.3, posY));\n  s += leafMask;\n\n  // apple bottom circle\n  {\n    float visibility = sst(.0, .4, t) * (1. - sst(.6, .8, t));\n    s = mix(s, 0., visibility * circle(uv, vec2(.52, .92), vec2(.09, .25)));\n  }\n\n  // random balls that are invisible if apple logo is selected\n  {\n    float pos = sst(.0, .6, t) * (1. - sst(.6, 1., t));\n    s = mix(s, .5, circle(uv, vec2(.0, 1.2 - .5 * pos), vec2(.1, .3)));\n    s = mix(s, .0, circle(uv, vec2(1., .5 + .5 * pos), vec2(.1, .3)));\n\n    s = mix(s, 1., circle(uv, vec2(.95, .2 + .2 * sst(.3, .4, t) * sst(.7, .5, t)), vec2(.07, .22)));\n    s = mix(s, 1., circle(uv, vec2(.95, .2 + .2 * sst(.3, .4, t) * (1. - sst(.5, .7, t))), vec2(.07, .22)));\n    s /= max(1e-4, sst(1., .85, uv.y));\n  }\n\n  s = clamp(0., 1., s);\n  return s;\n}\n\n\nvoid main() {\n  vec2 uv = v_objectUV + .5;\n  uv.y = 1. - uv.y;\n\n  vec2 imgUV = v_imageUV;\n  imgUV -= .5;\n  imgUV *= 0.5714285714285714;\n  imgUV += .5;\n  float imgSoftFrame = getImgFrame(imgUV, .03);\n\n  vec4 img = texture(u_image, imgUV);\n  if (img.a == 0.) {\n    fragColor = u_colorBack;\n    return;\n  }\n\n  float t = .1 * u_time;\n  t -= .3;\n\n  float tCopy = t + 1. / 3.;\n  float tCopy2 = t + 2. / 3.;\n\n  t = mod(t, 1.);\n  tCopy = mod(tCopy, 1.);\n  tCopy2 = mod(tCopy2, 1.);\n\n  vec2 animationUV = imgUV - vec2(.5);\n  float angle = -u_angle * PI / 180.;\n  float cosA = cos(angle);\n  float sinA = sin(angle);\n  animationUV = vec2(\n  animationUV.x * cosA - animationUV.y * sinA,\n  animationUV.x * sinA + animationUV.y * cosA\n  ) + vec2(.5);\n\n  float shape = img[0];\n  float outerBlur = 1. - mix(1., img[1], shape);\n  float innerBlur = mix(img[1], 0., shape);\n  float contour = mix(img[2], 0., shape);\n\n  outerBlur *= imgSoftFrame;\n\n  float shadow = shadowShape(animationUV, t, innerBlur);\n  float shadowCopy = shadowShape(animationUV, tCopy, innerBlur);\n  float shadowCopy2 = shadowShape(animationUV, tCopy2, innerBlur);\n\n  float inner = .8 + .8 * innerBlur;\n  inner = mix(inner, 0., shadow);\n  inner = mix(inner, 0., shadowCopy);\n  inner = mix(inner, 0., shadowCopy2);\n\n  inner *= mix(0., 2., u_innerGlow);\n\n  inner += (u_contour * 2.) * contour;\n  inner = min(1., inner);\n  inner *= (1. - shape);\n\n  float outer = 0.;\n  {\n    t *= 3.;\n    t = mod(t - .1, 1.);\n\n    outer = .9 * pow(outerBlur, .8);\n    float y = mod(animationUV.y - t, 1.);\n    float animatedMask = sst(.3, .65, y) * (1. - sst(.65, 1., y));\n    animatedMask = .5 + animatedMask;\n    outer *= animatedMask;\n    outer *= mix(0., 5., pow(u_outerGlow, 2.));\n    outer *= imgSoftFrame;\n  }\n\n  inner = pow(inner, 1.2);\n  float heat = clamp(inner + outer, 0., 1.);\n\n  heat += (.005 + .35 * u_noise) * (fract(sin(dot(uv, vec2(12.9898, 78.233))) * 43758.5453123) - .5);\n\n  float mixer = heat * u_colorsCount;\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  float outerShape = 0.;\n  for (int i = 1; i < ${heatmapMeta.maxColorCount + 1}; i++) {\n    if (i > int(u_colorsCount)) break;\n    float m = clamp(mixer - float(i - 1), 0., 1.);\n    if (i == 1) {\n      outerShape = m;\n    }\n    vec4 c = u_colors[i - 1];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, m);\n  }\n\n  vec3 color = gradient.rgb * outerShape;\n  float opacity = gradient.a * outerShape;\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1.0 - opacity);\n  opacity = opacity + u_colorBack.a * (1.0 - opacity);\n\n  color += .02 * (fract(sin(dot(uv + 1., vec2(12.9898, 78.233))) * 43758.5453123) - .5);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport function toProcessedHeatmap(file: File | string): Promise<{ blob: Blob }> {\n  const canvas = document.createElement('canvas');\n  const canvasSize = 1000;\n\n  return new Promise((resolve, reject) => {\n    const image = new Image();\n    image.crossOrigin = 'anonymous';\n\n    image.addEventListener('load', () => {\n      if (typeof file === 'string' ? file.endsWith('.svg') : file.type === 'image/svg+xml') {\n        // Force SVG to load at a high fidelity size if it's an SVG\n        image.width = canvasSize;\n        image.height = canvasSize;\n      }\n\n      const ratio = image.naturalWidth / image.naturalHeight;\n\n      const maxBlur = Math.floor(canvasSize * 0.15);\n      const padding = Math.ceil(maxBlur * 2.5);\n      let imgWidth = canvasSize;\n      let imgHeight = canvasSize;\n      if (ratio > 1) {\n        imgHeight = Math.floor(canvasSize / ratio);\n      } else {\n        imgWidth = Math.floor(canvasSize * ratio);\n      }\n\n      canvas.width = imgWidth + 2 * padding;\n      canvas.height = imgHeight + 2 * padding;\n\n      const ctx = canvas.getContext('2d', { willReadFrequently: true });\n      if (!ctx) {\n        throw new Error('Failed to get canvas 2d context');\n      }\n\n      ctx.fillStyle = 'white';\n      ctx.fillRect(0, 0, canvas.width, canvas.height);\n      ctx.filter = 'grayscale(100%) blur(' + maxBlur + 'px)';\n      ctx.drawImage(image, padding, padding, imgWidth, imgHeight);\n      const bigBlurData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;\n\n      ctx.fillRect(0, 0, canvas.width, canvas.height);\n      ctx.filter = 'grayscale(100%) blur(' + Math.round(0.12 * maxBlur) + 'px)';\n      ctx.drawImage(image, padding, padding, imgWidth, imgHeight);\n      const innerBlurSmallData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;\n\n      ctx.fillRect(0, 0, canvas.width, canvas.height);\n      ctx.filter = 'grayscale(100%) blur(5px)';\n      ctx.drawImage(image, padding, padding, imgWidth, imgHeight);\n      const contourData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;\n\n      let processedImageData = ctx.createImageData(canvas.width, canvas.height);\n      const totalPixels = canvas.width * canvas.height;\n      for (let i = 0; i < totalPixels; i++) {\n        const px = i * 4;\n        processedImageData.data[px] = contourData[px]!;\n        processedImageData.data[px + 1] = bigBlurData[px]!;\n        processedImageData.data[px + 2] = innerBlurSmallData[px]!;\n        processedImageData.data[px + 3] = 255;\n      }\n      ctx.putImageData(processedImageData, 0, 0);\n\n      canvas.toBlob((blob) => {\n        if (!blob) {\n          reject(new Error('Failed to create PNG blob'));\n          return;\n        }\n\n        resolve({ blob });\n      }, 'image/png');\n    });\n\n    image.addEventListener('error', () => {\n      reject(new Error('Failed to load image'));\n    });\n\n    image.src = typeof file === 'string' ? file : URL.createObjectURL(file);\n  });\n}\n\nexport interface HeatmapUniforms extends ShaderSizingUniforms {\n  u_image: HTMLImageElement | string;\n  u_contour: number;\n  u_angle: number;\n  u_noise: number;\n  u_innerGlow: number;\n  u_outerGlow: number;\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n}\n\nexport interface HeatmapParams extends ShaderSizingParams, ShaderMotionParams {\n  image: HTMLImageElement | string;\n  contour?: number;\n  angle?: number;\n  noise?: number;\n  innerGlow?: number;\n  outerGlow?: number;\n  colorBack?: string;\n  colors?: string[];\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/shaders/image-dithering.d.ts

@@ -0,0 +1,49 @@
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
+/**
+ * Dithering effect over user texture using 3-color palette
+ * or colors sampled from original image
+ *
+ * Uniforms:
+ * - u_colorBack, u_colorFront, u_colorHighlight (RGBA)
+ *   (u_colorHighlight to be the lightest parts of u_colorFront pixels)
+ * - pxSize: px size set relative to canvas resolution
+ * - u_type (float used as integer)
+ * ---- 1: random dithering
+ * ---- 2: 2x2 Bayer matrix
+ * ---- 3: 4x4 Bayer matrix
+ * ---- 4: 8x8 Bayer matrix
+ * - u_originalColors - switching between 3 colors palette and original image colors
+ * - u_colorSteps - number of colors to use (applies to both color modes)
+ *
+ * Note: pixelization is applied to the shapes BEFORE dithering,
+ *       meaning pixels don't react to scaling and fit
+ */
+export declare const imageDitheringFragmentShader: string;
+export interface ImageDitheringUniforms extends ShaderSizingUniforms {
+    u_image: HTMLImageElement | string;
+    u_colorFront: [number, number, number, number];
+    u_colorBack: [number, number, number, number];
+    u_colorHighlight: [number, number, number, number];
+    u_type: (typeof DitheringTypes)[DitheringType];
+    u_pxSize: number;
+    u_colorSteps: number;
+    u_originalColors: boolean;
+}
+export interface ImageDitheringParams extends ShaderSizingParams, ShaderMotionParams {
+    image: HTMLImageElement | string;
+    colorFront?: string;
+    colorBack?: string;
+    colorHighlight?: string;
+    type?: DitheringType;
+    size?: number;
+    colorSteps?: number;
+    originalColors?: boolean;
+}
+export declare const DitheringTypes: {
+    readonly random: 1;
+    readonly '2x2': 2;
+    readonly '4x4': 3;
+    readonly '8x8': 4;
+};
+export type DitheringType = keyof typeof DitheringTypes;

package/dist/shaders/image-dithering.js

@@ -0,0 +1,163 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { sizingUV } from "../shader-sizing.js";
+import { proceduralHash21 } from "../shader-utils.js";
+const imageDitheringFragmentShader = `#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_worldWidth;
+uniform mediump float u_worldHeight;
+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 vec4 u_colorFront;
+uniform vec4 u_colorBack;
+uniform vec4 u_colorHighlight;
+
+uniform sampler2D u_image;
+uniform mediump float u_imageAspectRatio;
+
+uniform float u_type;
+uniform float u_pxSize;
+uniform bool u_originalColors;
+uniform float u_colorSteps;
+
+out vec4 fragColor;
+
+float getUvFrame(vec2 uv, vec2 px) {
+  float left   = step(-px.x, uv.x);
+  float right  = step(uv.x, 1.);
+  float bottom = step(-px.y, uv.y);
+  float top    = step(uv.y, 1. + px.y);
+
+  return left * right * bottom * top;
+}
+
+${proceduralHash21}
+
+const int bayer2x2[4] = int[4](0, 2, 3, 1);
+const int bayer4x4[16] = int[16](
+  0,  8,  2, 10,
+ 12,  4, 14,  6,
+  3, 11,  1,  9,
+ 15,  7, 13,  5
+);
+
+const int bayer8x8[64] = int[64](
+   0, 32,  8, 40,  2, 34, 10, 42,
+  48, 16, 56, 24, 50, 18, 58, 26,
+  12, 44,  4, 36, 14, 46,  6, 38,
+  60, 28, 52, 20, 62, 30, 54, 22,
+   3, 35, 11, 43,  1, 33,  9, 41,
+  51, 19, 59, 27, 49, 17, 57, 25,
+  15, 47,  7, 39, 13, 45,  5, 37,
+  63, 31, 55, 23, 61, 29, 53, 21
+);
+
+float getBayerValue(vec2 uv, int size) {
+  ivec2 pos = ivec2(fract(uv / float(size)) * float(size));
+  int index = pos.y * size + pos.x;
+
+  if (size == 2) {
+    return float(bayer2x2[index]) / 4.0;
+  } else if (size == 4) {
+    return float(bayer4x4[index]) / 16.0;
+  } else if (size == 8) {
+    return float(bayer8x8[index]) / 64.0;
+  }
+  return 0.0;
+}
+
+
+void main() {
+
+  #define USE_IMAGE_SIZING
+  #define USE_PIXELIZATION
+  ${sizingUV}
+
+  vec2 dithering_uv = pxSizeUv;
+  vec2 ditheringNoise_uv = u_resolution * uv;
+  vec4 image = texture(u_image, imageUV);
+  float frame = getUvFrame(imageUV, pxSize / u_resolution.xy);
+
+  int type = int(floor(u_type));
+  float dithering = 0.0;
+
+  float lum = dot(vec3(.2126, .7152, .0722), image.rgb);
+
+  switch (type) {
+    case 1: {
+      dithering = step(hash21(ditheringNoise_uv), lum);
+    } break;
+    case 2:
+      dithering = getBayerValue(dithering_uv, 2);
+      break;
+    case 3:
+      dithering = getBayerValue(dithering_uv, 4);
+      break;
+    default:
+      dithering = getBayerValue(dithering_uv, 8);
+      break;
+  }
+
+
+  float steps = max(floor(u_colorSteps), 1.);
+  float ditherAmount = 1.0 / (steps);
+
+  vec3 color = vec3(0.0);
+  float opacity = 1.;
+
+  dithering -= .5;
+  float brightness = clamp(lum + dithering * ditherAmount, 0.0, 1.0);
+  brightness = mix(0.0, brightness, frame);
+  float quantLum = floor(brightness * steps + 0.5) / steps;
+
+  if (u_originalColors == true) {
+    vec3 normColor = image.rgb / max(lum, 0.001);
+    color = normColor * quantLum;
+
+    float quantAlpha = floor(image.a * steps + 0.5) / steps;
+    opacity = mix(quantLum, 1., quantAlpha);
+  } 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;
+    vec3 hlColor = u_colorHighlight.rgb * u_colorHighlight.a;
+    float hlOpacity = u_colorHighlight.a;
+
+    fgColor = mix(fgColor, hlColor, step(1.02 - .02 * u_colorSteps, brightness));
+    fgOpacity = mix(fgOpacity, hlOpacity, step(1.02 - .02 * u_colorSteps, brightness));
+
+    color = fgColor * quantLum;
+    opacity = fgOpacity * quantLum;
+    color += bgColor * (1.0 - opacity);
+    opacity += bgOpacity * (1.0 - opacity);
+  }
+
+
+  fragColor = vec4(color, opacity);
+}
+`;
+const DitheringTypes = {
+  "random": 1,
+  "2x2": 2,
+  "4x4": 3,
+  "8x8": 4
+};
+export {
+  DitheringTypes,
+  imageDitheringFragmentShader
+};
+//# sourceMappingURL=image-dithering.js.map

package/dist/shaders/image-dithering.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/image-dithering.ts"],
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingUV, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { proceduralHash21 } from '../shader-utils.js';\n\n/**\n * Dithering effect over user texture using 3-color palette\n * or colors sampled from original image\n *\n * Uniforms:\n * - u_colorBack, u_colorFront, u_colorHighlight (RGBA)\n *   (u_colorHighlight to be the lightest parts of u_colorFront pixels)\n * - pxSize: px size set relative to canvas resolution\n * - u_type (float used as integer)\n * ---- 1: random dithering\n * ---- 2: 2x2 Bayer matrix\n * ---- 3: 4x4 Bayer matrix\n * ---- 4: 8x8 Bayer matrix\n * - u_originalColors - switching between 3 colors palette and original image colors\n * - u_colorSteps - number of colors to use (applies to both color modes)\n *\n * Note: pixelization is applied to the shapes BEFORE dithering,\n *       meaning pixels don't react to scaling and fit\n */\n\n// language=GLSL\nexport const imageDitheringFragmentShader: 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_worldWidth;\nuniform mediump float u_worldHeight;\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 vec4 u_colorFront;\nuniform vec4 u_colorBack;\nuniform vec4 u_colorHighlight;\n\nuniform sampler2D u_image;\nuniform mediump float u_imageAspectRatio;\n\nuniform float u_type;\nuniform float u_pxSize;\nuniform bool u_originalColors;\nuniform float u_colorSteps;\n\nout vec4 fragColor;\n\nfloat getUvFrame(vec2 uv, vec2 px) {\n  float left   = step(-px.x, uv.x);\n  float right  = step(uv.x, 1.);\n  float bottom = step(-px.y, uv.y);\n  float top    = step(uv.y, 1. + px.y);\n\n  return left * right * bottom * top;\n}\n\n${proceduralHash21}\n\nconst int bayer2x2[4] = int[4](0, 2, 3, 1);\nconst int bayer4x4[16] = int[16](\n  0,  8,  2, 10,\n 12,  4, 14,  6,\n  3, 11,  1,  9,\n 15,  7, 13,  5\n);\n\nconst int bayer8x8[64] = int[64](\n   0, 32,  8, 40,  2, 34, 10, 42,\n  48, 16, 56, 24, 50, 18, 58, 26,\n  12, 44,  4, 36, 14, 46,  6, 38,\n  60, 28, 52, 20, 62, 30, 54, 22,\n   3, 35, 11, 43,  1, 33,  9, 41,\n  51, 19, 59, 27, 49, 17, 57, 25,\n  15, 47,  7, 39, 13, 45,  5, 37,\n  63, 31, 55, 23, 61, 29, 53, 21\n);\n\nfloat getBayerValue(vec2 uv, int size) {\n  ivec2 pos = ivec2(fract(uv / float(size)) * float(size));\n  int index = pos.y * size + pos.x;\n\n  if (size == 2) {\n    return float(bayer2x2[index]) / 4.0;\n  } else if (size == 4) {\n    return float(bayer4x4[index]) / 16.0;\n  } else if (size == 8) {\n    return float(bayer8x8[index]) / 64.0;\n  }\n  return 0.0;\n}\n\n\nvoid main() {\n\n  #define USE_IMAGE_SIZING\n  #define USE_PIXELIZATION\n  ${sizingUV}\n\n  vec2 dithering_uv = pxSizeUv;\n  vec2 ditheringNoise_uv = u_resolution * uv;\n  vec4 image = texture(u_image, imageUV);\n  float frame = getUvFrame(imageUV, pxSize / u_resolution.xy);\n\n  int type = int(floor(u_type));\n  float dithering = 0.0;\n\n  float lum = dot(vec3(.2126, .7152, .0722), image.rgb);\n\n  switch (type) {\n    case 1: {\n      dithering = step(hash21(ditheringNoise_uv), lum);\n    } break;\n    case 2:\n      dithering = getBayerValue(dithering_uv, 2);\n      break;\n    case 3:\n      dithering = getBayerValue(dithering_uv, 4);\n      break;\n    default:\n      dithering = getBayerValue(dithering_uv, 8);\n      break;\n  }\n\n\n  float steps = max(floor(u_colorSteps), 1.);\n  float ditherAmount = 1.0 / (steps);\n\n  vec3 color = vec3(0.0);\n  float opacity = 1.;\n\n  dithering -= .5;\n  float brightness = clamp(lum + dithering * ditherAmount, 0.0, 1.0);\n  brightness = mix(0.0, brightness, frame);\n  float quantLum = floor(brightness * steps + 0.5) / steps;\n\n  if (u_originalColors == true) {\n    vec3 normColor = image.rgb / max(lum, 0.001);\n    color = normColor * quantLum;\n\n    float quantAlpha = floor(image.a * steps + 0.5) / steps;\n    opacity = mix(quantLum, 1., quantAlpha);\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    vec3 hlColor = u_colorHighlight.rgb * u_colorHighlight.a;\n    float hlOpacity = u_colorHighlight.a;\n\n    fgColor = mix(fgColor, hlColor, step(1.02 - .02 * u_colorSteps, brightness));\n    fgOpacity = mix(fgOpacity, hlOpacity, step(1.02 - .02 * u_colorSteps, brightness));\n\n    color = fgColor * quantLum;\n    opacity = fgOpacity * quantLum;\n    color += bgColor * (1.0 - opacity);\n    opacity += bgOpacity * (1.0 - opacity);\n  }\n\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface ImageDitheringUniforms extends ShaderSizingUniforms {\n  u_image: HTMLImageElement | string;\n  u_colorFront: [number, number, number, number];\n  u_colorBack: [number, number, number, number];\n  u_colorHighlight: [number, number, number, number];\n  u_type: (typeof DitheringTypes)[DitheringType];\n  u_pxSize: number;\n  u_colorSteps: number;\n  u_originalColors: boolean;\n}\n\nexport interface ImageDitheringParams extends ShaderSizingParams, ShaderMotionParams {\n  image: HTMLImageElement | string;\n  colorFront?: string;\n  colorBack?: string;\n  colorHighlight?: string;\n  type?: DitheringType;\n  size?: number;\n  colorSteps?: number;\n  originalColors?: boolean;\n}\n\nexport const DitheringTypes = {\n  'random': 1,\n  '2x2': 2,\n  '4x4': 3,\n  '8x8': 4,\n} as const;\n\nexport type DitheringType = keyof typeof DitheringTypes;\n"],
+  "mappings": ";;;;;AACA,SAAS,gBAAoE;AAC7E,SAAS,wBAAwB;AAuB1B,MAAM,+BAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAuClD,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,IAwCd,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyFL,MAAM,iBAAiB;AAAA,EAC5B,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;",
+  "names": []
+}

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

@@ -0,0 +1,46 @@
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
+/**
+
+
+ Uniforms:
+ - u_colorBack, u_colorFront, u_colorHighlight (RGBA)
+ (u_colorHighlight to be the lighdiagonalGrid parts of u_colorFront pixels)
+ - size: px size set relative to canvas resolution
+ */
+export declare const imageHalftoneDotsFragmentShader: string;
+export interface ImageHalftoneDotsUniforms extends ShaderSizingUniforms {
+    u_image: HTMLImageElement | string | undefined;
+    u_colorFront: [number, number, number, number];
+    u_colorBack: [number, number, number, number];
+    u_size: number;
+    u_diagonalGrid: boolean;
+    u_radius: number;
+    u_contrast: number;
+    u_originalColors: boolean;
+    u_inverted: boolean;
+    u_grainMixer: number;
+    u_grainOverlay: number;
+    u_type: (typeof ImageHalftoneDotsTypes)[ImageHalftoneDotsType];
+}
+export interface ImageHalftoneDotsParams extends ShaderSizingParams, ShaderMotionParams {
+    image?: HTMLImageElement | string;
+    colorFront?: string;
+    colorBack?: string;
+    size?: number;
+    diagonalGrid?: boolean;
+    radius?: number;
+    contrast?: number;
+    originalColors?: boolean;
+    inverted?: boolean;
+    grainMixer?: number;
+    grainOverlay?: number;
+    type?: ImageHalftoneDotsType;
+}
+export declare const ImageHalftoneDotsTypes: {
+    readonly classic: 0;
+    readonly hole: 1;
+    readonly gooey: 2;
+    readonly soft: 3;
+};
+export type ImageHalftoneDotsType = keyof typeof ImageHalftoneDotsTypes;