@paper-design/shaders 0.0.26 → 0.0.28

package/dist/shader-sizing.d.ts

@@ -0,0 +1,35 @@
+export declare const sizingVariablesDeclaration = "\nin vec2 v_objectUV;\nin vec2 v_responsiveUV;\nin vec2 v_responsiveBoxGivenSize;\nin vec2 v_patternUV;";
+export declare const sizingDebugVariablesDeclaration = "\nin vec2 v_objectBoxSize;\nin vec2 v_objectHelperBox;\nin vec2 v_responsiveBoxSize;\nin vec2 v_responsiveHelperBox;\nin vec2 v_patternBoxSize;\nin vec2 v_patternHelperBox;";
+export declare const sizingUniformsDeclaration = "\nuniform float u_originX;\nuniform float u_originY;\nuniform float u_worldWidth;\nuniform float u_worldHeight;\nuniform float u_fit;\n\nuniform float u_scale;\nuniform float u_rotation;\nuniform float u_offsetX;\nuniform float u_offsetY;";
+export declare const sizingUV = "\n\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  #ifdef USE_PIXELIZATION\n    float pxSize = u_pxSize * u_pixelRatio;\n    vec2 pxSizeUv = gl_FragCoord.xy;\n    pxSizeUv -= .5 * u_resolution;\n    pxSizeUv /= pxSize;\n    vec2 roundedUv = floor(pxSizeUv) * pxSize / u_resolution.xy;    \n    roundedUv += .5;\n    if (u_pxRounded == true) {\n      uv = roundedUv;\n    }  \n  #endif\n  uv -= .5;\n\n  \n  // ===================================================\n  // sizing params shared between objects and patterns\n  \n  vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);\n  vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);\n  givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;\n  vec2 maxBoxSize = vec2(max(u_resolution.x, givenBoxSize.x), max(u_resolution.y, givenBoxSize.y));\n  float r = u_rotation * 3.14159265358979323846 / 180.;\n  mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\n  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\n\n  \n  // ===================================================\n  // Sizing api for objects (graphics with fixed ratio)\n\n  #ifdef USE_OBJECT_SIZING\n    float fixedRatio = 1.;\n    vec2 fixedRatioBoxGivenSize = vec2(\n      (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n      (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n    );\n    vec2 objectBoxSize = vec2(0.);\n    // fit = none\n    objectBoxSize.x = fixedRatio * min(fixedRatioBoxGivenSize.x / fixedRatio, fixedRatioBoxGivenSize.y);\n    if (u_fit == 1.) { // fit = contain\n      objectBoxSize.x = fixedRatio * min(maxBoxSize.x / fixedRatio, maxBoxSize.y);\n    } else if (u_fit == 2.) {  // fit = cover\n      objectBoxSize.x = fixedRatio * max(maxBoxSize.x / fixedRatio, maxBoxSize.y);\n    }\n    objectBoxSize.y = objectBoxSize.x / fixedRatio;\n    vec2 objectWorldScale = u_resolution.xy / objectBoxSize;\n  \n    #ifdef ADD_HELPERS\n      vec2 objectHelperBox = gl_FragCoord.xy / u_resolution.xy;\n      objectHelperBox -= .5;\n      objectHelperBox *= objectWorldScale;\n      objectHelperBox += boxOrigin * (objectWorldScale - 1.);  \n    #endif\n  \n    vec2 objectUV = uv;\n    objectUV *= objectWorldScale;\n    objectUV += boxOrigin * (objectWorldScale - 1.);\n    objectUV += vec2(-u_offsetX, u_offsetY);\n    objectUV /= u_scale;\n    objectUV = graphicRotation * objectUV;\n  #endif\n  \n  // ===================================================\n \n  // ===================================================\n  // Sizing api for patterns (graphics respecting u_worldWidth / u_worldHeight ratio)\n  \n  #ifdef USE_PATTERN_SIZING\n    float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;\n    vec2 patternBoxGivenSize = vec2(\n      (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n      (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n    );\n    vec2 patternBoxSize = vec2(0.);\n    // fit = none\n    patternBoxSize.x = patternBoxRatio * min(patternBoxGivenSize.x / patternBoxRatio, patternBoxGivenSize.y);\n    float patternWorldNoFitBoxWidth = patternBoxSize.x;\n    if (u_fit == 1.) {  // fit = contain\n      patternBoxSize.x = patternBoxRatio * min(maxBoxSize.x / patternBoxRatio, maxBoxSize.y);\n    } else if (u_fit == 2.) {  // fit = cover\n      patternBoxSize.x = patternBoxRatio * max(maxBoxSize.x / patternBoxRatio, maxBoxSize.y);\n    }\n    patternBoxSize.y = patternBoxSize.x / patternBoxRatio;\n    vec2 patternWorldScale = u_resolution.xy / patternBoxSize;\n  \n    #ifdef ADD_HELPERS  \n      vec2 patternHelperBox = gl_FragCoord.xy / u_resolution.xy;\n      patternHelperBox -= .5;\n      patternHelperBox *= patternWorldScale;\n      patternHelperBox += boxOrigin * (patternWorldScale - 1.);  \n    #endif\n  \n    vec2 patternUV = uv;\n    patternUV += vec2(-u_offsetX, u_offsetY) / patternWorldScale;\n    patternUV += boxOrigin;\n    patternUV -= boxOrigin / patternWorldScale;\n    patternUV *= u_resolution.xy;\n    patternUV /= u_pixelRatio;\n    if (u_fit > 0.) {\n      patternUV *= (patternWorldNoFitBoxWidth / patternBoxSize.x);\n    }\n    patternUV /= u_scale;\n    patternUV = graphicRotation * patternUV;\n    patternUV += boxOrigin / patternWorldScale;\n    patternUV -= boxOrigin;\n    patternUV += .5;\n  #endif\n";
+export declare const drawSizingHelpers = "\n  vec2 worldBoxDist = abs(helperBox);\n  float boxStroke = (step(max(worldBoxDist.x, worldBoxDist.y), .5) - step(max(worldBoxDist.x, worldBoxDist.y), .495));\n  color.rgb = mix(color.rgb, vec3(1., 0., 0.), boxStroke);\n  opacity += boxStroke;\n\n  vec2 boxOriginCopy = vec2(.5 - u_originX, u_originY - .5);\n  vec2 boxOriginDist = helperBox + boxOriginCopy;\n  boxOriginDist.x *= (boxSize.x / boxSize.y);\n  float boxOriginPoint = 1. - smoothstep(0., .05, length(boxOriginDist));\n  \n  vec2 graphicOriginPointDist = helperBox + vec2(-u_offsetX, u_offsetY);\n  graphicOriginPointDist.x *= (boxSize.x / boxSize.y);\n  float graphicOriginPoint = 1. - smoothstep(0., .05, length(graphicOriginPointDist));\n  \n  color.rgb = mix(color.rgb, vec3(0., 1., 0.), boxOriginPoint);\n  opacity += boxOriginPoint;\n  color.rgb = mix(color.rgb, vec3(0., 0., 1.), graphicOriginPoint);\n  opacity += graphicOriginPoint;\n";
+export interface ShaderSizingUniforms {
+    u_fit: (typeof ShaderFitOptions)[ShaderFit];
+    u_scale: number;
+    u_rotation: number;
+    u_originX: number;
+    u_originY: number;
+    u_offsetX: number;
+    u_offsetY: number;
+    u_worldWidth: number;
+    u_worldHeight: number;
+}
+export interface ShaderSizingParams {
+    fit?: 'none' | 'contain' | 'cover';
+    scale?: number;
+    rotation?: number;
+    originX?: number;
+    originY?: number;
+    offsetX?: number;
+    offsetY?: number;
+    worldWidth?: number;
+    worldHeight?: number;
+}
+export declare const defaultObjectSizing: Required<ShaderSizingParams>;
+export declare const defaultPatternSizing: Required<ShaderSizingParams>;
+export declare const ShaderFitOptions: {
+    readonly none: 0;
+    readonly contain: 1;
+    readonly cover: 2;
+};
+export type ShaderFit = keyof typeof ShaderFitOptions;

