[DRAFT] Blobs grid

docs/registry.json

@@ -275,6 +275,19 @@
           "type": "registry:component"
         }
       ]
+    },
+    {
+      "name": "blobs-grid",
+      "type": "registry:component",
+      "title": "Blobs Grid Example",
+      "description": "Blobs Grid shader example.",
+      "dependencies": ["@paper-design/shaders-react"],
+      "files": [
+        {
+          "path": "registry/blobs-grid-example.tsx",
+          "type": "registry:component"
+        }
+      ]
     }
   ]
 }

docs/registry/blobs-grid-example.tsx

@@ -0,0 +1,5 @@
+import { BlobsGrid, type BlobsGridProps } from '@paper-design/shaders-react';
+
+export function BlobsGridExample(props: BlobsGridProps) {
+  return <BlobsGrid style={{ position: 'fixed', width: '100%', height: '100%' }} {...props} />;
+}

docs/src/app/blobs-grid/layout.tsx

@@ -0,0 +1,9 @@
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Blobs Grid Shader | Paper',
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}

docs/src/app/blobs-grid/page.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import { BlobsGrid, type BlobsGridParams, blobsGridPresets } from '@paper-design/shaders-react';
+import { useControls, button, folder } from 'leva';
+import { setParamsSafe, useResetLevaParams } from '@/helpers/use-reset-leva-params';
+import { usePresetHighlight } from '@/helpers/use-preset-highlight';
+import Link from 'next/link';
+import { BackButton } from '@/components/back-button';
+import { cleanUpLevaParams } from '@/helpers/clean-up-leva-params';
+import { ShaderFit, ShaderFitOptions, blobsGridMeta } from '@paper-design/shaders';
+import { useColors } from '@/helpers/use-colors';
+import { toHsla } from '@/helpers/to-hsla';
+
+/**
+ * You can copy/paste this example to use BlobsGrid in your app
+ */
+const BlobsGridExample = () => {
+  return <BlobsGrid style={{ position: 'fixed', width: '100%', height: '100%' }} />;
+};
+
+/**
+ * This example has controls added so you can play with settings in the example app
+ */
+
+const { worldWidth, worldHeight, ...defaults } = blobsGridPresets[0].params;
+
+const BlobsGridWithControls = () => {
+  const { colors, setColors } = useColors({
+    defaultColors: defaults.colors,
+    maxColorCount: blobsGridMeta.maxColorCount,
+  });
+
+  const [params, setParams] = useControls(() => {
+    return {
+      Parameters: folder(
+        {
+          stepsPerColor: { value: defaults.stepsPerColor, min: 1, max: 3, step: 1, order: 0 },
+          colorBack: { value: toHsla(defaults.colorBack), order: 100 },
+          colorShade: { value: toHsla(defaults.colorShade), order: 101 },
+          colorSpecular: { value: toHsla(defaults.colorSpecular), order: 101 },
+          colorInnerShadow: { value: toHsla(defaults.colorInnerShadow), order: 102 },
+          distortion: { value: defaults.distortion, min: 0, max: 20, order: 300 },
+          size: { value: defaults.size, min: 0, max: 1, order: 301 },
+          specular: { value: defaults.specular, min: 0, max: 1, order: 302 },
+          specularNormal: { value: defaults.specularNormal, min: 0, max: 1, order: 303 },
+          shade: { value: defaults.shade, min: 0, max: 1, order: 304 },
+          innerShadow: { value: defaults.innerShadow, min: 0, max: 1, order: 305 },
+          speed: { value: defaults.speed, min: 0, max: 2, order: 400 },
+        },
+        { order: 1 }
+      ),
+      Transform: folder(
+        {
+          scale: { value: defaults.scale, min: 0.01, max: 4, order: 400 },
+          rotation: { value: defaults.rotation, min: 0, max: 360, order: 401 },
+          offsetX: { value: defaults.offsetX, min: -1, max: 1, order: 402 },
+          offsetY: { value: defaults.offsetY, min: -1, max: 1, order: 403 },
+        },
+        {
+          order: 2,
+          collapsed: false,
+        }
+      ),
+      Fit: folder(
+        {
+          fit: { value: defaults.fit, options: Object.keys(ShaderFitOptions) as ShaderFit[], order: 404 },
+          worldWidth: { value: 1000, min: 1, max: 5120, order: 405 },
+          worldHeight: { value: 500, min: 1, max: 5120, order: 406 },
+          originX: { value: defaults.originX, min: 0, max: 1, order: 407 },
+          originY: { value: defaults.originY, min: 0, max: 1, order: 408 },
+        },
+        {
+          order: 3,
+          collapsed: true,
+        }
+      ),
+    };
+  }, [colors.length]);
+
+  useControls(() => {
+    const presets = Object.fromEntries(
+      blobsGridPresets.map(({ name, params: { worldWidth, worldHeight, ...preset } }) => [
+        name,
+        button(() => {
+          const { colors, ...presetParams } = preset;
+          setColors(colors);
+          setParamsSafe(params, setParams, presetParams);
+        }),
+      ])
+    );
+    return {
+      Presets: folder(presets, { order: -1 }),
+    };
+  });
+
+  // Reset to defaults on mount, so that Leva doesn't show values from other
+  // shaders when navigating (if two shaders have a color1 param for example)
+  useResetLevaParams(params, setParams, defaults);
+  usePresetHighlight(blobsGridPresets, params);
+  cleanUpLevaParams(params);
+
+  return (
+    <>
+      <Link href="/">
+        <BackButton />
+      </Link>
+      <BlobsGrid {...params} colors={colors} className="fixed size-full" />
+    </>
+  );
+};
+
+export default BlobsGridWithControls;

