Tweak warp parameters (#28)

Author: felixpalmer

examples/website/area/app.tsx

@@ -15,19 +15,24 @@ import {pentagonArea} from 'a5/core/utils';
 const H3_RESOLUTION = 1; // 1
 const A5_RESOLUTION = 4; // 4
 
+const AUTHALIC_RADIUS = 6371.0072; // km
+const AUTHALIC_AREA = 4 * Math.PI * AUTHALIC_RADIUS * AUTHALIC_RADIUS;
+
 // 'Bold' color scheme
 const COLORS = ['#7F3C8D', '#11A579', '#3969AC', '#F2B701', '#E73F74', '#80BA5A', '#E68310', '#008695', '#CF1C90', '#f97b72', '#4b4b8f', '#A5AA99'];
 
 // Add Controls component
 const Controls: React.FC<{
   areaLimits: [number, number];
+  authalicAverageArea: number;
   perimeterLimits: [number, number];
   tilingSystem: 'h3' | 'a5';
   onTilingSystemChange: (system: 'h3' | 'a5') => void;
-}> = ({areaLimits, perimeterLimits, tilingSystem, onTilingSystemChange}) => {
+}> = ({areaLimits, authalicAverageArea, perimeterLimits, tilingSystem, onTilingSystemChange}) => {
   const [minArea, maxArea] = areaLimits;
   const [minPerimeter, maxPerimeter] = perimeterLimits;
   const areaRatio = maxArea / minArea;
+  const areaError = (maxArea / authalicAverageArea - 1) * 100; // Percent that largest cell is larger than authalic average
   const perimeterRatio = maxPerimeter / minPerimeter;
 
   return (
@@ -59,6 +64,8 @@ const Controls: React.FC<{
       <div>Min Area: {minArea.toFixed(2)} km²</div>
       <div>Max Area: {maxArea.toFixed(2)} km²</div>
       <div>Area Ratio: {areaRatio.toFixed(4)}</div>
+      <div>Authalic Average Area: {authalicAverageArea.toFixed(2)} km²</div>
+      <div style={{fontWeight: 'bold'}}>Area Error: {areaError.toFixed(2)}%</div>
 
       <h3 style={{margin: '12px 0 8px', fontSize: '14px'}}>Area Statistics</h3>
       <div>Min Perimeter: {minPerimeter.toFixed(2)} km</div>
@@ -668,6 +675,10 @@ const App: React.FC<{ isMobile?: boolean }> = ({ isMobile = false }) => {
     }
   }
 
+  // Cell count
+  const cellCount = tilingSystem === 'h3' ? h3Output.length : a5Output.length;
+  const authalicAverageArea = AUTHALIC_AREA / cellCount;
+
   // Combine layers
   const layers = highlightLayer ? [baseLayer, highlightLayer] : [baseLayer];
 
@@ -703,6 +714,7 @@ const App: React.FC<{ isMobile?: boolean }> = ({ isMobile = false }) => {
       </Map>
       <Controls 
         areaLimits={areaLimits}
+        authalicAverageArea={authalicAverageArea}
         perimeterLimits={perimeterLimits}
         tilingSystem={tilingSystem}
         onTilingSystemChange={handleTilingSystemChange}

modules/core/constants.ts

@@ -23,7 +23,12 @@ export const distanceToEdge = φ - 1;
 export const distanceToVertex = distanceToEdge / Math.cos(PI_OVER_5);
 
 // Warping parameters
-export const WARP_FACTOR = 0.515; // Set to near 0 to disable warping
+export const WARP_FACTORS = {
+   BETA_SCALE: 0.5115918059668587,
+   RHO_SHIFT: 0.9461616498962347,
+   RHO_SCALE: 0.04001633808056544,
+   RHO_SCALE2: 0.008305829720486808,
+}
 
 // Dodecahedron sphere radii (normalized to unit radius for inscribed sphere)
 /**

modules/core/warp.ts

@@ -3,7 +3,7 @@
 // Copyright (c) A5 contributors
 
 import type { Radians, Polar } from './coordinate-systems';
-import { distanceToEdge, PI_OVER_5, TWO_PI_OVER_5, WARP_FACTOR } from './constants';
+import { distanceToEdge, PI_OVER_5, TWO_PI_OVER_5, WARP_FACTORS } from './constants';
 
 export function normalizeGamma(gamma: Radians): Radians {
   const segment = gamma / TWO_PI_OVER_5;
@@ -16,13 +16,13 @@ export function normalizeGamma(gamma: Radians): Radians {
 }
 
 function _warpBeta(beta: number) {
-  const shiftedBeta = beta * WARP_FACTOR;
-  return Math.tan(shiftedBeta);
+  const x = beta * WARP_FACTORS.BETA_SCALE;
+  return Math.tan(x);
 }
 
 function _unwarpBeta(beta: number) {
   const shiftedBeta = Math.atan(beta);
-  return shiftedBeta / WARP_FACTOR;
+  return shiftedBeta / WARP_FACTORS.BETA_SCALE;
 }
 
 const betaMax = PI_OVER_5;
@@ -33,25 +33,32 @@ export function warpBeta(beta: number): number {
 }
 
 export function unwarpBeta(beta: number): number {
+  const WARP_SCALER = _warpBeta(betaMax) / betaMax;
   return _unwarpBeta(beta * WARP_SCALER);
 }
 
+function rhoScaleFactor(betaRatio: number) {
+  const beta2 = betaRatio * betaRatio;
+  const beta4 = beta2 * beta2;
+  return (WARP_FACTORS.RHO_SHIFT - WARP_FACTORS.RHO_SCALE * beta2 - WARP_FACTORS.RHO_SCALE2 * beta4);
+}
+
 function warpRho(rho: number, beta: number) {
   const betaRatio = Math.abs(beta) / betaMax;
-  const shiftedRho = rho * (0.95 - 0.05 * betaRatio);
+  const shiftedRho = rho * rhoScaleFactor(betaRatio);
   return Math.tan(shiftedRho);
 }
 
 function unwarpRho(rho: number, beta: number) {
   const betaRatio = Math.abs(beta) / betaMax;
   const shiftedRho = Math.atan(rho);
-  return shiftedRho / (0.95 - 0.05 * betaRatio);
+  return shiftedRho / rhoScaleFactor(betaRatio);
 }
 
 export function warpPolar([rho, gamma]: Polar): Polar {
   const beta = normalizeGamma(gamma);
 
-  const beta2 = warpBeta(normalizeGamma(gamma));
+  const beta2 = warpBeta(beta);
   const deltaBeta = beta2 - beta;
 
   // Distance to edge will change, so shift rho to match

tests/warp.test.ts

@@ -76,8 +76,8 @@ describe('warpBeta', () => {
   const TEST_VALUES = [
     {input: 0, expected: 0},
     {input: 0.1, expected: 0.09657},
-    {input: -0.2, expected: -0.19366},
-    {input: PI_OVER_10, expected: 0.30579},
+    {input: -0.2, expected: -0.193740},
+    {input: PI_OVER_10, expected: 0.305902},
     {input: PI_OVER_5, expected: PI_OVER_5},
   ];