Add control of exponential voronoi

src/app/sketches/voronoi-stretched/fragment.glsl → src/app/noise/voronoi-exponential/fragment.glsl

@@ -2,11 +2,14 @@
 
 varying vec2 v_uv;
 
+uniform float u_freq;
+uniform float u_line_precision;
+uniform float u_grid_line_size;
+uniform bool u_display_cell_center;
+uniform bool u_display_exp_grid;
+
 const float INFINITY = 1.0 / 0.0;
-const float FREQUENCE = 125.0;
-const float LINE_PRECISION = 0.005;
 const float DOT_SIZE = 0.003;
-const float GRID_SIZE = 0.0015;
 
 
 ivec2 uv_to_grid_snapped(vec2 uv) {
@@ -39,7 +42,7 @@ void main() {
 
     //TODO faire aussi du voronoi avec des octaves, des grosses cellules replies de petites cellules avec un coeff de ligne qui baisse
 
-    uv *= FREQUENCE; // zoom out
+    uv *= u_freq; // zoom out
 
     ivec2 grid = uv_to_grid_snapped(uv);
     float min_dist = INFINITY;
@@ -61,24 +64,20 @@ void main() {
         }
     }
 
-    // Cell dots
-    float dot_col = 1.0-step(DOT_SIZE * FREQUENCE, min_dist);
     // Web
     float web_col;
-    if (abs(min_dist - snd_min_dist) < LINE_PRECISION * FREQUENCE ) {
+    if (abs(min_dist - snd_min_dist) < u_line_precision * u_freq ) {
         web_col = 1.0;
     }
-    // Worley field
-    float worley_col = 0.02*min_dist;
-    // Grid
-    //float grid_col = step(1.0-GRID_SIZE*FREQUENCE, fract(uv.y)) + step(1.0-GRID_SIZE*FREQUENCE, fract(uv.x));
-    float exp_grid_col = 1.0-step(GRID_SIZE*FREQUENCE, abs(uv.x- grid_to_global_coords(grid.x, grid.y).x))* step(GRID_SIZE*FREQUENCE, abs(uv.y- grid_to_global_coords(grid.x, grid.y).y));
-    // Final color
     vec3 fragCol;
-    //fragCol.r = grid_col;
-    fragCol.r = exp_grid_col;
-    fragCol = max(fragCol, vec3(dot_col, dot_col, 0.0));
-    //fragCol = max(fragCol, vec3(worley_col));
+    if (u_display_exp_grid) {
+        float exp_grid_col = 1.0-step(u_grid_line_size*u_freq, abs(uv.x- grid_to_global_coords(grid.x, grid.y).x))* step(u_grid_line_size*u_freq, abs(uv.y- grid_to_global_coords(grid.x, grid.y).y));
+        fragCol.r = exp_grid_col;
+    }
+    if (u_display_cell_center) {
+        float dot_col = 1.0-step(DOT_SIZE * u_freq, min_dist);
+        fragCol = max(fragCol, vec3(dot_col, dot_col, 0.0));
+    }
     fragCol.b = max(fragCol.b, (web_col));
     gl_FragColor =  vec4(fragCol, 1.0);
 }

src/app/noise/voronoi-exponential/page.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { NumberInput, Switch } 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";
+
+
+function ExponentialVoronoiNoiseControl({controlUiTunnel}: FragmentLogic) {
+    const [freq, setFreq] = useUniform<number>("u_freq", 125.0);
+    const [linePrecision, setLinePrecision] = useUniform("u_line_precision", 0.005);
+    const [gridLineSize, setGridLineSize] = useUniform("u_grid_line_size", 0.0015);
+    const [displayCellCenter, setDisplayCellCenter] = useUniform<boolean>("u_display_cell_center", false);
+    const [displayExpGrid, setDisplayExpGrid] = useUniform<boolean>("u_display_exp_grid", false);
+    const ControlUiTunnel = controlUiTunnel;
+
+    return (
+        <ControlUiTunnel>
+            <div className={styles.shaderControlWrapper}>
+                <NumberInput className={styles.shaderControl} label="Frequence of cells" onChange={setFreq} value={freq} min={1} max={500} allowDecimal={false} />
+                <NumberInput className={styles.shaderControl} label="Line precision" onChange={setLinePrecision} value={linePrecision} min={0.0} max={1.0} step={0.001} decimalScale={4} />
+                <Switch
+                    className={styles.shaderControl}
+                    label="Display centers"
+                    checked={displayCellCenter}
+                    onChange={(e) => setDisplayCellCenter(e.currentTarget.checked)}
+                />
+                <Switch
+                    className={styles.shaderControl}
+                    label="Display exponential grid"
+                    checked={displayExpGrid}
+                    onChange={(e) => setDisplayExpGrid(e.currentTarget.checked)}
+                />
+                {displayExpGrid &&
+                    <NumberInput className={styles.shaderControl} label="Grid line size" onChange={setGridLineSize} value={gridLineSize} min={0.0} max={1.0} step={0.0001} decimalScale={4} />
+                }
+
+            </div>
+        </ControlUiTunnel>
+    );
+}
+
+export default function Page() {
+    return (
+        <FragmentView
+            title="Exponential Voronoi"
+            fragmentShader={fragmentShader}
+            withUi={true}
+            control={ExponentialVoronoiNoiseControl} />
+    );
+}

src/components/shaders/uniforms.ts

@@ -13,7 +13,7 @@ export function useFragmentRef(): MutableRefObject<FragmentHandle> {
     return useContext(UniformsContext).fragmentRef;
 }
 
-export function useUniform<S extends string | number>(uniformName: string, defaultValue: S | (() => S)): [S, Dispatch<SetStateAction<string | number>>] {
+export function useUniform<S extends string | number | boolean>(uniformName: string, defaultValue: S | (() => S)): [S, Dispatch<SetStateAction<string | number | boolean>>] {
   const fragmentRef = useFragmentRef();
   const addUniform = useContext(UniformsContext).addUniform;
 
@@ -25,7 +25,7 @@ export function useUniform<S extends string | number>(uniformName: string, defau
         fragmentRef.current.render();
       }
   }, [uniformName, uniformState, fragmentRef]);
-  return [uniformState, setUniformState as Dispatch<SetStateAction<string | number>>];
+  return [uniformState, setUniformState as Dispatch<SetStateAction<string | number | boolean>>];
 }
 
 export function useUniformClock(uniformName: string) {

src/config/menu.json

@@ -34,6 +34,10 @@
         {
             "title": "Voronoi",
             "slug": "/noise/voronoi"
+        },
+        {
+            "title": "Exponential Voronoi",
+            "slug": "/noise/voronoi-exponential"
         }
     ]
 }]