package/dist/shader-sizing.js

@@ -0,0 +1,196 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+const sizingVariablesDeclaration = `
+in vec2 v_objectUV;
+in vec2 v_responsiveUV;
+in vec2 v_responsiveBoxGivenSize;
+in vec2 v_patternUV;`;
+const sizingDebugVariablesDeclaration = `
+in vec2 v_objectBoxSize;
+in vec2 v_objectHelperBox;
+in vec2 v_responsiveBoxSize;
+in vec2 v_responsiveHelperBox;
+in vec2 v_patternBoxSize;
+in vec2 v_patternHelperBox;`;
+const sizingUniformsDeclaration = `
+uniform float u_originX;
+uniform float u_originY;
+uniform float u_worldWidth;
+uniform float u_worldHeight;
+uniform float u_fit;
+
+uniform float u_scale;
+uniform float u_rotation;
+uniform float u_offsetX;
+uniform float u_offsetY;`;
+const sizingUV = `
+
+  vec2 uv = gl_FragCoord.xy / u_resolution.xy;
+  #ifdef USE_PIXELIZATION
+    float pxSize = u_pxSize * u_pixelRatio;
+    vec2 pxSizeUv = gl_FragCoord.xy;
+    pxSizeUv -= .5 * u_resolution;
+    pxSizeUv /= pxSize;
+    vec2 roundedUv = floor(pxSizeUv) * pxSize / u_resolution.xy;    
+    roundedUv += .5;
+    if (u_pxRounded == true) {
+      uv = roundedUv;
+    }  
+  #endif
+  uv -= .5;
+
+  
+  // ===================================================
+  // sizing params shared between objects and patterns
+  
+  vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);
+  vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);
+  givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;
+  vec2 maxBoxSize = vec2(max(u_resolution.x, givenBoxSize.x), max(u_resolution.y, givenBoxSize.y));
+  float r = u_rotation * 3.14159265358979323846 / 180.;
+  mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));
+  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);
+
+  
+  // ===================================================
+  // Sizing api for objects (graphics with fixed ratio)
+
+  #ifdef USE_OBJECT_SIZING
+    float fixedRatio = 1.;
+    vec2 fixedRatioBoxGivenSize = vec2(
+      (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
+      (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
+    );
+    vec2 objectBoxSize = vec2(0.);
+    // fit = none
+    objectBoxSize.x = fixedRatio * min(fixedRatioBoxGivenSize.x / fixedRatio, fixedRatioBoxGivenSize.y);
+    if (u_fit == 1.) { // fit = contain
+      objectBoxSize.x = fixedRatio * min(maxBoxSize.x / fixedRatio, maxBoxSize.y);
+    } else if (u_fit == 2.) {  // fit = cover
+      objectBoxSize.x = fixedRatio * max(maxBoxSize.x / fixedRatio, maxBoxSize.y);
+    }
+    objectBoxSize.y = objectBoxSize.x / fixedRatio;
+    vec2 objectWorldScale = u_resolution.xy / objectBoxSize;
+  
+    #ifdef ADD_HELPERS
+      vec2 objectHelperBox = gl_FragCoord.xy / u_resolution.xy;
+      objectHelperBox -= .5;
+      objectHelperBox *= objectWorldScale;
+      objectHelperBox += boxOrigin * (objectWorldScale - 1.);  
+    #endif
+  
+    vec2 objectUV = uv;
+    objectUV *= objectWorldScale;
+    objectUV += boxOrigin * (objectWorldScale - 1.);
+    objectUV += vec2(-u_offsetX, u_offsetY);
+    objectUV /= u_scale;
+    objectUV = graphicRotation * objectUV;
+  #endif
+  
+  // ===================================================
+ 
+  // ===================================================
+  // Sizing api for patterns (graphics respecting u_worldWidth / u_worldHeight ratio)
+  
+  #ifdef USE_PATTERN_SIZING
+    float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;
+    vec2 patternBoxGivenSize = vec2(
+      (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
+      (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
+    );
+    vec2 patternBoxSize = vec2(0.);
+    // fit = none
+    patternBoxSize.x = patternBoxRatio * min(patternBoxGivenSize.x / patternBoxRatio, patternBoxGivenSize.y);
+    float patternWorldNoFitBoxWidth = patternBoxSize.x;
+    if (u_fit == 1.) {  // fit = contain
+      patternBoxSize.x = patternBoxRatio * min(maxBoxSize.x / patternBoxRatio, maxBoxSize.y);
+    } else if (u_fit == 2.) {  // fit = cover
+      patternBoxSize.x = patternBoxRatio * max(maxBoxSize.x / patternBoxRatio, maxBoxSize.y);
+    }
+    patternBoxSize.y = patternBoxSize.x / patternBoxRatio;
+    vec2 patternWorldScale = u_resolution.xy / patternBoxSize;
+  
+    #ifdef ADD_HELPERS  
+      vec2 patternHelperBox = gl_FragCoord.xy / u_resolution.xy;
+      patternHelperBox -= .5;
+      patternHelperBox *= patternWorldScale;
+      patternHelperBox += boxOrigin * (patternWorldScale - 1.);  
+    #endif
+  
+    vec2 patternUV = uv;
+    patternUV += vec2(-u_offsetX, u_offsetY) / patternWorldScale;
+    patternUV += boxOrigin;
+    patternUV -= boxOrigin / patternWorldScale;
+    patternUV *= u_resolution.xy;
+    patternUV /= u_pixelRatio;
+    if (u_fit > 0.) {
+      patternUV *= (patternWorldNoFitBoxWidth / patternBoxSize.x);
+    }
+    patternUV /= u_scale;
+    patternUV = graphicRotation * patternUV;
+    patternUV += boxOrigin / patternWorldScale;
+    patternUV -= boxOrigin;
+    patternUV += .5;
+  #endif
+`;
+const drawSizingHelpers = `
+  vec2 worldBoxDist = abs(helperBox);
+  float boxStroke = (step(max(worldBoxDist.x, worldBoxDist.y), .5) - step(max(worldBoxDist.x, worldBoxDist.y), .495));
+  color.rgb = mix(color.rgb, vec3(1., 0., 0.), boxStroke);
+  opacity += boxStroke;
+
+  vec2 boxOriginCopy = vec2(.5 - u_originX, u_originY - .5);
+  vec2 boxOriginDist = helperBox + boxOriginCopy;
+  boxOriginDist.x *= (boxSize.x / boxSize.y);
+  float boxOriginPoint = 1. - smoothstep(0., .05, length(boxOriginDist));
+  
+  vec2 graphicOriginPointDist = helperBox + vec2(-u_offsetX, u_offsetY);
+  graphicOriginPointDist.x *= (boxSize.x / boxSize.y);
+  float graphicOriginPoint = 1. - smoothstep(0., .05, length(graphicOriginPointDist));
+  
+  color.rgb = mix(color.rgb, vec3(0., 1., 0.), boxOriginPoint);
+  opacity += boxOriginPoint;
+  color.rgb = mix(color.rgb, vec3(0., 0., 1.), graphicOriginPoint);
+  opacity += graphicOriginPoint;
+`;
+const defaultObjectSizing = {
+  fit: "contain",
+  scale: 1,
+  rotation: 0,
+  offsetX: 0,
+  offsetY: 0,
+  originX: 0.5,
+  originY: 0.5,
+  worldWidth: 0,
+  worldHeight: 0
+};
+const defaultPatternSizing = {
+  fit: "none",
+  scale: 1,
+  rotation: 0,
+  offsetX: 0,
+  offsetY: 0,
+  originX: 0.5,
+  originY: 0.5,
+  worldWidth: 0,
+  worldHeight: 0
+};
+const ShaderFitOptions = {
+  none: 0,
+  contain: 1,
+  cover: 2
+};
+export {
+  ShaderFitOptions,
+  defaultObjectSizing,
+  defaultPatternSizing,
+  drawSizingHelpers,
+  sizingDebugVariablesDeclaration,
+  sizingUV,
+  sizingUniformsDeclaration,
+  sizingVariablesDeclaration
+};
+//# sourceMappingURL=shader-sizing.js.map

