Remove GA and demo clean up.

Author: williamngan

assets/cover.js

@@ -314,11 +314,16 @@ window.demoDescription = "In a field of bouncing particles, rotate a centered pa
     action: (type, px, py, event) => {
       // A mouse remains over the canvas after a drag ends. Touch and pen input
       // do not, so their drop should remove the collider until the next contact.
+      // An overlay can also cause `pointerout` while the pointer is still inside
+      // the canvas bounds (notably when pointer capture ends over the header).
+      // In that case its header listener keeps the same collider active.
       if (
-        type === "out" ||
-        (type === "drop" && event && event.pointerType !== "mouse")
+        type === "out" &&
+        (!Num.within(px, 0, space.width) || !Num.within(py, 0, space.height))
       ) {
         deactivatePointer();
+      } else if (type === "drop" && event && event.pointerType !== "mouse") {
+        deactivatePointer();
       } else if (type === "move" || type === "drag" || type === "down" || type === "over") {
         movePointer( px, py );
       }

demo/canvasform.composite.js

@@ -46,6 +46,7 @@ Pts.quickStart( "#pt", "#666" );
 
       // Use pointer position to change background and speed
       let speed = space.pointer.$subtract( space.center ).divide( space.center ).abs();
+      let radius = space.size.minValue().value;
 
       let gr = speed.x * 100; // background gray
       form.fill( `rgb(${gr+80},${gr+80},${gr+80})` ).rect( space.innerBound );
@@ -60,8 +61,8 @@ Pts.quickStart( "#pt", "#666" );
 
       for (let k=0, klen=nps.length; k<klen; k++) {
         for (let i=0; i<nums; i++) {
-          let c1 = Circle.fromCenter( nps[k][i], space.size.minValue().value * 0.2 );
-          let c2 = Circle.fromCenter( nps[k][i], space.size.minValue().value * 0.7 );
+          let c1 = Circle.fromCenter( nps[k][i], radius * 0.2 );
+          let c2 = Circle.fromCenter( nps[k][i], radius * 0.7 );
           let grad = gradients[ k===0 ? i : nums-i-1 ];
           form.fillOnly( grad( c1, c2 ) ).circle( c2 );
         } 

demo/canvasform.gradient.js

@@ -9,6 +9,7 @@ window.demoDescription = "Grid cells filled with simple linear gradient, over a
 
   // Pts quick start mode.
   var run = Pts.quickStart( "#pt", "#123" ); 
+  var linear = form.gradient( ["rgba(255,255,255,1)", "rgba(255,255,255,0)"] );
 
   run( (time, ftime) => {
     let scale = space.center.$subtract( space.pointer ).divide( space.center ).abs();
@@ -31,8 +32,7 @@ window.demoDescription = "Grid cells filled with simple linear gradient, over a
 
     // Fill every other grid cells with a simple linear gradient
     for (let i=0, len=cells.length; i<len; i++) {
-      let grad = form.gradient( ["rgba(255,255,255,1)", "rgba(255,255,255,0)"] );
-      form.fillOnly( i%2 === 0 ? grad( cells[i] ) : "rgba(0,0,0,0)" ).rect( cells[i].subtract(0, offy) );
+      form.fillOnly( i%2 === 0 ? linear( cells[i] ) : "rgba(0,0,0,0)" ).rect( cells[i].subtract(0, offy) );
     }
   });
 

demo/color.LABtoRGB.js

@@ -16,7 +16,8 @@ Pts.quickStart( "#pt", "#96bfed" );
 
   function init() {
     let ratio = space.size.x/space.size.y;
-    grid = Create.gridCells( space.innerBound, 20*ratio, 20 );    
+    grid = Create.gridCells( space.innerBound, 20*ratio, 20 );
+    grid.forEach( (cell) => cell[1].ceil() );
   }
 
 
@@ -25,19 +26,13 @@ Pts.quickStart( "#pt", "#96bfed" );
     resize: init,
 
     animate: (time, ftime) => {
-
-      // get LAB color string, given a point position
-      let color = (p) => {
-        let p1 = p.$divide(space.size);
-        let p2 = space.pointer.$divide(space.size);
-        let c1 = cu.$multiply( Pt.make( 4, 1 ).to( p2.x, p1.x-0.5, p1.y-0.5 ) );
-        return Color.LABtoRGB( c1 ).toString("rgb");
-      }
+      let size = space.size;
+      let pointer = space.pointer.$divide( size );
 
       for (let i=0, len=grid.length; i<len; i++) {
-        grid[i][1].ceil();
-        let c = grid[i].interpolate( Num.cycle( (time+i*60)%1000/1000 ) );
-        form.fillOnly( color( c ) ).rect( grid[i] );
+        let p = grid[i].interpolate( Num.cycle( (time+i*60)%1000/1000 ) ).divide( size );
+        let c = cu.$multiply( new Pt( pointer.x, p.x-0.5, p.y-0.5, 1 ) );
+        form.fillOnly( Color.LABtoRGB( c ).toString("rgb") ).rect( grid[i] );
       }
     },
 

demo/create.delaunay.js

@@ -18,14 +18,14 @@ Pts.quickStart( "#pt", "#123" );
 
   // A simple function to repel the points if they are too close
   let repel = (size) => {
+    let sizeSq = size*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 ) );
-          }
+      for (let i=k+1; i<len; i++) {
+        let d = de[k].$subtract( de[i] );
+        if ( d.magnitudeSq() < sizeSq ) {
+          let push = d.$divide( size/6 );
+          de[k].add( push );
+          de[i].subtract( push );
         }
       }
     }
