Delaunay demo

doc22940 · Nov 25, 2017 · d880035 · d880035
1 parent fe0c848
commit d880035
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 18 deletions.
diff --git a/demo/create.delaunay.js b/demo/create.delaunay.js
@@ -1,42 +1,87 @@
-window.demoDescription = "Draw shapes based on the size of space. Resize the window and the drawing will update.";
+window.demoDescription = "Generate Delaunay and Voronoi tessellations. When 100 points are added, the diagram will animate and display guidelines at pointer position.";
 
 (function() {
 
   Pts.namespace( this );
 
-  var space = new CanvasSpace("#pt").setup({bgcolor: "#96bfed", resize: true, retina: true});
+  var space = new CanvasSpace("#pt").setup({bgcolor: "#123", resize: true, retina: true});
   var form = space.getForm();
 
 
   //// Demo code ---
 
 
-  var de = new Delaunay();
-  let dd = [];
-  let ddd = [];
+  var de = new Delaunay(); // Delaunay is a Group of Pts
+  var triangles = []; // store the delaunay triangles
+  var cells = []; // store the voronoi cells
+  var lastPt = new Pt();
+
+
+  // A simple function to repel the points if they are too close
+  let repel = (size) => {
+    for (let k=0, len=de.length; k<len; k++) {
+      for (let i=0, len=de.length; i<len; i++) {
+        if ( i !== k ) {
+          let d =  de[k].$subtract( de[i] );
+          if ( d.magnitudeSq() < size*size ) {
+            de[k].subtract( d.$divide( -size/3 ) );
+            de[i].subtract( d.$divide( size/3 ) );
+          }
+        }
+      }
+    }
+  }
+
 
   space.add({ 
+
     start: (bound) => {
-      de = Delaunay.from( Create.distributeRandom( space.innerBound, 200 ) );
-      dd = de.delaunay();
-      ddd= de.voronoi();
+
+      // Create 20 random points and generate initial tessellations
+      de = Create.delaunay( Create.distributeRandom( space.innerBound, 20 ) );
+      triangles = de.delaunay();
+      cells= de.voronoi();
     },
 
     animate: (time, ftime) => {
-
-      let nearIndex = Polygon.nearestPt( de, space.pointer );
-
-      let neighbors = de.neighbors( nearIndex, true ).map( (n) => n.triangle );
 
-      form.strokeOnly("#f00", 3).polygons( neighbors );
-
-      form.strokeOnly("#f00", 1).polygons( dd );
-      form.fillOnly("#000").points( de, 3 );
+      // draw the cells
+      form.strokeOnly("#fff", 1).polygons( triangles );
+      form.fill("#0c9").points( de, 2, "circle" );      
+      form.strokeOnly("#0fc").polygons( cells );
+
+      // If more than 100 pts are added, do fancy things
+      if (de.length >= 100) {
+        de[de.length-1] = space.pointer;
+        repel( 50 );
+        triangles = de.delaunay();
+        cells= de.voronoi();
+
+        // Guides: Show the neighbor cells of the point nearest to pointer
+        let nearIndex = Polygon.nearestPt( de, space.pointer );
+        de.neighbors( nearIndex, true ).map( (n) => {
+          form.strokeOnly("rgba(255,255,0, .9)", 3).polygon( n.triangle );
+          form.strokeOnly("rgba(255,255,0,.3)", 1).circle( n.circle );
+          form.fillOnly("#fe6", 1).point( n.circle[0], 2 );
+        });
+      }
 
-
-      form.stroke("#fff").fill("rgba(255,255,0,.2)").polygons( ddd );
     },
 
+    action: (type, x, y) => {
+
+      // Add up to 100 points on mouse move
+      if (type == "move" && de.length < 100) {
+        let p = new Pt(x,y);
+        if (lastPt.$subtract(p).magnitudeSq() > 400) {
+          lastPt = p;
+          de.push( p );
+          triangles = de.delaunay();
+          cells= de.voronoi();
+        }
+      }
+    }
+
   });
 
   //// ----

diff --git a/demo/index.html b/demo/index.html
@@ -129,6 +129,7 @@ <h1><strong>Demo</strong><span id="description"></span></h1>
         <p class="demo" data-src="shaping.linear"><span>Shaping.</span><strong>linear</strong></p>
         <p class="demo" data-src="create.gridcells"><span>Create.</span><strong>gridCells</strong></p>
         <p class="demo" data-src="create.noisePts"><span>Create.</span><strong>noisePts</strong></p>
+        <p class="demo" data-src="create.delaunay"><span>Create.</span><strong>delaunay</strong></p>
         <p class="demo" data-src="svgform.scope"><span>SVGForm.</span><strong>scope</strong></p>
         <p class="demo" data-src="htmlform.scope"><span>HTMLForm.</span><strong>scope</strong></p>
 

diff --git a/dist/pts.js b/dist/pts.js
diff --git a/src/Create.ts b/src/Create.ts
@@ -129,6 +129,16 @@ export class Create {
     }
     return g;
   }
+
+
+  /**
+   * Create a Delaunay Group. Use the `.delaunay()` and `.voronoi()` functions in the returned group to generate tessellations.
+   * @param pts a Group or an array of Pts
+   * @returns an instance of the Delaunay class
+   */
+  static delaunay( pts:GroupLike ):Delaunay {
+    return Delaunay.from( pts ) as Delaunay;
+  }
 
 }