package/dist/shader-sizing.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/shader-sizing.ts"],
+  "sourcesContent": ["/*\n ===================================================================\n The space coordinates passed from the vertex shader.\n\n `sizingVariablesDeclaration` must be included in every fragment\n shader\u2014unless we want to apply sizing to the coordinates directly\n in the fragment shader.\n\n So far, the only exception is when we need to apply pixelization\n before sizing (e.g., to make dithering pixels independent of sizing).\n*/\nexport const sizingVariablesDeclaration = `\nin vec2 v_objectUV;\nin vec2 v_responsiveUV;\nin vec2 v_responsiveBoxGivenSize;\nin vec2 v_patternUV;`;\n\n/*\n ===================================================================\n Additional variables used only for drawing a sizing overlay.\n*/\nexport const sizingDebugVariablesDeclaration = `\nin vec2 v_objectBoxSize;\nin vec2 v_objectHelperBox;\nin vec2 v_responsiveBoxSize;\nin vec2 v_responsiveHelperBox;\nin vec2 v_patternBoxSize;\nin vec2 v_patternHelperBox;`;\n\n/*\n ===================================================================\n In most cases, sizing UNIFORMS are used only in the vertex shader.\n But there are cases where we need to pass them to the fragment shader\n as well:\n  - dithering pixelization where all the sizing happens in fragment\n  - drawing the sizing helpers\n*/\nexport const sizingUniformsDeclaration = `\nuniform float u_originX;\nuniform float u_originY;\nuniform float u_worldWidth;\nuniform float u_worldHeight;\nuniform float u_fit;\n\nuniform float u_scale;\nuniform float u_rotation;\nuniform float u_offsetX;\nuniform float u_offsetY;`;\n\n/*\n ===================================================================\n In most cases, sizing TRANSFORMS are applied in the vertex shader.\n For exceptions (e.g., dithering pixelization), the operations below\n need to be included in the fragment shader instead.\n\n Currently, only `objectUV` and `patternUV` are supported.\n The transforms are identical to those in the vertex shader,\n except for the `USE_PIXELIZATION` part.\n*/\nexport const sizingUV = `\n\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  #ifdef USE_PIXELIZATION\n    float pxSize = u_pxSize * u_pixelRatio;\n    vec2 pxSizeUv = gl_FragCoord.xy;\n    pxSizeUv -= .5 * u_resolution;\n    pxSizeUv /= pxSize;\n    vec2 roundedUv = floor(pxSizeUv) * pxSize / u_resolution.xy;    \n    roundedUv += .5;\n    if (u_pxRounded == true) {\n      uv = roundedUv;\n    }  \n  #endif\n  uv -= .5;\n\n  \n  // ===================================================\n  // sizing params shared between objects and patterns\n  \n  vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);\n  vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);\n  givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;\n  vec2 maxBoxSize = vec2(max(u_resolution.x, givenBoxSize.x), max(u_resolution.y, givenBoxSize.y));\n  float r = u_rotation * 3.14159265358979323846 / 180.;\n  mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\n  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\n\n  \n  // ===================================================\n  // Sizing api for objects (graphics with fixed ratio)\n\n  #ifdef USE_OBJECT_SIZING\n    float fixedRatio = 1.;\n    vec2 fixedRatioBoxGivenSize = vec2(\n      (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n      (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n    );\n    vec2 objectBoxSize = vec2(0.);\n    // fit = none\n    objectBoxSize.x = fixedRatio * min(fixedRatioBoxGivenSize.x / fixedRatio, fixedRatioBoxGivenSize.y);\n    if (u_fit == 1.) { // fit = contain\n      objectBoxSize.x = fixedRatio * min(maxBoxSize.x / fixedRatio, maxBoxSize.y);\n    } else if (u_fit == 2.) {  // fit = cover\n      objectBoxSize.x = fixedRatio * max(maxBoxSize.x / fixedRatio, maxBoxSize.y);\n    }\n    objectBoxSize.y = objectBoxSize.x / fixedRatio;\n    vec2 objectWorldScale = u_resolution.xy / objectBoxSize;\n  \n    #ifdef ADD_HELPERS\n      vec2 objectHelperBox = gl_FragCoord.xy / u_resolution.xy;\n      objectHelperBox -= .5;\n      objectHelperBox *= objectWorldScale;\n      objectHelperBox += boxOrigin * (objectWorldScale - 1.);  \n    #endif\n  \n    vec2 objectUV = uv;\n    objectUV *= objectWorldScale;\n    objectUV += boxOrigin * (objectWorldScale - 1.);\n    objectUV += vec2(-u_offsetX, u_offsetY);\n    objectUV /= u_scale;\n    objectUV = graphicRotation * objectUV;\n  #endif\n  \n  // ===================================================\n \n  // ===================================================\n  // Sizing api for patterns (graphics respecting u_worldWidth / u_worldHeight ratio)\n  \n  #ifdef USE_PATTERN_SIZING\n    float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;\n    vec2 patternBoxGivenSize = vec2(\n      (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n      (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n    );\n    vec2 patternBoxSize = vec2(0.);\n    // fit = none\n    patternBoxSize.x = patternBoxRatio * min(patternBoxGivenSize.x / patternBoxRatio, patternBoxGivenSize.y);\n    float patternWorldNoFitBoxWidth = patternBoxSize.x;\n    if (u_fit == 1.) {  // fit = contain\n      patternBoxSize.x = patternBoxRatio * min(maxBoxSize.x / patternBoxRatio, maxBoxSize.y);\n    } else if (u_fit == 2.) {  // fit = cover\n      patternBoxSize.x = patternBoxRatio * max(maxBoxSize.x / patternBoxRatio, maxBoxSize.y);\n    }\n    patternBoxSize.y = patternBoxSize.x / patternBoxRatio;\n    vec2 patternWorldScale = u_resolution.xy / patternBoxSize;\n  \n    #ifdef ADD_HELPERS  \n      vec2 patternHelperBox = gl_FragCoord.xy / u_resolution.xy;\n      patternHelperBox -= .5;\n      patternHelperBox *= patternWorldScale;\n      patternHelperBox += boxOrigin * (patternWorldScale - 1.);  \n    #endif\n  \n    vec2 patternUV = uv;\n    patternUV += vec2(-u_offsetX, u_offsetY) / patternWorldScale;\n    patternUV += boxOrigin;\n    patternUV -= boxOrigin / patternWorldScale;\n    patternUV *= u_resolution.xy;\n    patternUV /= u_pixelRatio;\n    if (u_fit > 0.) {\n      patternUV *= (patternWorldNoFitBoxWidth / patternBoxSize.x);\n    }\n    patternUV /= u_scale;\n    patternUV = graphicRotation * patternUV;\n    patternUV += boxOrigin / patternWorldScale;\n    patternUV -= boxOrigin;\n    patternUV += .5;\n  #endif\n`;\n\n/*\n ===================================================================\n Helpers used to draw the sizing (box, box origin and graphic origin)\n over the shader. Can be used with both vertex sizing and vector sizing\n\n helperBox and boxSize should be defined before inserting the code\n*/\nexport const drawSizingHelpers = `\n  vec2 worldBoxDist = abs(helperBox);\n  float boxStroke = (step(max(worldBoxDist.x, worldBoxDist.y), .5) - step(max(worldBoxDist.x, worldBoxDist.y), .495));\n  color.rgb = mix(color.rgb, vec3(1., 0., 0.), boxStroke);\n  opacity += boxStroke;\n\n  vec2 boxOriginCopy = vec2(.5 - u_originX, u_originY - .5);\n  vec2 boxOriginDist = helperBox + boxOriginCopy;\n  boxOriginDist.x *= (boxSize.x / boxSize.y);\n  float boxOriginPoint = 1. - smoothstep(0., .05, length(boxOriginDist));\n  \n  vec2 graphicOriginPointDist = helperBox + vec2(-u_offsetX, u_offsetY);\n  graphicOriginPointDist.x *= (boxSize.x / boxSize.y);\n  float graphicOriginPoint = 1. - smoothstep(0., .05, length(graphicOriginPointDist));\n  \n  color.rgb = mix(color.rgb, vec3(0., 1., 0.), boxOriginPoint);\n  opacity += boxOriginPoint;\n  color.rgb = mix(color.rgb, vec3(0., 0., 1.), graphicOriginPoint);\n  opacity += graphicOriginPoint;\n`;\n\nexport interface ShaderSizingUniforms {\n  u_fit: (typeof ShaderFitOptions)[ShaderFit];\n  u_scale: number;\n  u_rotation: number;\n  u_originX: number;\n  u_originY: number;\n  u_offsetX: number;\n  u_offsetY: number;\n  u_worldWidth: number;\n  u_worldHeight: number;\n}\n\nexport interface ShaderSizingParams {\n  fit?: 'none' | 'contain' | 'cover';\n  scale?: number;\n  rotation?: number;\n  originX?: number;\n  originY?: number;\n  offsetX?: number;\n  offsetY?: number;\n  worldWidth?: number;\n  worldHeight?: number;\n}\n\nexport const defaultObjectSizing: Required<ShaderSizingParams> = {\n  fit: 'contain',\n  scale: 1,\n  rotation: 0,\n  offsetX: 0,\n  offsetY: 0,\n  originX: 0.5,\n  originY: 0.5,\n  worldWidth: 0,\n  worldHeight: 0,\n};\n\nexport const defaultPatternSizing: Required<ShaderSizingParams> = {\n  fit: 'none',\n  scale: 1,\n  rotation: 0,\n  offsetX: 0,\n  offsetY: 0,\n  originX: 0.5,\n  originY: 0.5,\n  worldWidth: 0,\n  worldHeight: 0,\n};\n\nexport const ShaderFitOptions = {\n  none: 0,\n  contain: 1,\n  cover: 2,\n} as const;\n\nexport type ShaderFit = keyof typeof ShaderFitOptions;\n"],
+  "mappings": ";;;;;AAWO,MAAM,6BAA6B;AAAA;AAAA;AAAA;AAAA;AAUnC,MAAM,kCAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBxC,MAAM,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBlC,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsHjB,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6C1B,MAAM,sBAAoD;AAAA,EAC/D,KAAK;AAAA,EACL,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,aAAa;AACf;AAEO,MAAM,uBAAqD;AAAA,EAChE,KAAK;AAAA,EACL,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,aAAa;AACf;AAEO,MAAM,mBAAmB;AAAA,EAC9B,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AACT;",
+  "names": []
+}

