Playground styles (#3)

w8r · web-flow · commit ba011167f9fc · 2022-08-10T16:57:58.000+02:00
* Playground styles

* Readme
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
 # `segment-intersection`
 
+Fast segment 2D intersection, that includes edge cases, such as segments touching points, or one segment being on top of the other.
+
 ## API
 
 ```ts
@@ -10,6 +12,19 @@ console.log(isect); // 0, 1 or 2
 console.log(intersection); // [[x, y], [x, y]]
 ```
 
+If `isect === 1`, your intersection point is `intersection[0]`.
+
+Also, you can write into an existing array:
+
+```ts
+import { findIntersection } from 'segment-intersection';
+const intersection = [
+  [0, 0],
+  [0, 0],
+];
+const isect = findIntersection(x0, y0, x1, y1, x2, y2, x3, y3, intersection);
+```
+
 ### Benchmark
 
 ```
diff --git a/playground/index.html b/playground/index.html
@@ -7,5 +7,15 @@
   </head>
   <body>
     <script type="module" src="./main.ts"></script>
+    <iframe
+      id="fork-button"
+      src="https://ghbtns.com/github-btn.html?user=w8r&repo=2d-segment-intersection&type=star&count=true"
+      frameborder="0"
+      scrolling="0"
+      width="150"
+      height="20"
+      title="GitHub"
+    ></iframe>
+    <div id="output"></div>
   </body>
 </html>
diff --git a/playground/main.ts b/playground/main.ts
@@ -21,13 +21,12 @@ const height = window.innerHeight;
 const resolution = 20;
 const r = 15;
 
-const points = new Array(4).fill(0).map((_, i) => {
-  return {
-    x: round(Math.random() * (width - r * 2), resolution),
-    y: round(Math.random() * (height - r * 2), resolution),
-    index: i,
-  };
-});
+const points = [
+  { x: 280, y: 260, index: 0 },
+  { x: 580, y: 120, index: 1 },
+  { x: 380, y: 130, index: 2 },
+  { x: 580, y: 240, index: 3 },
+];
 
 const drag = d3Drag<SVGCircleElement, Point>().on('drag', dragged);
 const svg = d3Select('body')
@@ -113,6 +112,14 @@ function dragged(
 
   d3Select(this).attr('cx', d.x).attr('cy', d.y);
 
+  highlightIntersections();
+}
+
+function round(p: number, n: number) {
+  return p % n < n / 2 ? p - (p % n) : p + n - (p % n);
+}
+
+function highlightIntersections() {
   const isect = findIntersection(
     points[0].x,
     points[0].y,
@@ -134,13 +141,23 @@ function dragged(
     intersectionPoints.classed('hidden', true);
   } else if (isect === 1) {
     // 1 intersection point
+    intersectionPoints.classed('hidden', true);
     intersectionPoints.filter((_, i) => i === 0).classed('hidden', false);
   } else if (isect === 2) {
     // 2 intersection points
     intersectionPoints.classed('hidden', false);
   }
+  document.getElementById('output')!.innerHTML =
+    isect === 0
+      ? ''
+      : isect === 1
+      ? `${formatPoint(intersection[0])}`
+      : `${formatPoint(intersection[0])},\n${formatPoint(intersection[1])}`;
+  console.log('Intersection: ', isect);
 }
 
-function round(p: number, n: number) {
-  return p % n < n / 2 ? p - (p % n) : p + n - (p % n);
+function formatPoint([x, y]: [number, number]) {
+  return `${x.toFixed(2)}, ${y.toFixed(2)}`;
 }
+
+highlightIntersections();
diff --git a/playground/style.css b/playground/style.css
@@ -1,7 +1,7 @@
 body {
   margin: 0;
   padding: 0;
-  background: #eee;
+  background: rgb(242, 242, 242);
   width: 100vw;
   height: 100vh;
   display: flex;
@@ -12,17 +12,17 @@ body {
 
 svg {
   box-sizing: border-box;
-  border: 1px solid rgb(212, 212, 212);
 }
 
 circle {
   stroke: rgb(95, 176, 228);
   stroke-width: 2;
   fill: rgba(205, 246, 255);
+  cursor: pointer;
 }
 
 line {
-  stroke: rgb(212, 212, 212);
+  stroke: #ddd;
   stroke-width: 1px;
 }
 
@@ -35,6 +35,24 @@ line {
   display: none;
 }
 
+#fork-button {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  cursor: pointer;
+}
+
 .intersection {
   fill: rgba(205, 46, 55, 0.85);
 }
+
+#output {
+  position: absolute;
+  top: 60px;
+  left: 20px;
+  font-size: 14px;
+  background-color: #dedede;
+  padding: 10px;
+  width: 120px;
+  font-family: Georgia, 'Times New Roman', Times, serif;
+}
diff --git a/src/index.ts b/src/index.ts
@@ -16,6 +16,7 @@ export function findIntersection(
   p1y: number,
   d1x: number,
   d1y: number,
+  out = result,
   sqrEpsilon = 1e-6
 ): number {
   // segments P0 + s * D0 for s in [0, 1], P1 + t * D1 for t in [0,1]
@@ -47,7 +48,7 @@ export function findIntersection(
     // intersection of lines is not a point on segment P1 + t * D1
     if (t < 0 || t > 1) return 0;
 
-    const res0 = result[0];
+    const res0 = out[0];
     // intersection of lines is a point on each segment
     if (s === 0 || s === 1) {
       // on an endpoint of line segment a
@@ -114,12 +115,12 @@ export function findIntersection(
   }
 
   if (imax > 0) {
-    const res0 = result[0];
+    const res0 = out[0];
     res0[0] = p0x + w0 * vax;
     res0[1] = p0y + w0 * vay;
 
     if (imax === 2) {
-      const res1 = result[1];
+      const res1 = out[1];
       res1[0] = p0x + w1 * vax;
       res1[1] = p0y + w1 * vay;
     }
diff --git a/tests/unit.test.ts b/tests/unit.test.ts
@@ -136,17 +136,7 @@ describe('segment intersection', () => {
     ).toBe(2);
     // fails due to floating point error
     expect(
-      findIntersection(
-        0,
-        0,
-        1e20,
-        1e-11,
-        1,
-        0,
-        100000000000000020000,
-        1e-12,
-        1e-20
-      )
+      findIntersection(0, 0, 1e20, 1e-11, 1, 0, 100000000000000020000, 1e-12)
     ).toBe(2);
   });
 });
