Add manhattan distance to other voronoi sketches

vhiribarren · Dec 12, 2023 · 1d240e0 · 1d240e0
1 parent 71e2c9d
commit 1d240e0
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 9 deletions.
diff --git a/src/app/noise/voronoi-areas/fragment.glsl b/src/app/noise/voronoi-areas/fragment.glsl
@@ -1,10 +1,13 @@
 #pragma glslify: random = require(../../../glsl-modules/random)
 
 uniform uint u_cell_count;
+uniform int u_distance_type;
 
 varying vec2 v_uv;
 
-const float infinity = 1.0 / 0.0;
+const float INFINITY = 1.0 / 0.0;
+const int DISTANCE_EUCLIDIAN = 0;
+const int DISTANCE_MANHATTAN = 1;
 
 vec2 generate_cell(uint id) {
     return vec2(random(vec2(float(id), 0.0)), random(vec2(float(id), 1.0)));    
@@ -14,16 +17,25 @@ float generate_color(uint id) {
     return random(vec2(id));    
 }
 
+float voronoi_distance(vec2 left, vec2 right) {
+    if (u_distance_type == DISTANCE_MANHATTAN) {
+        vec2 diff = right - left;
+        return abs(diff.x) + abs(diff.y);
+    } else {
+        return distance(left, right);
+    }
+}
+
 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;
+    float min_dist = INFINITY;
     uint min_cell_id = 0u;
     for (uint i = 0u; i<u_cell_count; i++) {
         vec2 v_cell = generate_cell(i)*ratio;
-        float v_cell_dist = distance(v_cell, uv);
+        float v_cell_dist = voronoi_distance(v_cell, uv);
         if (v_cell_dist < min_dist) {
             min_dist = v_cell_dist;
             min_cell_id = i;

diff --git a/src/app/noise/voronoi-areas/page.tsx b/src/app/noise/voronoi-areas/page.tsx
@@ -1,20 +1,30 @@
 "use client";
 
-import { NumberInput } from "@mantine/core";
+import { NumberInput, Select } 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 DISTANCE_TYPE = ["Euclidean Distance", "Manhattan Distance"];
+
 function VoronoiNoiseControl({controlUiTunnel}: FragmentLogic) {
     const [cellCount, setCellCount] = useUniform("u_cell_count", 20);
+    const [distanceType, setDistanceType] = useUniform("u_distance_type", 0);
     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} />
+                <Select
+                    className={styles.shaderControl}
+                    label="Distance algorithm"
+                    placeholder="Pick value"
+                    data={DISTANCE_TYPE}
+                    value={DISTANCE_TYPE[distanceType]}
+                    onChange={(e) => setDistanceType(DISTANCE_TYPE.indexOf(e!))} />
             </div>
         </ControlUiTunnel>
     );

diff --git a/src/app/noise/worley-random/fragment.glsl b/src/app/noise/worley-random/fragment.glsl
@@ -2,24 +2,36 @@
 
 uniform uint u_cell_count;
 uniform float u_luminosity;
+uniform int u_distance_type;
 
 varying vec2 v_uv;
 
-const float infinity = 1.0 / 0.0;
+const float INFINITY = 1.0 / 0.0;
+const int DISTANCE_EUCLIDIAN = 0;
+const int DISTANCE_MANHATTAN = 1;
 
 vec2 generate_cell(uint id) {
     return vec2(random(vec2(float(id), 0.0)), random(vec2(float(id), 1.0)));    
 }
 
+float voronoi_distance(vec2 left, vec2 right) {
+    if (u_distance_type == DISTANCE_MANHATTAN) {
+        vec2 diff = right - left;
+        return abs(diff.x) + abs(diff.y);
+    } else {
+        return distance(left, right);
+    }
+}
+
 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;
+    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));
+        min_dist = min(min_dist, voronoi_distance(v_cell, uv));
     }
 
     gl_FragColor =  vec4(vec3(u_luminosity*min_dist), 1.0);

diff --git a/src/app/noise/worley-random/page.tsx b/src/app/noise/worley-random/page.tsx
@@ -1,23 +1,33 @@
 "use client";
 
-import { NumberInput } from "@mantine/core";
+import { NumberInput, Select } 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 DISTANCE_TYPE = ["Euclidean Distance", "Manhattan Distance"];
+
 function VoronoidNoiseControl({controlUiTunnel}: FragmentLogic) {
 
     const [cellCount, setCellCount] = useUniform("u_cell_count", 20);
     const [luminosity, setLuminosity] = useUniform("u_luminosity", 2.0);
-
+    const [distanceType, setDistanceType] = useUniform("u_distance_type", 0);
     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}  />
+                <Select
+                    className={styles.shaderControl}
+                    label="Distance algorithm"
+                    placeholder="Pick value"
+                    data={DISTANCE_TYPE}
+                    value={DISTANCE_TYPE[distanceType]}
+                    onChange={(e) => setDistanceType(DISTANCE_TYPE.indexOf(e!))}
+                /> 
             </div>
         </ControlUiTunnel>
     );