From 1fc6f02f7345478ae8bc1ac7518ffdbcd3e344a6 Mon Sep 17 00:00:00 2001 From: aliimam-in Date: Sun, 8 Mar 2026 15:26:28 +0530 Subject: [PATCH] new shapes (stripe and cross) in Dot Grid --- bun.lock | 1 + docs/src/shader-defs/dot-grid-def.ts | 2 +- .../shaders-react/src/shaders/dot-grid.tsx | 49 ++++++++++++++++++- packages/shaders/src/shaders/dot-grid.ts | 19 +++++-- 4 files changed, 64 insertions(+), 7 deletions(-) diff --git a/bun.lock b/bun.lock index cfd0bf0b0..170b18f86 100644 --- a/bun.lock +++ b/bun.lock @@ -1,5 +1,6 @@ { "lockfileVersion": 1, + "configVersion": 0, "workspaces": { "": { "name": "paper-shaders", diff --git a/docs/src/shader-defs/dot-grid-def.ts b/docs/src/shader-defs/dot-grid-def.ts index 1cb7ec220..48fd30dca 100644 --- a/docs/src/shader-defs/dot-grid-def.ts +++ b/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', diff --git a/packages/shaders-react/src/shaders/dot-grid.tsx b/packages/shaders-react/src/shaders/dot-grid.tsx index 67c378d5b..74cadcb28 100644 --- a/packages/shaders-react/src/shaders/dot-grid.tsx +++ b/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 = memo(function DotGridImpl({ // Own props @@ -142,4 +187,4 @@ export const DotGrid: React.FC = memo(function DotGridImpl({ return ( ); -}, colorPropsAreEqual); +}, colorPropsAreEqual); \ No newline at end of file diff --git a/packages/shaders/src/shaders/dot-grid.ts b/packages/shaders/src/shaders/dot-grid.ts index 8a53183e7..1eef5b67f 100644 --- a/packages/shaders/src/shaders/dot-grid.ts +++ b/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,7 +92,7 @@ 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.; @@ -100,6 +100,15 @@ void main() { 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; \ No newline at end of file