Dot grid adjustments

docs/src/app/(shaders)/dot-grid/page.tsx

@@ -20,18 +20,24 @@ const DotGridWithControls = () => {
       colorBack: { value: toHsla(defaults.colorBack), order: 100 },
       colorFill: { value: toHsla(defaults.colorFill), order: 101 },
       colorStroke: { value: toHsla(defaults.colorStroke), order: 102 },
-      size: { value: defaults.size, min: 1, max: 100, order: 200 },
+      shape: {
+        value: defaults.shape,
+        options: Object.keys(DotGridShapes) as DotGridShape[],
+        order: 103,
+      },
+      size: { value: defaults.size, min: 0, max: 1, order: 200 },
       gapX: { value: defaults.gapX, min: 2, max: 500, order: 201 },
       gapY: { value: defaults.gapY, min: 2, max: 500, order: 202 },
       strokeWidth: { value: defaults.strokeWidth, min: 0, max: 50, order: 203 },
       sizeRange: { value: defaults.sizeRange, min: 0, max: 1, order: 204 },
       opacityRange: { value: defaults.opacityRange, min: 0, max: 1, order: 205 },
-      shape: {
-        value: defaults.shape,
-        options: Object.keys(DotGridShapes) as DotGridShape[],
-        order: 199,
-      },
-      rotation: { value: defaults.rotation, min: 0, max: 360, order: 303 },
+      angle: { value: defaults.angle, min: 0, max: 180, order: 300 },
+      angleRange: { value: defaults.angleRange, min: 0, max: 1, order: 301 },
+      rowShift: { value: defaults.shiftX, min: 0, max: 1, order: 302 },
+      rowShiftRange: { value: defaults.rowShiftRange, min: 0, max: 1, order: 303 },
+      shiftX: { value: defaults.shiftX, min: -100, max: 100, order: 320 },
+      shiftY: { value: defaults.shiftY, min: -100, max: 100, order: 321 },
+      rotation: { value: defaults.rotation, min: 0, max: 360, order: 330 },
     };
   });
 

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

@@ -34,15 +34,15 @@ export const dotGridDef: ShaderDef = {
       type: 'enum',
       defaultValue: defaultParams.shape,
       description: 'The shape type',
-      options: ['circle', 'diamond', 'square', 'triangle'],
+      options: ['circle', 'diamond', 'square', 'triangle', 'star', 'asterisk', 'line', 'rect', 'cross', 'plus'],
     },
     {
       name: 'size',
       type: 'number',
-      min: 1,
-      max: 100,
+      min: 0,
+      max: 1,
       defaultValue: defaultParams.size,
-      description: 'Base size of each shape, pixels',
+      description: 'Base size of each shape (0-1, relative to smaller cell side)',
     },
     {
       name: 'gapX',
@@ -84,6 +84,54 @@ export const dotGridDef: ShaderDef = {
       defaultValue: defaultParams.opacityRange,
       description: 'Random variation in shape opacity (0 = all shapes opaque, higher = semi-transparent dots)',
     },
+    {
+      name: 'angle',
+      type: 'number',
+      min: 0,
+      max: 360,
+      defaultValue: defaultParams.angle,
+      description: 'Rotation of shape within each cell, degrees',
+    },
+    {
+      name: 'angleRange',
+      type: 'number',
+      min: 0,
+      max: 1,
+      defaultValue: defaultParams.angleRange,
+      description: 'Random variation in cell angle (0 = uniform, higher = more random rotation)',
+    },
+    {
+      name: 'shiftX',
+      type: 'number',
+      min: -1,
+      max: 1,
+      defaultValue: defaultParams.shiftX,
+      description: 'Horizontal offset of the pattern (0-1, relative to gapX)',
+    },
+    {
+      name: 'shiftY',
+      type: 'number',
+      min: -1,
+      max: 1,
+      defaultValue: defaultParams.shiftY,
+      description: 'Vertical offset of the pattern (0-1, relative to gapY)',
+    },
+    {
+      name: 'rowShift',
+      type: 'number',
+      min: 0,
+      max: 1,
+      defaultValue: defaultParams.rowShift,
+      description: 'Horizontal shift for every 2nd row (brick pattern) (0-1, relative to gapX)',
+    },
+    {
+      name: 'rowShiftRange',
+      type: 'number',
+      min: 0,
+      max: 1,
+      defaultValue: defaultParams.rowShiftRange,
+      description: 'Randomize row shift (0 = only 2nd row shifts, 1 = all rows shift randomly)',
+    },
     ...staticCommonParams,
   ],
 };

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

