Add worley noise and voronoid

src/app/noise/voronoid/fragment.glsl

@@ -1,22 +1,34 @@
 #pragma glslify: random = require(../../../glsl-modules/random)
 
 uniform uint u_cell_count;
-uniform float u_luminosity;
 
 varying vec2 v_uv;
 
 const float infinity = 1.0 / 0.0;
 
+vec2 generate_cell(uint id) {
+    return vec2(random(vec2(float(id), 0.0)), random(vec2(float(id), 1.0)));    
+}
+
+float generate_color(uint id) {
+    return random(vec2(id));    
+}
+
 void main() {
     vec2 size = gl_FragCoord.xy / v_uv;
     float ratio = size.x / size.y;
     vec2 uv = v_uv * vec2(ratio, 1.0);
 
     float min_dist = infinity;
+    uint min_cell_id = 0u;
     for (uint i = 0u; i<u_cell_count; i++) {
-        vec2 v_cell = vec2(random(vec2(float(i), 0.0)), random(vec2(float(i), 1.0)))*ratio;
-        min_dist = min(min_dist, distance(v_cell, uv));
+        vec2 v_cell = generate_cell(i)*ratio;
+        float v_cell_dist = distance(v_cell, uv);
+        if (v_cell_dist < min_dist) {
+            min_dist = v_cell_dist;
+            min_cell_id = i;
+        }
     }
 
-    gl_FragColor =  vec4(vec3(u_luminosity*min_dist), 1.0);
+    gl_FragColor =  vec4(vec3(generate_color(min_cell_id)), 1.0);
 }

src/app/noise/voronoid/page.tsx

@@ -10,23 +10,18 @@ const UNIFORMS = {
     u_cell_count: {
         value: 20,
     },
-    u_luminosity: {
-        value: 2.0,
-    },
 };
 
 function VoronoidNoiseControl({controlUiTunnel}: FragmentLogic) {
 
     const [cellCount, setCellCount] = useUniform("u_cell_count", UNIFORMS.u_cell_count.value);
-    const [luminosity, setLuminosity] = useUniform("u_luminosity", UNIFORMS.u_luminosity.value);
 
     const ControlUiTunnel = controlUiTunnel;
 
     return (
         <ControlUiTunnel>
             <div className={styles.shaderControlWrapper}>
-                <NumberInput className={styles.shaderControl} label="Number of cells" onChange={setCellCount} value={cellCount} min={1} max={500} allowDecimal={false} />
-                <NumberInput className={styles.shaderControl} label="Luminosity" onChange={setLuminosity} value={luminosity} min={0.0} max={10.0} step={0.1} decimalScale={2}  />
+                <NumberInput className={styles.shaderControl} label="Number of cells" onChange={setCellCount} value={cellCount} min={1} max={1000} allowDecimal={false} />
             </div>
         </ControlUiTunnel>
     );

src/app/noise/worley-random/fragment.glsl

@@ -0,0 +1,26 @@
+#pragma glslify: random = require(../../../glsl-modules/random)
+
+uniform uint u_cell_count;
+uniform float u_luminosity;
+
+varying vec2 v_uv;
+
+const float infinity = 1.0 / 0.0;
+
+vec2 generate_cell(uint id) {
+    return vec2(random(vec2(float(id), 0.0)), random(vec2(float(id), 1.0)));    
+}
+
+void main() {
+    vec2 size = gl_FragCoord.xy / v_uv;
+    float ratio = size.x / size.y;
+    vec2 uv = v_uv * vec2(ratio, 1.0);
+
+    float min_dist = infinity;
+    for (uint i = 0u; i<u_cell_count; i++) {
+        vec2 v_cell = generate_cell(i)*ratio;
+        min_dist = min(min_dist, distance(v_cell, uv));
+    }
+
+    gl_FragColor =  vec4(vec3(u_luminosity*min_dist), 1.0);
+}

src/app/noise/worley-random/page.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { NumberInput } from "@mantine/core";
+import fragmentShader from "./fragment.glsl";
+import { FragmentLogic, FragmentView } from "@/components/shaders/FragmentView";
+import styles from "../../../styles/shaderControl.module.css";
+import { useUniform } from "@/components/shaders/uniforms";
+
+const UNIFORMS = {
+    u_cell_count: {
+        value: 20,
+    },
+    u_luminosity: {
+        value: 2.0,
+    },
+};
+
+function VoronoidNoiseControl({controlUiTunnel}: FragmentLogic) {
+
+    const [cellCount, setCellCount] = useUniform("u_cell_count", UNIFORMS.u_cell_count.value);
+    const [luminosity, setLuminosity] = useUniform("u_luminosity", UNIFORMS.u_luminosity.value);
+
+    const ControlUiTunnel = controlUiTunnel;
+
+    return (
+        <ControlUiTunnel>
+            <div className={styles.shaderControlWrapper}>
+                <NumberInput className={styles.shaderControl} label="Number of cells" onChange={setCellCount} value={cellCount} min={1} max={1000} allowDecimal={false} />
+                <NumberInput className={styles.shaderControl} label="Luminosity" onChange={setLuminosity} value={luminosity} min={0.0} max={10.0} step={0.1} decimalScale={2}  />
+            </div>
+        </ControlUiTunnel>
+    );
+}
+
+
+export default function Page() {
+    return (
+        <FragmentView
+            title="Random Worley Noise"
+            fragmentShader={fragmentShader}
+            uniforms={UNIFORMS}
+            withUi={true}
+            control={VoronoidNoiseControl} />
+    );
+}

src/config/menu.json

@@ -34,6 +34,10 @@
             "title": "Value Noise",
             "slug": "/noise/value-noise"
         },
+        {
+            "title": "Random Worley Noise",
+            "slug": "/noise/worley-random"
+        },
         {
             "title": "Voronoid Noise",
             "slug": "/noise/voronoid"