@@ -58,7 +58,7 @@ Pts.quickStart( "#pt", "#123" );
 
         // Guides: Show the neighbor cells of the point nearest to pointer
         let nearIndex = Polygon.nearestPt( de, space.pointer );
-        de.neighbors( nearIndex, true ).map( (n) => {
+        de.neighbors( nearIndex, true ).forEach( (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 );

demo/create.gridcells.js

@@ -24,13 +24,14 @@ Pts.quickStart( "#pt", "#123" );
       form.stroke("#123");
 
       // calculate the size and color of each cell based on its distance to the pointer
-      let rects = pts.map( (p) => {
-        let mag = follower.$subtract( Rectangle.center( p ) ).magnitude()
+      pts.forEach( (p) => {
+        let c = Rectangle.center( p );
+        let mag = follower.$subtract( c ).magnitude();
         let scale = Math.min( 1, Math.abs( 1 - ( 0.7 * mag / space.center.y ) ) );
-        let r = Rectangle.fromCenter( Rectangle.center(p), Rectangle.size(p).multiply( scale ) );
+        let r = Rectangle.fromCenter( c, Rectangle.size(p).multiply( scale ) );
         form.fill( Color.HSLtoRGB( Color.hsl( scale*270, 1, 0.5 ) ).hex ).rect( r );
-      })
-  
+      });
+
       form.fillOnly("#fff").point( space.pointer, 10, "circle" );
     }
 

demo/create.noisePts.js

@@ -29,9 +29,10 @@ Pts.quickStart( "#pt", "#f1f5f9" );
       let speed = space.pointer.$subtract( space.center ).divide( space.center ).abs();
 
       // Generate noise in a grid
-      noiseGrid.map( (p) => {
+      form.fillOnly("#123");
+      noiseGrid.forEach( (p) => {
         p.step( 0.01*speed.x, 0.01*(1-speed.y) );
-        form.fillOnly("#123").point( p, Math.abs( p.noise2D() * space.size.x/18 ) );
+        form.point( p, Math.abs( p.noise2D() * space.size.x/18 ) );
       });
 
       // Generate noise in a line

demo/css/style.css

@@ -98,7 +98,6 @@ html * {
 #page {
   padding: 0 10px 0 40px;
   position: relative;
-  user-select: none;
 }
 
 #cover {
@@ -163,6 +162,12 @@ html * {
   background: #42e;
 }
 
+#hint.error {
+  background: #f34;
+  color: #fff;
+  padding: 5px 8px;
+}
+
 #hint a {
   display: block;
   border: none;
@@ -200,7 +205,6 @@ a:hover {
 }
 
 .demo, .section {
-  cursor: pointer;
   font-size: 12px; 
   line-height: 2; 
   margin: 0;
@@ -210,14 +214,27 @@ a:hover {
   text-overflow: ellipsis;
 }
 
+.demo {
+  cursor: pointer;
+  display: block;
+}
+
 .demo > span {
   /* font-weight: bold; */
   color: #678
 }
 .demo > strong {
   font-weight: 400;
 }
-.demo:hover, .demo:hover > span { color: #42e;}
+.demo:hover, .demo:hover > span,
+.demo:focus-visible, .demo:focus-visible > span { color: #42e;}
+
+.demo:focus-visible,
+#topmenu > a:focus-visible,
+#hint a:focus-visible {
+  outline: 2px solid #42e;
+  outline-offset: 2px;
+}
 
 .section {
   font-weight: 600;
@@ -338,9 +355,4 @@ a:hover {
   .demo {
     padding: 3px 0;
   }
-
-
-  #hint {
-    display: none;
-  }
 }