package/dist/shader-utils.d.ts

@@ -0,0 +1,5 @@
+export declare const declarePI = "\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n";
+export declare const declareRotate = "\nvec2 rotate(vec2 uv, float th) {\n  return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;\n}\n";
+export declare const declareRandom = "\nfloat random(vec2 st) {\n  return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);\n}\n";
+export declare const colorBandingFix = "\n  color += 1. / 256. * (fract(sin(dot(.014 * gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453123) - .5);\n";
+export declare const declareSimplexNoise = "\nvec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }\nfloat snoise(vec2 v) {\n  const vec4 C = vec4(0.211324865405187, 0.366025403784439,\n    -0.577350269189626, 0.024390243902439);\n  vec2 i = floor(v + dot(v, C.yy));\n  vec2 x0 = v - i + dot(i, C.xx);\n  vec2 i1;\n  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n  vec4 x12 = x0.xyxy + C.xxzz;\n  x12.xy -= i1;\n  i = mod(i, 289.0);\n  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))\n    + i.x + vec3(0.0, i1.x, 1.0));\n  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy),\n      dot(x12.zw, x12.zw)), 0.0);\n  m = m * m;\n  m = m * m;\n  vec3 x = 2.0 * fract(p * C.www) - 1.0;\n  vec3 h = abs(x) - 0.5;\n  vec3 ox = floor(x + 0.5);\n  vec3 a0 = x - ox;\n  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);\n  vec3 g;\n  g.x = a0.x * x0.x + h.x * x0.y;\n  g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n  return 130.0 * dot(m, g);\n}\n";

