Add inner exclusion cricle

Author: z3rone

index.html

@@ -27,16 +27,17 @@
     .controls {
       margin: 10px;
     }
-    .circle {
+    .circle, .inner-circle {
       position: absolute;
-      border: 2px solid red;
       border-radius: 50%;
       background: transparent;
-      cursor: grab;
+      pointer-events: none;
     }
-    textarea {
-      width: 90%;
-      margin: 10px;
+    .circle {
+      border: 2px solid red;
+    }
+    .inner-circle {
+      border: 2px solid blue;
     }
   </style>
 </head>
@@ -45,9 +46,8 @@
 <div class="controls">
   <input type="file" id="fileInput">
   <label>m: <input type="number" id="rows" value="3" min="1"></label>
-  <label>n: <input type="number" id="cols" value="4" min="1"></label>
+  <label>n: <input type="number" id="cols" value="3" min="1"></label>
   <button onclick="createGrid()">Create Grid</button>
-  <button onclick="exportCoords()">Export</button>
   <button onclick="showGrayLevels()">Mean Gray</button>
 </div>
 
@@ -66,6 +66,7 @@
 let img = new Image();
 let circles = [];
 let radius = 20;
+let innerRadius = 15;
 let draggingCircle = null;
 let offsetX, offsetY;
 
@@ -86,101 +87,178 @@
 }
 
 function clearCircles() {
-  circles.forEach(c => c.el.remove());
+  circles.flat().forEach(c => {
+    c.outer.el.remove();
+    c.inner.el.remove();
+  });
   circles = [];
 }
 
 function createGrid() {
   clearCircles();
+  drawImage();
   const m = parseInt(document.getElementById("rows").value);
   const n = parseInt(document.getElementById("cols").value);
   const spacingX = canvas.width / (n + 1);
   const spacingY = canvas.height / (m + 1);
+
   for (let i = 0; i < m; i++) {
     circles.push([]);
     for (let j = 0; j < n; j++) {
       const x = (j + 1) * spacingX;
       const y = (i + 1) * spacingY;
-      const el = document.createElement("div");
-      el.className = "circle";
-      el.style.width = el.style.height = radius * 2 + "px";
-      el.style.left = (x - radius) + "px";
-      el.style.top = (y - radius) + "px";
-      makeDraggable(el);
-      container.appendChild(el);
-      circles[i].push({ x, y, el });
+
+      const outer = document.createElement("div");
+      outer.className = "circle";
+      outer.style.width = outer.style.height = radius * 2 + "px";
+      outer.style.left = (x - radius) + "px";
+      outer.style.top = (y - radius) + "px";
+      outer.style.cursor = "grab";
+      outer.style.pointerEvents = "auto";
+      container.appendChild(outer);
+
+      const inner = document.createElement("div");
+      inner.className = "inner-circle";
+      inner.style.width = innerRadius * 2 + "px";
+      inner.style.height = innerRadius * 2 + "px";
+      inner.style.left = (x - innerRadius) + "px";
+      inner.style.top = (y - innerRadius) + "px";
+      container.appendChild(inner);
+
+      makeDraggable(outer, inner);
+
+      circles[i].push({ x, y, outer: { el: outer }, inner: inner });
     }
   }
 }
 
-function makeDraggable(el) {
-  el.onmousedown = (e) => {
-    draggingCircle = el;
+function makeDraggable(outerEl, innerEl) {
+  outerEl.onmousedown = (e) => {
+    draggingCircle = outerEl;
     offsetX = e.offsetX;
     offsetY = e.offsetY;
-    el.style.cursor = "grabbing";
+    outerEl.style.cursor = "grabbing";
+
     document.onmousemove = (e) => {
       const rect = container.getBoundingClientRect();
-      el.style.left = (e.clientX - rect.left - offsetX) + "px";
-      el.style.top = (e.clientY - rect.top - offsetY) + "px";
-      updateCirclePosition(el);
+      const newX = e.clientX - rect.left - offsetX;
+      const newY = e.clientY - rect.top - offsetY;
+      outerEl.style.left = newX + "px";
+      outerEl.style.top = newY + "px";
+
+      const x = newX + radius;
+      const y = newY + radius;
+
+      innerEl.style.left = (x - innerRadius) + "px";
+      innerEl.style.top = (y - innerRadius) + "px";
+
+      console.log(e)
+      updateCirclePosition(e.target);
     };
+
     document.onmouseup = () => {
       document.onmousemove = null;
       draggingCircle = null;
-      el.style.cursor = "grab";
+      outerEl.style.cursor = "grab";
     };
   };
 }
 
 function updateCirclePosition(el) {
   for (let i = 0; i < circles.length; i++) {
     for (let j = 0; j < circles[i].length; j++) {
-      if (circles[i][j].el === el) {
+      if (circles[i][j].outer.el === el) {
         circles[i][j].x = parseInt(el.style.left) + radius;
         circles[i][j].y = parseInt(el.style.top) + radius;
       }
     }
   }
 }
 
+document.addEventListener("keydown", (e) => {
+  const keys = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "+", "-", "k", "l"];
+  if (keys.includes(e.key)) {
+    e.preventDefault();
+    if (e.key === "ArrowUp") moveCircles(0, -5);
+    if (e.key === "ArrowDown") moveCircles(0, 5);
+    if (e.key === "ArrowLeft") moveCircles(-5, 0);
+    if (e.key === "ArrowRight") moveCircles(5, 0);
+    if (e.key === "+") resizeCircles(1.1);
+    if (e.key === "-") resizeCircles(0.9);
+    if (e.key === "k") resizeInnerCircles(1.1);
+    if (e.key === "l") resizeInnerCircles(0.9);
+  }
+});
+
 function moveCircles(dx, dy) {
   circles.flat().forEach(c => {
     c.x += dx;
     c.y += dy;
-    c.el.style.left = (c.x - radius) + "px";
-    c.el.style.top = (c.y - radius) + "px";
+    c.outer.el.style.left = (c.x - radius) + "px";
+    c.outer.el.style.top = (c.y - radius) + "px";
+    c.inner.style.left = (c.x - innerRadius) + "px";
+    c.inner.style.top = (c.y - innerRadius) + "px";
   });
 }
 
 function resizeCircles(factor) {
-  radius = Math.round(radius*factor);
-  console.log(radius)
+  radius *= factor;
+  innerRadius *= factor;
+  radius = Math.round(radius);
+  innerRadius = Math.round(innerRadius);
   circles.flat().forEach(c => {
-    c.el.style.width = c.el.style.height = radius * 2 + "px";
-    c.el.style.left = (c.x - radius) + "px";
-    c.el.style.top = (c.y - radius) + "px";
+    c.outer.el.style.width = c.outer.el.style.height = radius * 2 + "px";
+    c.outer.el.style.left = (c.x - radius) + "px";
+    c.outer.el.style.top = (c.y - radius) + "px";
+    c.inner.style.width = c.inner.style.height = innerRadius * 2 + "px";
+    c.inner.style.left = (c.x - innerRadius) + "px";
+    c.inner.style.top = (c.y - innerRadius) + "px";
   });
 }
 
-function exportCoords() {
-  let m = circles.length;
-  let n = (m > 0) ? circles[0].length : 0;
-  let result = "coords = [\n";
-  for (let i = 0; i < m; i++) {
-    result += "  [";
-    for (let j = 0; j < n; j++) {
-      let x = Math.round(circles[i][j].x);
-      let y = Math.round(circles[i][j].y);
-      result += `[${x}, ${y}]${j < n - 1 ? ", " : ""}`;
+function resizeInnerCircles(factor) {
+  innerRadius *= factor;
+  circles.flat().forEach(c => {
+    c.inner.style.width = c.inner.style.height = innerRadius * 2 + "px";
+    c.inner.style.left = (c.x - innerRadius) + "px";
+    c.inner.style.top = (c.y - innerRadius) + "px";
+  });
+}
+
+document.getElementById("fileInput").onchange = (e) => {
+  loadImageFromFile(e.target.files[0]);
+};
+
+function handleDrop(e) {
+  e.preventDefault();
+  const file = e.dataTransfer.files[0];
+  if (file) loadImageFromFile(file);
+}
+
+container.addEventListener("dragover", (e) => e.preventDefault());
+container.addEventListener("drop", handleDrop);
+
+document.addEventListener("paste", (e) => {
+  const items = e.clipboardData.items;
+  for (let i = 0; i < items.length; i++) {
+    if (items[i].type.indexOf("image") !== -1) {
+      const blob = items[i].getAsFile();
+      loadImageFromFile(blob);
     }
-    result += `]${i < m - 1 ? ",\n" : ""}`;
   }
-  result += "\n]";
-  console.log(result);
-  navigator.clipboard.writeText(result)
-    .then(() => alert("Copied coordinates to clipboard!"))
-    .catch(err => alert("Failed to copy: " + err));
+});
+
+function loadImageFromFile(file) {
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    img.onload = () => {
+      resizeCanvasToImage();
+      drawImage();
+      clearCircles();
+    };
+    img.src = e.target.result;
+  };
+  reader.readAsDataURL(file);
 }
 
 function getMeanGrayAt(x, y, radius) {
@@ -197,19 +275,21 @@
       const dx = i - radius;
       const dy = j - radius;
       if (dx * dx + dy * dy <= radius * radius) {
-        const idx = (j * radius * 2 + i) * 4;
-
-        const r = data[idx];
-        const g = data[idx + 1];
-        const b = data[idx + 2];
-        const gray = 0.299 * r + 0.587 * g + 0.114 * b;
-        sum += gray;
-        count++;
-
-        // Color this pixel red
-        //data[idx] = 255;
-        //data[idx + 1] = 0;
-        //data[idx + 2] = 0;
+        if (dx * dx + dy * dy >= innerRadius * innerRadius) {
+          const idx = (j * radius * 2 + i) * 4;
+
+          const r = data[idx];
+          const g = data[idx + 1];
+          const b = data[idx + 2];
+          const gray = 0.299 * r + 0.587 * g + 0.114 * b;
+          sum += gray;
+          count++;
+
+          // Color this pixel red
+          //data[idx] = 255;
+          //data[idx + 1] = 0;
+          //data[idx + 2] = 0;
+        }
       }
     }
   }
@@ -220,7 +300,6 @@
   return count > 0 ? +(sum / count).toFixed(1) : 0;
 }
 
-
 function showGrayLevels() {
   let m = circles.length;
   let n = (m > 0) ? circles[0].length : 0;
@@ -238,51 +317,6 @@
   result += "\n]";
   document.getElementById("grayOutput").value = result;
 }
-
-document.addEventListener("keydown", (e) => {
-  if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "+", "-"].includes(e.key)) {
-    e.preventDefault();
-    if (e.key === "ArrowUp") moveCircles(0, -5);
-    if (e.key === "ArrowDown") moveCircles(0, 5);
-    if (e.key === "ArrowLeft") moveCircles(-5, 0);
-    if (e.key === "ArrowRight") moveCircles(5, 0);
-    if (e.key === "+") resizeCircles(1.1);
-    if (e.key === "-") resizeCircles(0.9);
-  }
-});
-
-document.getElementById("fileInput").onchange = (e) => {
-  loadImageFromFile(e.target.files[0]);
-};
-
-function handleDrop(e) {
-  e.preventDefault();
-  const file = e.dataTransfer.files[0];
-  if (file) loadImageFromFile(file);
-}
-
-document.addEventListener("paste", (e) => {
-  const items = e.clipboardData.items;
-  for (let i = 0; i < items.length; i++) {
-    if (items[i].type.indexOf("image") !== -1) {
-      const blob = items[i].getAsFile();
-      loadImageFromFile(blob);
-    }
-  }
-});
-
-function loadImageFromFile(file) {
-  const reader = new FileReader();
-  reader.onload = (e) => {
-    img.onload = () => {
-      resizeCanvasToImage();
-      drawImage();
-      clearCircles();
-    };
-    img.src = e.target.result;
-  };
-  reader.readAsDataURL(file);
-}
 </script>
 
 </body>