Use pointInPolygon for edge detection, remove edge detection option now that it works correctly

Author: franciscouzo

ishihara/ishihara.js

@@ -36,7 +36,6 @@ const ishihara_input = {
   text: '',
   circular: true,
   resize: true,
-  edge_detection: true,
   color_scheme: 'General 1',
   min_radius: (canvas.width + canvas.height) / 800,
   max_radius: (canvas.width + canvas.height) / 100,
@@ -188,11 +187,9 @@ gui.add(ishihara_input, 'color_scheme', ['General 1', 'General 2', 'General 3',
 gui.add(ishihara_input, 'text').name('Text').onChange(() => renderText());
 gui.add(ishihara_input, 'circular').name('Circular');
 gui.add(ishihara_input, 'resize').name('Resize');
-gui.add(ishihara_input, 'edge_detection').name('Edge detection');
 gui.add(ishihara_input, 'shape_factory', ['Circle', 'Regular polygon', 'Cross', 'Star', 'Heart']).onChange(value => {
   hide_gui_element(gui, 'sides', value !== 'Regular polygon' && value !== 'Star');
   hide_gui_element(gui, 'pointiness', value !== 'Cross' && value !== 'Star');
-  ishihara_input.edge_detection = value === 'Circle';
   update_gui(gui);
 }).name('Shape');
 gui.add(ishihara_input, 'sides', 3, 12, 1).name('Sides');

ishihara/shape_factories.js

@@ -160,25 +160,40 @@ export class RegularPolygonFactory {
   }
 
   overlaps_image(img_data, polygon) {
-    const points = [{ x: polygon.x, y: polygon.y }];
-    for (const p of polygon.points) {
-      points.push({ x: polygon.x + p.x, y: polygon.y + p.y });
+    const pts = polygon.points.map(p => ({ x: polygon.x + p.x, y: polygon.y + p.y }));
+
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const p of pts) {
+      if (p.x < minX) minX = p.x;
+      if (p.y < minY) minY = p.y;
+      if (p.x > maxX) maxX = p.x;
+      if (p.y > maxY) maxY = p.y;
     }
-    let points_overlapping = 0;
 
-    for (const { x, y } of points) {
-      const index = (Math.floor(y) * img_data.width + Math.floor(x)) * 4;
-      const r = img_data.data[index];
-      const g = img_data.data[index + 1];
-      const b = img_data.data[index + 2];
-      const a = img_data.data[index + 3];
+    minX = Math.max(0, Math.floor(minX));
+    minY = Math.max(0, Math.floor(minY));
+    maxX = Math.min(img_data.width  - 1, Math.ceil(maxX));
+    maxY = Math.min(img_data.height - 1, Math.ceil(maxY));
+
+    let total_points = 0;
+    let points_overlapping = 0;
 
-      if ((r + g + b) * (a / 255) < 127) {
-        points_overlapping++;
+    for (let py = minY; py <= maxY; py++) {
+      for (let px = minX; px <= maxX; px++) {
+        if (!pointInPolygon(px, py, pts)) continue;
+        total_points++;
+        const index = (py * img_data.width + px) * 4;
+        const r = img_data.data[index];
+        const g = img_data.data[index + 1];
+        const b = img_data.data[index + 2];
+        const a = img_data.data[index + 3];
+        if ((r + g + b) * (a / 255) < 127) {
+          points_overlapping++;
+        }
       }
     }
 
-    return [points.length, points_overlapping];
+    return [total_points, points_overlapping];
   }
 
   intersects(polygon1, polygon2) {

ishihara/worker.js

@@ -130,13 +130,8 @@ self.onmessage = function(e) {
       const [total_points, points_overlapping] = shape_factory.overlaps_image(options.img_data, shape);
 
       overlaps_image = points_overlapping !== 0;
-
-      if (options.edge_detection) {
-        if (overlaps_image && points_overlapping / total_points < 0.9) {
-          continue outer;
-        }
-      } else if (overlaps_image) {
-        break;
+      if (overlaps_image && points_overlapping / total_points < 0.9) {
+        continue outer;
       }
     }