mapGen added Manhattan and Minkowski distances

jolav · Nov 16, 2023 · 70721aa · 70721aa
1 parent 6327e78
commit 70721aa
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 22 deletions.
diff --git a/www/mapGenerator/mapGen.html b/www/mapGenerator/mapGen.html
@@ -36,6 +36,7 @@ <h3><strong>CONTROL PANEL</strong></h3>
           <select name="metricType">
             <option value="euclidean">Euclidean</option>
             <option value="manhattan">Manhattan</option>
+            <option value="minkowski">Minkowski</option>
           </select>
         </div>
         <br>

diff --git a/www/mapGenerator/render.js b/www/mapGenerator/render.js
@@ -40,13 +40,30 @@ function updateDataDraw() {
 }
 
 function drawZones() {
+  const select = document.getElementsByName("metricType")[0];
+  const metric = select.options[select.selectedIndex].value;
+  let calculateDistance = euclidean;
+  if (metric === "manhattan") {
+    calculateDistance = manhattan;
+  }
+  switch (metric) {
+    case "euclidean":
+      calculateDistance = euclidean;
+      break;
+    case "manhattan":
+      calculateDistance = manhattan;
+      break;
+    case "minkowski":
+      calculateDistance = minkowski;
+      break;
+  }
   for (let px = 0; px <= canvas.width; px++) {
     for (let py = 0; py <= canvas.height; py++) {
       let dm = canvas.width * canvas.height;
       for (let { x, y, c } of points) {
-        let d1 = Math.pow(Math.abs(x - px), 2);
-        let d2 = Math.pow(Math.abs(y - py), 2);
-        let d = Math.sqrt(d1 + d2);
+        const deltaX = x - px;
+        const deltaY = y - py;
+        let d = calculateDistance(deltaX, deltaY);
         if (d < dm) {
           ctx.fillStyle = c;
           ctx.fillRect(px, py, 1, 1);
@@ -57,6 +74,21 @@ function drawZones() {
   }
 }
 
+function euclidean(deltaX, deltaY) {
+  return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+}
+
+function manhattan(deltaX, deltaY) {
+  return Math.abs(deltaX) + Math.abs(deltaY);
+}
+
+function minkowski(deltaX, deltaY) {
+  const n = 3;
+  return (1 / n) *
+    (Math.pow(Math.abs(deltaX), n) +
+      Math.pow(Math.abs(deltaY), n)
+    );
+}
 function fillCanvas() {
   ctx.fillStyle = util.randomColor();
   ctx.fillRect(0, 0, canvas.width, canvas.height);

diff --git a/www/mapGenerator/voronoi.js b/www/mapGenerator/voronoi.js
@@ -12,8 +12,6 @@ function create() {
   if (cells < C.MIN_CELLS || cells > C.MAX_CELLS || isNaN(cells)) {
     cells = parseInt(document.getElementById("cells").defaultValue);
   }
-  //const select = document.getElementsByName("metricType")[0];
-  //const metric = select.options[select.selectedIndex].value;
   createPoints(cells);
 }
 
@@ -31,23 +29,6 @@ function createPoints(cells) {
   console.log("POINTS =>", points.length, points);
 }
 
-function createGRIDPoints() {
-  points = [];
-  let cols = Math.floor(C.WIDTH / C.GRIDSPACE_X);
-  let rows = Math.floor(C.HEIGHT / C.GRIDSPACE_Y);
-  console.log(cols, rows);
-  for (let x = 0; x <= cols; x++) {
-    for (let y = 0; y <= rows; y++) {
-      points.push(
-        {
-          x: x + C.DEVIATION * (Math.random() - Math.random()),
-          y: y + C.DEVIATION * (Math.random() - Math.random()),
-        },
-      );
-    }
-  }
-}
-
 export {
   create,
   points