package/dist/shader-utils.js

@@ -0,0 +1,59 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+const declarePI = `
+#define TWO_PI 6.28318530718
+#define PI 3.14159265358979323846
+`;
+const declareRotate = `
+vec2 rotate(vec2 uv, float th) {
+  return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;
+}
+`;
+const declareRandom = `
+float random(vec2 st) {
+  return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
+}
+`;
+const colorBandingFix = `
+  color += 1. / 256. * (fract(sin(dot(.014 * gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453123) - .5);
+`;
+const declareSimplexNoise = `
+vec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }
+float snoise(vec2 v) {
+  const vec4 C = vec4(0.211324865405187, 0.366025403784439,
+    -0.577350269189626, 0.024390243902439);
+  vec2 i = floor(v + dot(v, C.yy));
+  vec2 x0 = v - i + dot(i, C.xx);
+  vec2 i1;
+  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+  vec4 x12 = x0.xyxy + C.xxzz;
+  x12.xy -= i1;
+  i = mod(i, 289.0);
+  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))
+    + i.x + vec3(0.0, i1.x, 1.0));
+  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy),
+      dot(x12.zw, x12.zw)), 0.0);
+  m = m * m;
+  m = m * m;
+  vec3 x = 2.0 * fract(p * C.www) - 1.0;
+  vec3 h = abs(x) - 0.5;
+  vec3 ox = floor(x + 0.5);
+  vec3 a0 = x - ox;
+  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);
+  vec3 g;
+  g.x = a0.x * x0.x + h.x * x0.y;
+  g.yz = a0.yz * x12.xz + h.yz * x12.yw;
+  return 130.0 * dot(m, g);
+}
+`;
+export {
+  colorBandingFix,
+  declarePI,
+  declareRandom,
+  declareRotate,
+  declareSimplexNoise
+};
+//# sourceMappingURL=shader-utils.js.map

