shapes selection

example/src/shaders/dots-grid-example.tsx

@@ -17,6 +17,7 @@ const DotsGridExample = () => {
       strokeWidth={2}
       sizeRange={0}
       opacityRange={0}
+      shape={0}
       style={{ position: 'fixed', width: '100%', height: '100%' }}
     />
   );
@@ -45,6 +46,7 @@ export const DotsGridWithControls = () => {
           strokeWidth: { value: defaults.dotSize, order: 7, min: 0, max: 50 },
           sizeRange: { value: defaults.gridSpacingY, order: 8, min: 0, max: 1 },
           opacityRange: { value: defaults.gridSpacingY, order: 9, min: 0, max: 1 },
+          shape: {value: defaults.shape, order: 10, options: {'Circle': 0, 'Diamond': 1, 'Square': 2, 'Triangle': 3}},
         },
         { order: 1 }
       ),

packages/shaders-react/src/shaders/dots-grid.tsx

@@ -12,6 +12,7 @@ export type DotsGridParams = {
   strokeWidth?: number;
   sizeRange?: number;
   opacityRange?: number;
+  shape?: number;
 };
 
 export type DotsGridProps = Omit<ShaderMountProps, 'fragmentShader'> & DotsGridParams;
@@ -31,6 +32,7 @@ export const defaultPreset: DotsGridPreset = {
     strokeWidth: 0,
     sizeRange: 0,
     opacityRange: 0,
+    shape: 0,
   },
 } as const;
 
@@ -47,6 +49,7 @@ const preset1: DotsGridPreset = {
     strokeWidth: 7,
     sizeRange: .5,
     opacityRange: 1,
+    shape: 0,
   },
 } as const;
 
@@ -63,6 +66,7 @@ const preset2: DotsGridPreset = {
     strokeWidth: 23,
     sizeRange: .35,
     opacityRange: .55,
+    shape: 0,
   },
 } as const;
 
@@ -79,6 +83,7 @@ const preset3: DotsGridPreset = {
     strokeWidth: 0,
     sizeRange: 1,
     opacityRange: .6,
+    shape: 0,
   },
 } as const;
 
@@ -95,6 +100,7 @@ const preset4: DotsGridPreset = {
     strokeWidth: 0,
     sizeRange: 0,
     opacityRange: 1,
+    shape: 0,
   },
 } as const;
 
@@ -112,6 +118,7 @@ export const DotsGrid = (props: DotsGridProps): JSX.Element => {
       u_strokeWidth: props.strokeWidth ?? defaultPreset.params.strokeWidth,
       u_sizeRange: props.sizeRange ?? defaultPreset.params.sizeRange,
       u_opacityRange: props.opacityRange ?? defaultPreset.params.opacityRange,
+      u_shape: props.shape ?? defaultPreset.params.shape,
     };
   }, [
     props.colorBack,
@@ -123,6 +130,7 @@ export const DotsGrid = (props: DotsGridProps): JSX.Element => {
     props.strokeWidth,
     props.sizeRange,
     props.opacityRange,
+    props.shape,
   ]);
 
   return <ShaderMount {...props} fragmentShader={dotsGridFragmentShader} uniforms={uniforms} />;

packages/shaders/src/shaders/dots-grid.ts

@@ -8,6 +8,7 @@ export type DotsGridUniforms = {
   u_strokeWidth: number;
   u_sizeRange: number;
   u_opacityRange: number;
+  u_shape: number;
 };
 
 /**
@@ -23,7 +24,7 @@ export type DotsGridUniforms = {
  * u_gridSpacingY: Vertical grid spacing, px
  * u_sizeRange: Variety of dot size, 0..1
  * u_opacityRange: Variety of dot opacity to be applied equally to fill and stroke, 0..1
- *
+ * u_shape: Shape code: 'Circle': 0, 'Diamond': 1, 'Square': 2, 'Triangle': 3
  */
 
 export const dotsGridFragmentShader = `#version 300 es
@@ -38,14 +39,25 @@ uniform float u_gridSpacingY;
 uniform float u_strokeWidth;
 uniform float u_sizeRange;
 uniform float u_opacityRange;
+uniform float u_shape;
 
 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);
+#define TWO_PI 6.28318530718
+#define PI 3.14159265358979323846
+
+float hash(vec2 st) {
+    return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
+}
+
+float polygon(vec2 p, float N, float rot) {
+    float a = atan(p.x, p.y) + rot;
+    float r = TWO_PI / float(N);
+
+    return cos(floor(.5 + a/r) * r - a) * length(p);
 }
 
 void main() {
@@ -59,25 +71,41 @@ void main() {
     float size_randomizer = hash(grid_idx);
     float opacity_randomizer = hash(grid_idx * 2. + 1000.);
 
-    vec2 center = vec2(.5) - 1e-3;
-    float dist = length((grid - center) * vec2(u_gridSpacingX, u_gridSpacingY));    
+    vec2 center = vec2(0.5) - 1e-3;
+    vec2 p = (grid - center) * vec2(u_gridSpacingX, u_gridSpacingY);
+
+    float dist;
+    if (u_shape < 0.5) {
+        // Circle
+        dist = length(p);
+    } else if (u_shape < 1.5) {
+        // Diamond
+        dist = polygon(1.5 * p, 4., .25 * PI);
+    } else if (u_shape < 2.5) {
+        // Square
+        dist = polygon(1.5 * p, 4., 1e-3);
+    } else {
+        // Triangle
+        p = p * 2. - 1.;
+        dist = polygon(p, 3., 0.);
+    }
 
     float edge_width = fwidth(dist);
     float base_size = u_dotSize * (1. - size_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.);
+    float shape_outer = smoothstep(base_size + edge_width, base_size - edge_width, dist);
+    float shape_inner = smoothstep(base_size - u_strokeWidth + edge_width, base_size - u_strokeWidth - edge_width, dist);
+    float stroke = clamp(shape_outer - shape_inner, 0., 1.);
 
     float dot_opacity = 1. - opacity_randomizer * u_opacityRange;
 
     vec3 color = u_colorBack.rgb * u_colorBack.a;
-    color = mix(color, u_colorFill.rgb * u_colorFill.a * dot_opacity, circle_inner * u_colorFill.a * dot_opacity);
+    color = mix(color, u_colorFill.rgb * u_colorFill.a * dot_opacity, shape_inner * u_colorFill.a * dot_opacity);
     color = mix(color, u_colorStroke.rgb * u_colorStroke.a * dot_opacity, stroke * u_colorStroke.a * dot_opacity);
-    
+
     float opacity = u_colorBack.a;
-    opacity += u_colorFill.a * circle_inner * dot_opacity;
+    opacity += u_colorFill.a * shape_inner * dot_opacity;
     opacity += u_colorStroke.a * stroke * dot_opacity;
-    
+
     fragColor = vec4(color, opacity);
 }
 `;