@@ -23,30 +23,42 @@ export const defaultPreset: DotGridPreset = {
     colorBack: '#000000',
     colorFill: '#ffffff',
     colorStroke: '#ffaa00',
-    size: 2,
+    size: 0.05,
     gapX: 32,
     gapY: 32,
     strokeWidth: 0,
     sizeRange: 0,
     opacityRange: 0,
     shape: 'circle',
+    angle: 0,
+    angleRange: 0,
+    shiftX: 0,
+    shiftY: 0,
+    rowShift: 0,
+    rowShiftRange: 0,
   },
 };
 
 const trianglesPreset: DotGridPreset = {
   name: 'Triangles',
   params: {
     ...defaultPatternSizing,
-    colorBack: '#ffffff',
+    colorBack: '#000000',
     colorFill: '#ffffff',
-    colorStroke: '#808080',
-    size: 5,
+    colorStroke: '#ffffff',
+    size: 1,
     gapX: 32,
     gapY: 32,
-    strokeWidth: 1,
+    strokeWidth: 0,
     sizeRange: 0,
     opacityRange: 0,
     shape: 'triangle',
+    angle: 0,
+    angleRange: 1,
+    shiftX: 0,
+    shiftY: 0,
+    rowShift: 0,
+    rowShiftRange: 0,
   },
 };
 