package/dist/shader-utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/shader-utils.ts"],
+  "sourcesContent": ["export const declarePI = `\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n`;\n\nexport const declareRotate = `\nvec2 rotate(vec2 uv, float th) {\n  return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;\n}\n`;\n\nexport const declareRandom = `\nfloat random(vec2 st) {\n  return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);\n}\n`;\n\n// It does use the standard random function but we don't call it to keep\n// colorBandingFix insertion independent from declareRandom\nexport const colorBandingFix = `\n  color += 1. / 256. * (fract(sin(dot(.014 * gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453123) - .5);\n`;\n\nexport const declareSimplexNoise = `\nvec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }\nfloat snoise(vec2 v) {\n  const vec4 C = vec4(0.211324865405187, 0.366025403784439,\n    -0.577350269189626, 0.024390243902439);\n  vec2 i = floor(v + dot(v, C.yy));\n  vec2 x0 = v - i + dot(i, C.xx);\n  vec2 i1;\n  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n  vec4 x12 = x0.xyxy + C.xxzz;\n  x12.xy -= i1;\n  i = mod(i, 289.0);\n  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))\n    + i.x + vec3(0.0, i1.x, 1.0));\n  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy),\n      dot(x12.zw, x12.zw)), 0.0);\n  m = m * m;\n  m = m * m;\n  vec3 x = 2.0 * fract(p * C.www) - 1.0;\n  vec3 h = abs(x) - 0.5;\n  vec3 ox = floor(x + 0.5);\n  vec3 a0 = x - ox;\n  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);\n  vec3 g;\n  g.x = a0.x * x0.x + h.x * x0.y;\n  g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n  return 130.0 * dot(m, g);\n}\n`;\n"],
+  "mappings": ";;;;;AAAO,MAAM,YAAY;AAAA;AAAA;AAAA;AAKlB,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAMtB,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAQtB,MAAM,kBAAkB;AAAA;AAAA;AAIxB,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/shaders/dithering.d.ts

@@ -0,0 +1,47 @@
+import type { ShaderMotionParams } from '../shader-mount';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';
+/**
+ * Dithering Fragment Shader by Ksenia Kondrashova
+ * Applies dithering (4 dithering types available) over the
+ * abstract shapes animation (7 animated shapes available)
+ *
+ * Uniforms include:
+ * - u_color1: background color, RGBA
+ * - u_color2: pixels color, RGBA
+ *
+ * - u_shape (float, used as int, 1 to 7):
+ *  --- shape = 1: Simplex noise pattern
+ *  --- shape = 2: Warp noise pattern
+ *  --- shape = 3: Columns if dots moving vertically
+ *  --- shape = 4: Sine wave
+ *  --- shape = 5: Ripple effect
+ *  --- shape = 6: Swirl animation
+ *  --- shape = 7: Rotating sphere
+ *
+ *  - u_type (float, used as int, 1 to 4):
+ *  --- type = 1: Random dithering
+ *  --- type = 2: 2x2 Bayer matrix
+ *  --- type = 3: 4x4 Bayer matrix
+ *  --- type = 4: 8x8 Bayer matrix
+ *
+ * - pxSize (float), relative to canvas resolution
+ * - u_pxRounded (bool)
+ *
+ */
+export declare const ditheringFragmentShader: string;
+export interface DitheringUniforms extends ShaderSizingUniforms {
+    u_color1: [number, number, number, number];
+    u_color2: [number, number, number, number];
+    u_shape: number;
+    u_type: number;
+    u_pxSize: number;
+    u_pxRounded: boolean;
+}
+export interface DitheringParams extends ShaderSizingParams, ShaderMotionParams {
+    color1?: string;
+    color2?: string;
+    shape?: number;
+    type?: number;
+    pxSize?: number;
+    pxRounded?: boolean;
+}

package/dist/shaders/dithering.js

