new parameters added

paper-design · Dec 19, 2024 · e373da5 · e373da5
1 parent 5273902
commit e373da5
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 7 deletions.
diff --git a/example/src/shaders/dots-grid-example.tsx b/example/src/shaders/dots-grid-example.tsx
@@ -8,9 +8,14 @@ import { useEffect } from 'react';
 const DotsGridExample = () => {
   return (
     <DotsGrid
+      colorBack="#222222"
+      colorFill="#e48b97"
+      colorStroke="#f5d03b"
       dotSize={4}
       gridSpacingX={50}
       gridSpacingY={50}
+      strokeWidth={2}
+      sizeRange={0}
       style={{ position: 'fixed', width: '100%', height: '100%' }}
     />
   );
@@ -30,9 +35,14 @@ export const DotsGridWithControls = () => {
     return {
       Parameters: folder(
         {
-          dotSize: { value: defaults.dotSize, order: 2, min: .1, max: 50 },
-          gridSpacingX: { value: defaults.gridSpacingX, order: 3, min: 2, max: 500 },
-          gridSpacingY: { value: defaults.gridSpacingY, order: 4, min: 2, max: 500 },
+          colorBack: {value: defaults.colorBack, order: 1},
+          colorFill: {value: defaults.colorFill, order: 2},
+          colorStroke: {value: defaults.colorStroke, order: 3},
+          dotSize: { value: defaults.dotSize, order: 4, min: .1, max: 100 },
+          gridSpacingX: { value: defaults.gridSpacingX, order: 5, min: 2, max: 500 },
+          gridSpacingY: { value: defaults.gridSpacingY, order: 6, min: 2, max: 500 },
+          strokeWidth: { value: defaults.dotSize, order: 7, min: 0, max: 50 },
+          sizeRange: { value: defaults.gridSpacingY, order: 8, min: 0, max: 1 },
         },
         { order: 1 }
       ),

diff --git a/packages/shaders-react/src/shaders/dots-grid.tsx b/packages/shaders-react/src/shaders/dots-grid.tsx
@@ -3,9 +3,14 @@ import { ShaderMount, type GlobalParams, type ShaderMountProps } from '../shader
 import { getShaderColorFromString, dotsGridFragmentShader, type DotsGridUniforms } from '@paper-design/shaders';
 
 export type DotsGridParams = {
+  colorBack?: string;
+  colorFill?: string;
+  colorStroke?: string;
   dotSize?: number;
   gridSpacingX?: number;
   gridSpacingY?: number;
+  strokeWidth?: number;
+  sizeRange?: number;
 };
 
 export type DotsGridProps = Omit<ShaderMountProps, 'fragmentShader'> & DotsGridParams;
@@ -15,9 +20,15 @@ type DotsGridPreset = { name: string; params: Required<DotsGridParams> };
 export const defaultPreset: DotsGridPreset = {
   name: 'Default',
   params: {
+    // Note: Keep default colors in HSLA format so that our Leva controls show a transparency channel (rgba and hex8 do not work)
+    colorBack: 'hsla(358.2, 66.1%, 48.6%, 0)',
+    colorFill: 'hsla(145.2, 30.1%, 32.5%, 1)',
+    colorStroke: 'hsla(39.4, 87.7%, 52.4%, 1)',
     dotSize: 2,
     gridSpacingX: 75,
     gridSpacingY: 75,
+    strokeWidth: 0,
+    sizeRange: 0,
   },
 } as const;
 
@@ -26,14 +37,24 @@ export const dotsGridPresets: DotsGridPreset[] = [defaultPreset];
 export const DotsGrid = (props: DotsGridProps): JSX.Element => {
   const uniforms: DotsGridUniforms = useMemo(() => {
     return {
+      u_colorBack: getShaderColorFromString(props.colorBack, defaultPreset.params.colorBack),
+      u_colorFill: getShaderColorFromString(props.colorFill, defaultPreset.params.colorStroke),
+      u_colorStroke: getShaderColorFromString(props.colorStroke, defaultPreset.params.colorStroke),
       u_dotSize: props.dotSize ?? defaultPreset.params.dotSize,
       u_gridSpacingX: props.gridSpacingX ?? defaultPreset.params.gridSpacingX,
       u_gridSpacingY: props.gridSpacingY ?? defaultPreset.params.gridSpacingY,
+      u_strokeWidth: props.strokeWidth ?? defaultPreset.params.strokeWidth,
+      u_sizeRange: props.sizeRange ?? defaultPreset.params.sizeRange,
     };
   }, [
+    props.colorBack,
+    props.colorFill,
+    props.colorStroke,
     props.dotSize,
     props.gridSpacingX,
     props.gridSpacingY,
+    props.strokeWidth,
+    props.sizeRange,
   ]);
 
   return <ShaderMount {...props} fragmentShader={dotsGridFragmentShader} uniforms={uniforms} />;

diff --git a/packages/shaders/src/shaders/dots-grid.ts b/packages/shaders/src/shaders/dots-grid.ts
@@ -1,7 +1,12 @@
 export type DotsGridUniforms = {
+  u_colorBack: [number, number, number, number];
+  u_colorFill: [number, number, number, number];
+  u_colorStroke: [number, number, number, number];
   u_dotSize: number;
   u_gridSpacingX: number;
   u_gridSpacingY: number;
+  u_strokeWidth: number;
+  u_sizeRange: number;
 };
 
 /**
@@ -16,28 +21,50 @@ export type DotsGridUniforms = {
 export const dotsGridFragmentShader = `#version 300 es
 precision highp float;
 
+uniform vec4 u_colorBack;
+uniform vec4 u_colorFill;
+uniform vec4 u_colorStroke;
 uniform float u_dotSize;
 uniform float u_gridSpacingX;
 uniform float u_gridSpacingY;
+uniform float u_strokeWidth;
+uniform float u_sizeRange;
+
 uniform vec2 u_resolution;
 uniform float u_pxRatio;
 
 out vec4 fragColor;
 
+float hash (vec2 st) {
+  return fract(sin(dot(st.xy,vec2(12.9898,78.233)))*43758.5453123);
+}
+
 void main() {
     vec2 uv = gl_FragCoord.xy;
 
     uv /= u_pxRatio;
 
     vec2 grid = fract(uv / vec2(u_gridSpacingX, u_gridSpacingY)) + 1e-4;
+    vec2 grid_idx = floor(uv / vec2(u_gridSpacingX, u_gridSpacingY));
+    float randomizer = hash(grid_idx);
 
     vec2 center = vec2(.5) - 1e-3;
-    float dist = length((grid - center) * vec2(u_gridSpacingX, u_gridSpacingY));
-    float radius = u_dotSize;
+    float dist = length((grid - center) * vec2(u_gridSpacingX, u_gridSpacingY));    
 
     float edge_width = fwidth(dist);
-    float circle = smoothstep(radius + edge_width, radius - edge_width, dist);
+    float base_size = u_dotSize * (1. - randomizer * u_sizeRange);
+    float circle_outer = smoothstep(base_size + edge_width, base_size - edge_width, dist);
+    float circle_inner = smoothstep(base_size - u_strokeWidth + edge_width, base_size - u_strokeWidth - edge_width, dist);
+    float stroke = clamp(circle_outer - circle_inner, 0., 1.);
 
-    fragColor = vec4(vec3(circle), 1.);
+    vec3 color = u_colorBack.rgb * u_colorBack.a;
+    color = mix(color, u_colorFill.rgb * u_colorFill.a, circle_inner * u_colorFill.a);
+    color = mix(color, u_colorStroke.rgb * u_colorStroke.a, stroke * u_colorStroke.a);
+    
+    float opacity = u_colorBack.a;
+    opacity += u_colorFill.a * circle_inner;
+    opacity += u_colorStroke.a * stroke;
+    
+    fragColor = vec4(color, opacity);
 }
 `;