new shapes (stripe and cross) in Dot Grid

docs/src/shader-defs/dot-grid-def.ts

@@ -34,7 +34,7 @@ export const dotGridDef: ShaderDef = {
       type: 'enum',
       defaultValue: defaultParams.shape,
       description: 'The shape type',
-      options: ['circle', 'diamond', 'square', 'triangle'],
+      options: ['circle', 'diamond', 'square', 'triangle', 'stripe', 'cross'],
     },
     {
       name: 'size',

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

@@ -84,7 +84,52 @@ const wallpaperPreset: DotGridPreset = {
   },
 };
 
-export const dotGridPresets: DotGridPreset[] = [defaultPreset, trianglesPreset, treeLinePreset, wallpaperPreset];
+// ── New: Stripe preset ────────────────────────────────────────────────────────
+// Thin horizontal bars evenly spaced across the canvas.
+const stripesPreset: DotGridPreset = {
+  name: 'Stripes',
+  params: {
+    ...defaultPatternSizing,
+    colorBack: '#1a1a2e',
+    colorFill: '#e94560',
+    colorStroke: '#e94560',
+    size: 3,         // half-thickness of each stripe bar
+    gapX: 40,        // gapX has no visual effect for pure stripes but kept for uniformity
+    gapY: 24,        // vertical spacing between stripe centres
+    strokeWidth: 0,
+    sizeRange: 0,
+    opacityRange: 0,
+    shape: 'stripe',
+  },
+};
+
+// ── New: Cross preset ─────────────────────────────────────────────────────────
+// Plus-sign grid — looks like graph-paper crosshairs.
+const crossesPreset: DotGridPreset = {
+  name: 'Crosses',
+  params: {
+    ...defaultPatternSizing,
+    colorBack: '#f5f0e8',
+    colorFill: '#2d2d2d',
+    colorStroke: '#2d2d2d',
+    size: 2,         // arm half-thickness
+    gapX: 28,
+    gapY: 28,
+    strokeWidth: 0,
+    sizeRange: 0.3,
+    opacityRange: 0.2,
+    shape: 'cross',
+  },
+};
+
+export const dotGridPresets: DotGridPreset[] = [
+  defaultPreset,
+  trianglesPreset,
+  treeLinePreset,
+  wallpaperPreset,
+  stripesPreset,
+  crossesPreset,
+];
 
 export const DotGrid: React.FC<DotGridProps> = memo(function DotGridImpl({
   // Own props
@@ -142,4 +187,4 @@ export const DotGrid: React.FC<DotGridProps> = memo(function DotGridImpl({
   return (
     <ShaderMount {...props} maxPixelCount={maxPixelCount} fragmentShader={dotGridFragmentShader} uniforms={uniforms} />
   );
-}, colorPropsAreEqual);
+}, colorPropsAreEqual);

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

@@ -2,7 +2,7 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
 import { declarePI, simplexNoise } from '../shader-utils.js';
 
 /**
- * Static grid pattern made of circles, diamonds, squares or triangles.
+ * Static grid pattern made of circles, diamonds, squares, triangles, stripes or crosses.
  *
  * Fragment shader uniforms:
  * - u_colorBack (vec4): Background color in RGBA
@@ -14,7 +14,7 @@ import { declarePI, simplexNoise } from '../shader-utils.js';
  * - u_strokeWidth (float): Outline stroke width in pixels (0 to 50)
  * - u_sizeRange (float): Random variation in shape size, 0 = uniform, higher = random up to base size (0 to 1)
  * - u_opacityRange (float): Random variation in shape opacity, 0 = opaque, higher = semi-transparent (0 to 1)
- * - u_shape (float): Shape type (0 = circle, 1 = diamond, 2 = square, 3 = triangle)
+ * - u_shape (float): Shape type (0 = circle, 1 = diamond, 2 = square, 3 = triangle, 4 = stripe, 5 = cross)
  *
  * Vertex shader outputs (used in fragment shader):
  * - v_patternUV (vec2): UV coordinates in pixels (scaled by 0.01 for precision), with scale, rotation and offset applied
@@ -92,14 +92,23 @@ void main() {
   } else if (u_shape < 2.5) {
     // Square
     dist = polygon(1.03 * p, 4., 1e-3);
-  } else {
+  } else if (u_shape < 3.5) {
     // Triangle
     strokeWidth *= 1.5;
     p = p * 2. - 1.;
     p *= .9;
     p.y = 1. - p.y;
     p.y -= .75 * baseSize;
     dist = polygon(p, 3., 1e-3);
+  } else if (u_shape < 4.5) {
+    // Stripe — horizontal bar: thin rectangle spanning full cell width,
+    // centred vertically. dist = SDF of a box with half-extents (inf, baseSize).
+    // We only care about the Y axis to get a horizontal stripe.
+    dist = abs(p.y);
+  } else {
+    // Cross — union of a horizontal and a vertical stripe.
+    // dist = SDF of a plus sign: min of the two axis-aligned SDFs.
+    dist = min(abs(p.x), abs(p.y));
   }
 
   float edgeWidth = fwidth(dist);
@@ -159,6 +168,8 @@ export const DotGridShapes = {
   diamond: 1,
   square: 2,
   triangle: 3,
+  stripe: 4,
+  cross: 5,
 } as const;
 
-export type DotGridShape = keyof typeof DotGridShapes;
+export type DotGridShape = keyof typeof DotGridShapes;