@@ -0,0 +1,197 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import {
+  sizingUniformsDeclaration,
+  sizingUV,
+  drawSizingHelpers
+} from "../shader-sizing";
+import { declareSimplexNoise, declarePI, declareRandom } from "../shader-utils";
+const ditheringFragmentShader = `#version 300 es
+precision highp float;
+
+uniform float u_time;
+uniform vec2 u_resolution;
+uniform float u_pixelRatio;
+
+${sizingUniformsDeclaration}
+
+uniform vec4 u_color1;
+uniform vec4 u_color2;
+uniform float u_shape;
+uniform float u_type;
+uniform float u_pxSize;
+uniform bool u_pxRounded;
+
+out vec4 fragColor;
+
+${declareSimplexNoise}
+${declarePI}
+${declareRandom}
+
+float getSimplexNoise(vec2 uv, float t) {
+  float noise = .5 * snoise(uv - vec2(0., .3 * t));
+  noise += .5 * snoise(2. * uv + vec2(0., .32 * t));
+
+  return noise;
+}
+
+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(mod(uv, 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() {  
+  float t = .5 * u_time;  
+
+  #define USE_PATTERN_SIZING
+  #define USE_OBJECT_SIZING
+  #define USE_PIXELIZATION
+  // #define ADD_HELPERS
+  
+  ${sizingUV}
+  
+  vec2 dithering_uv = pxSizeUv;
+  vec2 ditheringNoise_uv = roundedUv;
+  vec2 shape_uv = objectUV;
+  if (u_shape < 3.5) {
+    shape_uv = patternUV;
+  }
+
+  float shape = 0.;    
+  if (u_shape < 1.5) {
+    // Simplex noise
+    shape_uv *= .001;
+
+    shape = 0.5 + 0.5 * getSimplexNoise(shape_uv, t);
+    shape = smoothstep(0.3, 0.9, shape);
+      
+  } else if (u_shape < 2.5) {  
+    // Warp
+    shape_uv *= .003;
+
+    for (float i = 1.0; i < 6.0; i++) {  
+      shape_uv.x += 0.6 / i * cos(i * 2.5 * shape_uv.y + t);  
+      shape_uv.y += 0.6 / i * cos(i * 1.5 * shape_uv.x + t);  
+    }  
+    
+    shape = .15 / abs(sin(t - shape_uv.y - shape_uv.x));  
+    shape = smoothstep(0.02, 1., shape);
+  
+  } else if (u_shape < 3.5) {  
+    // Dots  
+    shape_uv *= .05;
+
+    float stripeIdx = floor(2. * shape_uv.x / TWO_PI);
+    float rand = fract(sin(stripeIdx * 12.9898) * 43758.5453);
+
+    float speed = sign(rand - .5) * ceil(2. + rand);
+    shape = sin(shape_uv.x) * cos(shape_uv.y + speed * t);  
+    shape = pow(shape, 6.);
+
+  } else if (u_shape < 4.5) {  
+    // Sine wave
+    shape_uv *= 4.;
+
+    float wave = cos(.5 * shape_uv.x - 2. * t) * sin(1.5 * shape_uv.x + t) * (.75 + .25 * cos(3. * t));
+    shape = 1. - smoothstep(-1., 1., shape_uv.y + wave);
+    
+  } else if (u_shape < 5.5) {  
+    // Ripple
+
+    float dist = length(shape_uv);
+    float waves = sin(pow(dist, 1.7) * 7. - 3. * t) * .5 + .5;
+    shape = waves;
+    
+  } else if (u_shape < 6.5) {  
+    // Swirl  
+
+    float l = length(shape_uv);
+    float angle = 6. * atan(shape_uv.y, shape_uv.x) + 4. * t;
+    float twist = 1.2;
+    float offset = pow(l, -twist) + angle / TWO_PI;  
+    float mid = smoothstep(0., 1., pow(l, twist));
+    shape = mix(0., fract(offset), mid);
+    
+  } else {
+    // Sphere
+    shape_uv *= 2.;
+    
+    vec3 pos = vec3(shape_uv, sqrt(1. - pow(length(shape_uv), 2.)));
+    vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));
+    shape = .5 + .5 * dot(lightPos, pos);
+  }  
+  
+  
+  int type = int(floor(u_type));  
+  float dithering = 0.0;  
+  
+  switch (type) {  
+    case 1: {
+      dithering = step(random(ditheringNoise_uv), shape);  
+    } break;  
+    case 2:  
+      dithering = getBayerValue(dithering_uv, 2);  
+      break;  
+    case 3:  
+      dithering = getBayerValue(dithering_uv, 4);  
+      break;  
+    default:  
+      dithering = getBayerValue(dithering_uv, 8);  
+      break;  
+  }  
+  
+  dithering -= .5;  
+  float res = step(.5, shape + dithering);  
+  
+  vec3 color = mix(u_color1.rgb, u_color2.rgb, res);
+  float opacity = mix(u_color1.a, u_color2.a, res);
+
+  #ifdef ADD_HELPERS
+    vec2 helperBox = objectHelperBox;
+    vec2 boxSize = objectBoxSize;
+    if (u_shape < 3.5) {
+      helperBox = patternHelperBox;
+      boxSize = patternBoxSize;
+    }
+    ${drawSizingHelpers}
+  #endif
+
+  fragColor = vec4(color, opacity);
+}
+`;
+export {
+  ditheringFragmentShader
+};
+//# sourceMappingURL=dithering.js.map

