Update curve such that child cells overlap parent (#22)

Author: felixpalmer

examples/website/lattice/app.tsx

@@ -78,6 +78,53 @@ export const quaternaryToFlips = (n: Quaternary): [Flip, Flip] => {
 
 const FLIP_SHIFT = vec2.fromValues(-1, 1) as IJ;
 
+
+// Patterns used to rearrange the cells when shifting. This adjusts the layout so that
+// children always overlap with their parent cells.
+function reversePattern(pattern: number[]): number[] {
+  return Array.from({length: pattern.length}, (_, i) => pattern.indexOf(i));
+}
+
+const PATTERN = [0, 1, 3, 4, 5, 6, 7, 2];
+const PATTERN_FLIPPED = [0, 1, 2, 7, 3, 4, 5, 6];
+const PATTERN_REVERSED = reversePattern(PATTERN);
+const PATTERN_FLIPPED_REVERSED = reversePattern(PATTERN_FLIPPED);
+
+const _shiftDigits = (
+  digits: Quaternary[],
+  i: number,
+  flips: [Flip, Flip],
+  invertJ: boolean,
+  pattern: number[]
+): void => {
+  if (i <= 0) return;
+
+  const parentK = digits[i] || 0;
+  const childK = digits[i - 1];
+  const F = flips[0] + flips[1];
+
+  // Detect when cells need to be shifted
+  let needsShift: boolean = true;
+  let first: boolean = true;
+
+  // The value of F which cells need to be shifted
+  // The rule is flipped depending on the orientation, specifically on the value of invertJ
+  if (invertJ !== (F === 0)) {
+    needsShift = parentK === 1 || parentK === 2; // Second & third pentagons only
+    first = parentK === 1; // Second pentagon is first
+  } else {
+    needsShift = parentK < 2; // First two pentagons only
+    first = parentK === 0; // First pentagon is first
+  }
+  if (!needsShift) return;
+  
+  // Apply the pattern by setting the digits based on the value provided
+  const src = first ? childK : childK + 4;
+  const dst = pattern[src];
+  digits[i - 1] = dst % 4 as Quaternary;
+  digits[i] = (parentK + 4 + Math.floor(dst / 4) - Math.floor(src / 4)) % 4 as Quaternary;
+}
+
 export const sToAnchor = (s: number | bigint, resolution: number, orientation: Orientation): Anchor => {
   let input = BigInt(s);
   const reverse = orientation === 'vu' || orientation === 'wu' || orientation === 'vw';
@@ -86,7 +133,7 @@ export const sToAnchor = (s: number | bigint, resolution: number, orientation: O
   if (reverse) {
     input = (1n << BigInt(2 * resolution)) - input - 1n;
   }
-  const anchor = _sToAnchor(input);
+  const anchor = _sToAnchor(input, resolution, invertJ, flipIJ);
   if (flipIJ) {
     const { offset: [_i, _j], flips: [flipX, flipY] } = anchor;
     anchor.offset = [_j, _i] as IJ;
@@ -106,30 +153,39 @@ export const sToAnchor = (s: number | bigint, resolution: number, orientation: O
   return anchor;
 }
 
-export const _sToAnchor = (s: number | bigint): Anchor => {
-  const k = Number(s) % 4 as Quaternary;
+export const _sToAnchor = (s: number | bigint, resolution: number, invertJ: boolean, flipIJ: boolean): Anchor => {
   const offset = vec2.create() as KJ;
   const flips = [NO, NO] as [Flip, Flip];
   let input = BigInt(s);
 
   // Get all quaternary digits first
   const digits: Quaternary[] = [];
-  while (input > 0n) {
+  while (input > 0n || digits.length < resolution) {
     digits.push(Number(input % 4n) as Quaternary);
     input = input >> 2n;
   }
-  
+
+  const pattern = flipIJ ? PATTERN_FLIPPED : PATTERN;
+
   // Process digits from left to right (most significant first)
+  for (let i = digits.length - 1; i >= 0; i--) {
+    _shiftDigits(digits, i, flips, invertJ, pattern);
+    vec2.multiply(flips, flips, quaternaryToFlips(digits[i]));
+  }
+
+  flips[0] = NO; flips[1] = NO; // Reset flips for the next loop
   for (let i = digits.length - 1; i >= 0; i--) {
     // Scale up existing anchor
     vec2.scale(offset, offset, 2);
-    
+
     // Get child anchor and combine with current anchor
     const childOffset = quaternaryToKJ(digits[i], flips);
     vec2.add(offset, offset, childOffset);
     vec2.multiply(flips, flips, quaternaryToFlips(digits[i]));
   }
 
+  const k = digits[0] || 0 as Quaternary;
+
   return {flips, k, offset: KJToIJ(offset)};
 }
 
@@ -182,26 +238,26 @@ export const IJToS = (input: IJ, resolution: number, orientation: Orientation =
     ij[1] = (1 << resolution) - (i + j);
   }
 
-  let S = _IJToS(ij);
+  let S = _IJToS(ij, invertJ, flipIJ, resolution);
   if (reverse) {
     S = (1n << BigInt(2 * resolution)) - S - 1n;
   }
   return S;
 }
 
-export const _IJToS = (input: IJ): bigint => {
+export const _IJToS = (input: IJ, invertJ: boolean, flipIJ: boolean, resolution: number): bigint => {
   // Get number of digits we need to process
-  const numDigits = getRequiredDigits(input);
+  const numDigits = resolution;
   const digits: Quaternary[] = new Array(numDigits);
 
   const flips: [Flip, Flip] = [NO, NO];
   const pivot = vec2.create() as IJ;
 
   // Process digits from left to right (most significant first)
-  for (let i = 0; i < numDigits; i++) {
+  for (let i = numDigits - 1; i >= 0; i--) {
     const relativeOffset = vec2.subtract(vec2.create(), input, pivot) as IJ;
 
-    const scale = 1 << (numDigits - 1 - i);
+    const scale = 1 << i;
     const scaledOffset = vec2.scale(vec2.create(), relativeOffset, 1 / scale) as IJ;
 
     const digit = IJtoQuaternary(scaledOffset, flips);
@@ -214,9 +270,16 @@ export const _IJToS = (input: IJ): bigint => {
     vec2.multiply(flips, flips, quaternaryToFlips(digit));
   }
 
+  const pattern = flipIJ ? PATTERN_FLIPPED_REVERSED : PATTERN_REVERSED;
+
+  for (let i = 0; i < digits.length; i++) {
+    vec2.multiply(flips, flips, quaternaryToFlips(digits[i]));
+    _shiftDigits(digits, i, flips, invertJ, pattern);
+  }
+
   let output = 0n;
-  for (let i = 0; i < numDigits; i++) {
-    const scale = 1n << BigInt(2 * (numDigits - 1 - i));
+  for (let i = numDigits - 1; i >= 0; i--) {
+    const scale = 1n << BigInt(2 * i);
     output += BigInt(digits[i]) * scale;
   }
 

modules/core/hilbert.ts

@@ -53,7 +53,7 @@ const v: Face = [L * Math.cos(V), L * Math.sin(V)] as Face;
 
 const W = bisectorAngle - PI_OVER_5;
 const w: Face = [L * Math.cos(W), L * Math.sin(W)] as Face;
-const TRIANGLE = new PentagonShape([u, v, w, w, w]); // TODO hacky, don't pretend this is pentagon
+const TRIANGLE = new PentagonShape([u, v, w] as any); // TODO hacky, don't pretend this is pentagon
 
 /**
  * Basis vectors used to layout primitive unit

modules/core/pentagon.ts

@@ -4,8 +4,7 @@
 
 import {vec2, mat2, mat2d, vec3, glMatrix, quat} from 'gl-matrix';
 glMatrix.setMatrixArrayType(Float64Array as any);
-import type { Radians, Spherical, Cartesian, Face, Degrees, LonLat } from './coordinate-systems';
-import { Triangle } from './triangle';
+import type { Radians, Spherical, Face, Degrees, LonLat } from './coordinate-systems';
 import { Orientation } from "./hilbert";
 
 export type Origin = {
@@ -22,7 +21,6 @@ export type Pentagon = [Face, Face, Face, Face, Face];
 export class PentagonShape {
   private vertices: Pentagon;
   public id: {i: number, j: number, k: number, resolution: number, segment?: number, origin?: Origin};
-  private triangles?: Triangle[];
 
   constructor(vertices: Pentagon) {
     this.vertices = vertices;
@@ -53,12 +51,18 @@ export class PentagonShape {
 
   /**
    * Reflects the pentagon over the x-axis (equivalent to negating y)
+   * and reverses the winding order to maintain consistent orientation
    * @returns The reflected pentagon
    */
   reflectY(): PentagonShape {
+    // First reflect all vertices
     for (const vertex of this.vertices) {
       vertex[1] = -vertex[1];
     }
+    
+    // Then reverse the winding order to maintain consistent orientation
+    this.vertices.reverse();
+    
     return this;
   }
 
@@ -96,32 +100,34 @@ export class PentagonShape {
   }
 
   /**
-   * Tests if a point is inside the pentagon by checking if it's in any of the three triangles
-   * that make up the pentagon. Assumes pentagon is convex.
+   * Tests if a point is inside the pentagon by checking if it's on the correct side of all edges.
+   * Assumes consistent winding order (counter-clockwise).
    * @param point The point to test
    * @returns true if the point is inside the pentagon
    */
   containsPoint(point: vec2): boolean {
-    // Split pentagon into three triangles from first vertex
-    const v0 = this.vertices[0];
-    
-    if (!this.triangles) {
-      this.triangles = [];
-      // Order triangles by size to increase chance of early return
-      for (const i of [2, 1, 3]) {
-        const v1 = this.vertices[i];
-        const v2 = this.vertices[i + 1];
-        this.triangles.push(new Triangle(v0, v1, v2));
-      }
-    }
-
-    for (const triangle of this.triangles) {
-      if (triangle.containsPoint(point)) {
-        return true;
+    // For each edge of the pentagon
+    const N = this.vertices.length;
+    for (let i = 0; i < N; i++) {
+      const v1 = this.vertices[i];
+      const v2 = this.vertices[(i + 1) % N];
+      
+      // Calculate the cross product to determine which side of the line the point is on
+      // (v2 - v1) × (point - v1)
+      const dx = v2[0] - v1[0];
+      const dy = v2[1] - v1[1];
+      const px = point[0] - v1[0];
+      const py = point[1] - v1[1];
+      
+      // Cross product: dx * py - dy * px
+      // If positive, point is on the wrong side
+      // If negative, point is on the correct side
+      if (dx * py - dy * px > 0) {
+        return false;
       }
     }
-
-    return false;
+    
+    return true;
   }
 
   /**

modules/core/triangle.ts

@@ -0,0 +1,55 @@
+import { describe, it, expect } from 'vitest';
+import { PentagonShape, Pentagon } from 'a5/core/utils';
+import { Orientation } from 'a5/core/hilbert';
+import { sToAnchor } from 'a5/core/hilbert';
+import { getPentagonVertices } from 'a5/core/tiling';
+import { vec2 } from 'gl-matrix';
+
+function generateCells(resolution: number, orientation: Orientation): vec2[][] {
+  const sequence = Array.from({length: Math.pow(4, resolution)}, (_, i) => i);
+  const anchors = sequence.map(s => sToAnchor(s, resolution, orientation));
+  return anchors.map(anchor => 
+    getPentagonVertices(resolution, 0, anchor).getVertices()
+  );
+}
+
+function verifyHierarchy(resolution: number, orientation: Orientation): void {
+  const level1Cells = generateCells(resolution, orientation);
+  const level2Cells = generateCells(resolution + 1, orientation);
+
+  let failedPentagon: PentagonShape | null = null;
+  let failedChild: vec2[] | null = null;
+  for (let i = 0; i < level2Cells.length; i++) {
+    const child = level2Cells[i];
+    const parent = level1Cells[Math.floor(i / 4)];
+    const pentagon = new PentagonShape(parent as Pentagon);
+    let contained = false;
+    for (const vertex of child) {
+      if (pentagon.containsPoint(vertex)) {
+        contained = true;
+        break;
+      }
+    }
+    if (!contained) {
+      failedPentagon = pentagon;
+      failedChild = child;
+    }
+  }
+  if (failedPentagon && failedChild) {
+    console.log('Pentagon:', failedPentagon.getVertices());
+    console.log('did not contain any of:', failedChild);
+  }
+  expect(failedPentagon).toBeNull();
+  expect(failedChild).toBeNull();
+}
+
+describe('Cell Hierarchy', () => {
+  const orientations: Orientation[] = ['uv', 'vu', 'uw', 'wu', 'vw', 'wv'];
+  orientations.forEach(orientation => {
+    [1, 2, 3, 4, 5, 6].forEach(resolution => {
+      it(`Hierarchy ${orientation} correct for resolution ${resolution}`, () => {
+        verifyHierarchy(resolution, orientation);
+      });
+    });
+  });
+});