@@ -57,34 +69,173 @@ const treeLinePreset: DotGridPreset = {
     colorBack: '#f4fce7',
     colorFill: '#052e19',
     colorStroke: '#000000',
-    size: 8,
+    size: 0.8,
     gapX: 20,
     gapY: 90,
     strokeWidth: 0,
     sizeRange: 1,
     opacityRange: 0.6,
     shape: 'circle',
+    angle: 0,
+    angleRange: 0,
+    shiftX: 0,
+    shiftY: 0,
+    rowShift: 0,
+    rowShiftRange: 0,
   },
 };
 
 const wallpaperPreset: DotGridPreset = {
   name: 'Wallpaper',
   params: {
     ...defaultPatternSizing,
-    colorBack: '#204030',
+    colorBack: '#4b2033',
     colorFill: '#000000',
     colorStroke: '#bd955b',
-    size: 9,
+    size: 0.55,
     gapX: 32,
     gapY: 32,
     strokeWidth: 1,
     sizeRange: 0,
     opacityRange: 0,
     shape: 'diamond',
+    angle: 0,
+    angleRange: 0,
+    shiftX: 0,
+    shiftY: 0,
+    rowShift: 0.5,
+    rowShiftRange: 0,
+  },
+};
+
+const snowPreset: DotGridPreset = {
+  name: 'Snow',
+  params: {
+    ...defaultPatternSizing,
+    colorBack: '#1b1e31',
+    colorFill: '#ffffff',
+    colorStroke: '#000000',
+    size: 0.6,
+    gapX: 45,
+    gapY: 35,
+    strokeWidth: 0,
+    sizeRange: 0,
+    opacityRange: 1,
+    shape: 'asterisk',
+    angle: 0,
+    angleRange: 1,
+    shiftX: 0,
+    shiftY: 0,
+    rowShift: 0,
+    rowShiftRange: 0,
+  },
+};
+
+const bricksPreset: DotGridPreset = {
+  name: 'Bricks',
+  params: {
+    ...defaultPatternSizing,
+    colorBack: '#ff9e9e',
+    colorFill: '#00ffb3',
+    colorStroke: '#000000',
+    size: 0.2,
+    gapX: 70,
+    gapY: 70,
+    strokeWidth: 0,
+    sizeRange: 0,
+    opacityRange: 0.05,
+    shape: 'rect',
+    angle: 0,
+    angleRange: 1,
+    shiftX: 0,
+    shiftY: 0,
+    rowShift: 0.5,
+    rowShiftRange: 0.25,
+  },
+};
+
+const starsPreset: DotGridPreset = {
+  name: 'Stars',
+  params: {
+    ...defaultPatternSizing,
+    colorBack: '#000000',
+    colorFill: '#4294d7',
+    colorStroke: '#ffee00',
+    size: 0.75,
+    gapX: 25,
+    gapY: 25,
+    strokeWidth: 1,
+    sizeRange: 0.65,
+    opacityRange: 1,
+    shape: 'star',
+    angle: 0,
+    angleRange: 1,
+    shiftX: 0,
+    shiftY: 0,
+    rowShift: 0.5,
+    rowShiftRange: 0,
+  },
+};
+
+const cellsPreset: DotGridPreset = {
+  name: 'Cells',
+  params: {
+    ...defaultPatternSizing,
+    colorBack: '#ffffff00',
+    colorFill: '#94d2ff',
+    colorStroke: '#203979',
+    size: 0.15,
+    gapX: 80,
+    gapY: 55,
+    strokeWidth: 4,
+    sizeRange: 0,
+    opacityRange: 0.05,
+    shape: 'cross',
+    angle: 0,
+    angleRange: 0,
+    shiftX: 0,
+    shiftY: 0,
+    rowShift: 0,
+    rowShiftRange: 0,
+    rotation: 148,
+  },
+};
+
+const crossPreset: DotGridPreset = {
+  name: 'Cross',
+  params: {
+    ...defaultPatternSizing,
+    colorBack: '#ffffff00',
+    colorFill: '#000000',
+    colorStroke: '#000000',
+    size: 0.01,
+    gapX: 100,
+    gapY: 45,
+    strokeWidth: 0,
+    sizeRange: 0,
+    opacityRange: 0,
+    shape: 'cross',
+    angle: 90,
+    angleRange: 1,
+    shiftX: 0,
+    shiftY: 0,
+    rowShift: 0.65,
+    rowShiftRange: 0,
+    rotation: 260,
   },
 };
 
-export const dotGridPresets: DotGridPreset[] = [defaultPreset, trianglesPreset, treeLinePreset, wallpaperPreset];
+export const dotGridPresets: DotGridPreset[] = [
+  defaultPreset,
+  trianglesPreset,
+  treeLinePreset,
+  wallpaperPreset,
+  snowPreset,
+  bricksPreset,
+  starsPreset,
+  cellsPreset,
+  crossPreset,
+];
 
 export const DotGrid: React.FC<DotGridProps> = memo(function DotGridImpl({
   // Own props
@@ -98,6 +249,12 @@ export const DotGrid: React.FC<DotGridProps> = memo(function DotGridImpl({
   sizeRange = defaultPreset.params.sizeRange,
   opacityRange = defaultPreset.params.opacityRange,
   shape = defaultPreset.params.shape,
+  angle = defaultPreset.params.angle,
+  angleRange = defaultPreset.params.angleRange,
+  shiftX = defaultPreset.params.shiftX,
+  shiftY = defaultPreset.params.shiftY,
+  rowShift = defaultPreset.params.rowShift,
+  rowShiftRange = defaultPreset.params.rowShiftRange,
 
   // Sizing props
   fit = defaultPreset.params.fit,
@@ -126,6 +283,12 @@ export const DotGrid: React.FC<DotGridProps> = memo(function DotGridImpl({
     u_sizeRange: sizeRange,
     u_opacityRange: opacityRange,
     u_shape: DotGridShapes[shape],
+    u_angle: angle,
+    u_angleRange: angleRange,
+    u_shiftX: shiftX,
+    u_shiftY: shiftY,
+    u_rowShift: rowShift,
+    u_rowShiftRange: rowShiftRange,
 
     // Sizing uniforms
     u_fit: ShaderFitOptions[fit],