docs/src/home-shaders.ts

@@ -63,6 +63,8 @@ import {
   staticMeshGradientPresets,
   StaticRadialGradient,
   staticRadialGradientPresets,
+  BlobsGrid,
+  blobsGridPresets,
 } from '@paper-design/shaders-react';
 import { StaticImageData } from 'next/image';
 import TextureTest from './app/texture-test/page';
@@ -84,150 +86,148 @@ export const homeShaders = [
   //   shaderConfig: {},
   // },
   {
-    name: 'grain gradient',
-    url: '/grain-gradient',
-    ShaderComponent: GrainGradient,
-    image: grainGradientImg,
-    shaderConfig: { ...grainGradientPresets[0].params, frame: 7000, speed: 2 },
+    name: 'simplex noise',
+    image: simplexNoiseImg,
+    url: '/simplex-noise',
+    ShaderComponent: SimplexNoise,
+    shaderConfig: { ...simplexNoisePresets[0].params, scale: 0.35 },
   },
   {
     name: 'mesh gradient',
     image: meshGradientImg,
     url: '/mesh-gradient',
     ShaderComponent: MeshGradient,
-    shaderConfig: { ...meshGradientPresets[0].params, frame: 41500 },
+    shaderConfig: { ...meshGradientPresets[0].params },
   },
   {
-    name: 'static mesh gradient',
-    url: '/static-mesh-gradient',
-    ShaderComponent: StaticMeshGradient,
-    image: staticMeshGradientImg,
-    shaderConfig: { ...staticMeshGradientPresets[0].params, rotation: 270 },
-  },
-  {
-    name: 'static radial gradient',
-    url: '/static-radial-gradient',
-    ShaderComponent: StaticRadialGradient,
-    image: staticRadialGradientImg,
-    shaderConfig: { ...staticRadialGradientPresets[0].params, scale: 0.7 },
-  },
-  {
-    name: 'dithering',
-    url: '/dithering',
-    ShaderComponent: Dithering,
-    image: ditheringImg,
-    shaderConfig: { ...ditheringPresets[0].params, scale: 0.45 },
+    name: 'neuro noise',
+    image: neuroNoiseImg,
+    url: '/neuro-noise',
+    ShaderComponent: NeuroNoise,
+    shaderConfig: { ...neuroNoisePresets[0].params },
   },
   {
     name: 'dot orbit',
     image: dotOrbitImg,
     url: '/dot-orbit',
     ShaderComponent: DotOrbit,
-    shaderConfig: { ...dotOrbitPresets[0].params, scale: 0.45 },
+    shaderConfig: { ...dotOrbitPresets[0].params, scale: 0.35 },
+  },
+  {
+    name: 'smoke ring',
+    image: smokeRingImg,
+    url: '/smoke-ring',
+    ShaderComponent: SmokeRing,
+    shaderConfig: { ...smokeRingPresets[3].params },
+  },
+  {
+    name: 'metaballs',
+    image: metaballsImg,
+    url: '/metaballs',
+    ShaderComponent: Metaballs,
+    shaderConfig: { ...metaballsPresets[0].params },
   },
   {
     name: 'dot grid',
     url: '/dot-grid',
     ShaderComponent: DotGrid,
     image: dotGridImg,
-    shaderConfig: { ...dotGridPresets[0].params, scale: 1.1, size: 2 },
+    shaderConfig: { ...dotGridPresets[0].params, scale: 0.4 },
+  },
+  {
+    name: 'perlin',
+    url: '/perlin-noise',
+    ShaderComponent: PerlinNoise,
+    image: perlinNoiseImg,
+    shaderConfig: { ...perlinNoisePresets[1].params, scale: 0.8 },
+  },
+  {
+    name: 'voronoi',
+    url: '/voronoi',
+    ShaderComponent: Voronoi,
+    image: voronoiImg,
+    shaderConfig: { ...voronoiPresets[0].params, scale: 0.5 },
+  },
+  {
+    name: 'waves',
+    url: '/waves',
+    ShaderComponent: Waves,
+    image: wavesImg,
+    shaderConfig: { ...wavesPresets[0].params, shape: 1 },
   },
   {
     name: 'warp',
     url: '/warp',
     ShaderComponent: Warp,
     image: warpImg,
-    shaderConfig: { ...warpPresets[0].params, speed: 2, offsetX: -0.2, scale: 0.6, frame: 20000 },
+    shaderConfig: { ...warpPresets[2].params, scale: 0.25 },
+  },
+  {
+    name: 'god rays',
+    url: '/god-rays',
+    ShaderComponent: GodRays,
+    image: godRaysImg,
+    shaderConfig: { ...godRaysPresets[0].params, offsetX: -1.1, midSize: 1 },
   },
   {
     name: 'spiral',
     url: '/spiral',
     ShaderComponent: Spiral,
     image: spiralImg,
-    shaderConfig: { ...spiralPresets[0].params, scale: 0.5, speed: 2 },
+    shaderConfig: { ...spiralPresets[1].params },
   },
   {
     name: 'swirl',
     url: '/swirl',
     ShaderComponent: Swirl,
-    image: swirlImg,
-    shaderConfig: { ...swirlPresets[0].params, speed: 0.7 },
-  },
-  {
-    name: 'waves',
-    url: '/waves',
-    ShaderComponent: Waves,
-    image: wavesImg,
-    shaderConfig: { ...wavesPresets[0].params, scale: 0.9 },
+    shaderConfig: { ...swirlPresets[0].params },
   },
   {
-    name: 'neuro noise',
-    image: neuroNoiseImg,
-    url: '/neuro-noise',
-    ShaderComponent: NeuroNoise,
-    shaderConfig: { ...neuroNoisePresets[0].params, scale: 0.6, frame: 1500, offsetX: -0.17 },
-  },
-  {
-    name: 'perlin',
-    url: '/perlin-noise',
-    ShaderComponent: PerlinNoise,
-    image: perlinNoiseImg,
-    shaderConfig: { ...perlinNoisePresets[0].params, scale: 0.8, speed: 0.2 },
+    name: 'dithering',
+    url: '/dithering',
+    ShaderComponent: Dithering,
+    shaderConfig: { ...ditheringPresets[0].params },
   },
   {
-    name: 'simplex noise',
-    image: simplexNoiseImg,
-    url: '/simplex-noise',
-    ShaderComponent: SimplexNoise,
-    shaderConfig: { ...simplexNoisePresets[0].params, scale: 0.4 },
+    name: 'liquid metal',
+    url: '/liquid-metal',
+    ShaderComponent: LiquidMetal,
+    shaderConfig: { ...liquidMetalPresets[0].params },
   },
   {
-    name: 'voronoi',
-    url: '/voronoi',
-    ShaderComponent: Voronoi,
-    image: voronoiImg,
-    shaderConfig: { ...voronoiPresets[0].params, scale: 0.35 },
+    name: 'grain gradient',
+    url: '/grain-gradient',
+    ShaderComponent: GrainGradient,
+    shaderConfig: { ...grainGradientPresets[0].params },
   },
   {
     name: 'pulsing border',
     url: '/pulsing-border',
     ShaderComponent: PulsingBorder,
-    image: pulsingBorderImg,
-    shaderConfig: { ...pulsingBorderPresets[0].params, scale: 0.45 },
-  },
-  {
-    name: 'metaballs',
-    image: metaballsImg,
-    url: '/metaballs',
-    ShaderComponent: Metaballs,
-    shaderConfig: { ...metaballsPresets[0].params, scale: 0.7, frame: 21300, offsetY: -0.01 },
+    shaderConfig: { ...pulsingBorderPresets[0].params },
   },
   {
     name: 'color panels',
     url: '/color-panels',
     ShaderComponent: ColorPanels,
-    image: colorPanelsImg,
-    shaderConfig: { ...colorPanelsPresets[0].params, speed: 2, scale: 0.6 },
+    shaderConfig: { ...colorPanelsPresets[0].params },
   },
   {
-    name: 'smoke ring',
-    image: smokeRingImg,
-    url: '/smoke-ring',
-    ShaderComponent: SmokeRing,
-    shaderConfig: { ...smokeRingPresets[0].params, scale: 0.6, speed: 2 },
+    name: 'static mesh gradient',
+    url: '/static-mesh-gradient',
+    ShaderComponent: StaticMeshGradient,
+    shaderConfig: { ...staticMeshGradientPresets[0].params },
   },
   {
-    name: 'liquid metal',
-    url: '/liquid-metal',
-    ShaderComponent: LiquidMetal,
-    image: liquidMetalImg,
-    shaderConfig: { ...liquidMetalPresets[0].params, scale: 0.45 },
+    name: 'static radial gradient',
+    url: '/static-radial-gradient',
+    ShaderComponent: StaticRadialGradient,
+    shaderConfig: { ...staticRadialGradientPresets[0].params },
   },
   {
-    name: 'god rays',
-    url: '/god-rays',
-    ShaderComponent: GodRays,
-    image: godRaysImg,
-    shaderConfig: { ...godRaysPresets[0].params, speed: 2, scale: 0.5, offsetY: -0.5 },
+    name: 'blobs grid',
+    url: '/blobs-grid',
+    ShaderComponent: BlobsGrid,
+    shaderConfig: { ...blobsGridPresets[0].params },
   },
 ] satisfies HomeShaderConfig[];