package/dist/shaders/dithering.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/dithering.ts"],
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount';\nimport {\n  sizingUniformsDeclaration,\n  type ShaderSizingParams,\n  type ShaderSizingUniforms,\n  sizingUV,\n  drawSizingHelpers,\n} from '../shader-sizing';\nimport { declareSimplexNoise, declarePI, declareRandom } from '../shader-utils';\n\n/**\n * Dithering Fragment Shader by Ksenia Kondrashova\n * Applies dithering (4 dithering types available) over the\n * abstract shapes animation (7 animated shapes available)\n *\n * Uniforms include:\n * - u_color1: background color, RGBA\n * - u_color2: pixels color, RGBA\n *\n * - u_shape (float, used as int, 1 to 7):\n *  --- shape = 1: Simplex noise pattern\n *  --- shape = 2: Warp noise pattern\n *  --- shape = 3: Columns if dots moving vertically\n *  --- shape = 4: Sine wave\n *  --- shape = 5: Ripple effect\n *  --- shape = 6: Swirl animation\n *  --- shape = 7: Rotating sphere\n *\n *  - u_type (float, used as int, 1 to 4):\n *  --- type = 1: Random dithering\n *  --- type = 2: 2x2 Bayer matrix\n *  --- type = 3: 4x4 Bayer matrix\n *  --- type = 4: 8x8 Bayer matrix\n *\n * - pxSize (float), relative to canvas resolution\n * - u_pxRounded (bool)\n *\n */\nexport const ditheringFragmentShader: string = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\n${sizingUniformsDeclaration}\n\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform float u_shape;\nuniform float u_type;\nuniform float u_pxSize;\nuniform bool u_pxRounded;\n\nout vec4 fragColor;\n\n${declareSimplexNoise}\n${declarePI}\n${declareRandom}\n\nfloat getSimplexNoise(vec2 uv, float t) {\n  float noise = .5 * snoise(uv - vec2(0., .3 * t));\n  noise += .5 * snoise(2. * uv + vec2(0., .32 * t));\n\n  return noise;\n}\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(mod(uv, 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  float t = .5 * u_time;  \n\n  #define USE_PATTERN_SIZING\n  #define USE_OBJECT_SIZING\n  #define USE_PIXELIZATION\n  // #define ADD_HELPERS\n  \n  ${sizingUV}\n  \n  vec2 dithering_uv = pxSizeUv;\n  vec2 ditheringNoise_uv = roundedUv;\n  vec2 shape_uv = objectUV;\n  if (u_shape < 3.5) {\n    shape_uv = patternUV;\n  }\n\n  float shape = 0.;    \n  if (u_shape < 1.5) {\n    // Simplex noise\n    shape_uv *= .001;\n\n    shape = 0.5 + 0.5 * getSimplexNoise(shape_uv, t);\n    shape = smoothstep(0.3, 0.9, shape);\n      \n  } else if (u_shape < 2.5) {  \n    // Warp\n    shape_uv *= .003;\n\n    for (float i = 1.0; i < 6.0; i++) {  \n      shape_uv.x += 0.6 / i * cos(i * 2.5 * shape_uv.y + t);  \n      shape_uv.y += 0.6 / i * cos(i * 1.5 * shape_uv.x + t);  \n    }  \n    \n    shape = .15 / abs(sin(t - shape_uv.y - shape_uv.x));  \n    shape = smoothstep(0.02, 1., shape);\n  \n  } else if (u_shape < 3.5) {  \n    // Dots  \n    shape_uv *= .05;\n\n    float stripeIdx = floor(2. * shape_uv.x / TWO_PI);\n    float rand = fract(sin(stripeIdx * 12.9898) * 43758.5453);\n\n    float speed = sign(rand - .5) * ceil(2. + rand);\n    shape = sin(shape_uv.x) * cos(shape_uv.y + speed * t);  \n    shape = pow(shape, 6.);\n\n  } else if (u_shape < 4.5) {  \n    // Sine wave\n    shape_uv *= 4.;\n\n    float wave = cos(.5 * shape_uv.x - 2. * t) * sin(1.5 * shape_uv.x + t) * (.75 + .25 * cos(3. * t));\n    shape = 1. - smoothstep(-1., 1., shape_uv.y + wave);\n    \n  } else if (u_shape < 5.5) {  \n    // Ripple\n\n    float dist = length(shape_uv);\n    float waves = sin(pow(dist, 1.7) * 7. - 3. * t) * .5 + .5;\n    shape = waves;\n    \n  } else if (u_shape < 6.5) {  \n    // Swirl  \n\n    float l = length(shape_uv);\n    float angle = 6. * atan(shape_uv.y, shape_uv.x) + 4. * t;\n    float twist = 1.2;\n    float offset = pow(l, -twist) + angle / TWO_PI;  \n    float mid = smoothstep(0., 1., pow(l, twist));\n    shape = mix(0., fract(offset), mid);\n    \n  } else {\n    // Sphere\n    shape_uv *= 2.;\n    \n    vec3 pos = vec3(shape_uv, sqrt(1. - pow(length(shape_uv), 2.)));\n    vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));\n    shape = .5 + .5 * dot(lightPos, pos);\n  }  \n  \n  \n  int type = int(floor(u_type));  \n  float dithering = 0.0;  \n  \n  switch (type) {  \n    case 1: {\n      dithering = step(random(ditheringNoise_uv), shape);  \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  dithering -= .5;  \n  float res = step(.5, shape + dithering);  \n  \n  vec3 color = mix(u_color1.rgb, u_color2.rgb, res);\n  float opacity = mix(u_color1.a, u_color2.a, res);\n\n  #ifdef ADD_HELPERS\n    vec2 helperBox = objectHelperBox;\n    vec2 boxSize = objectBoxSize;\n    if (u_shape < 3.5) {\n      helperBox = patternHelperBox;\n      boxSize = patternBoxSize;\n    }\n    ${drawSizingHelpers}\n  #endif\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface DitheringUniforms extends ShaderSizingUniforms {\n  u_color1: [number, number, number, number];\n  u_color2: [number, number, number, number];\n  u_shape: number;\n  u_type: number;\n  u_pxSize: number;\n  u_pxRounded: boolean;\n}\n\nexport interface DitheringParams extends ShaderSizingParams, ShaderMotionParams {\n  color1?: string;\n  color2?: string;\n  shape?: number;\n  type?: number;\n  pxSize?: number;\n  pxRounded?: boolean;\n}\n"],
+  "mappings": ";;;;;AACA;AAAA,EACE;AAAA,EAGA;AAAA,EACA;AAAA,OACK;AACP,SAAS,qBAAqB,WAAW,qBAAqB;AA8BvD,MAAM,0BAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO7C,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWzB,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAmDX,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAyGN,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}