make a dft computation demo too

Author: jhobbs

content/applied-math/misc/dft.md

@@ -22,3 +22,22 @@ $$ c_n = \frac{1}{N} \sum_{k=0}^{N-1} z_k e^{-2 \pi i n k / N} $$
 * phase angle = $\Arg(c_n)$
 
 * rotation speed = $n$ 
+
+
+Seems to be measuring how well the sample points move around the unit circle at the same rate as the rotation vector?
+
+Let's take $N = 9$ and talk about what happens when our curve is a unit circle.
+
+With frequency $n=0:$ we have no rotations, so, for each sample point, we add the sample point directly to the summation vector. The result is the average of all the sample points, the center of gravity, or DC component. For the unit circle this is $0.$
+
+With frequency $n=-1:$
+
+Starting with $k=0, $ we have $z_0,$ which is at $1.$ Our first rotation doesn't rotate at all, so our summation is now pointing at $1.$
+
+Now at $k=1$, our second sample point $z_1$ is pointing at $\frac{2 \pi}{9}.$ The imaginary component of our exponential $e^{-2 \pi i n k / N}$ gives us
+
+$$ -2 \pi i (-1) (1) / 9} = \frac{2 \pi}{9}. $$
+
+So, our sample point and our rotation are the same. When we multiply them in exponential form, we add the angles, and get $\frac{4 \pi}{9}.$ We take the exponential from our first sample and add it to this exponential, which gives us their average, and we get $\frac{2 \pi}{9}$ as our summation vector so far.
+
+Next at $k=2,$ our sample point is at $\frac{4 \pi}{9}$ and our rotation vector is too. The resulting angle is $\frac{8 \pi}{9}.$ Our summation vector now points at $\frac{5 \pi}{9},$ midway between its previous value and the value of this sample.

demos-framework/src/main.ts

@@ -47,7 +47,8 @@ const demoRegistry: Record<string, () => Promise<DemoModule>> = {
   'cross-product': () => import('@demos/linear-algebra/cross-product'),
   'binary-network': () => import('@demos/network/binary-network'),
   'cauchy-riemann': () => import('@demos/complex-analysis/cauchy-riemann'),
-  'contour-drawing': () => import('@demos/complex-analysis/contour-drawing')
+  'contour-drawing': () => import('@demos/complex-analysis/contour-drawing'),
+  'dft-computation': () => import('@demos/complex-analysis/dft-computation')
 };
 
 // Store for loaded metadata

demos/complex-analysis/cauchy-riemann.ts

@@ -3,6 +3,19 @@ import { DemoInstance, DemoConfig, DemoMetadata } from '@framework/types';
 // @ts-ignore
 import Plotly from 'plotly.js-dist-min';
 import * as math from 'mathjs';
+import {
+  pi as PI, abs, hypot, max as mathMax, min as mathMin, acos, sqrt, ceil, floor, number, Complex
+} from 'mathjs';
+
+// Type for numeric mathjs results we know won't be BigNumber/Fraction/Matrix
+type NumericResult = number | bigint | Complex;
+
+// Helper to extract real part from a mathjs result (number, bigint, or Complex)
+function toReal(val: NumericResult): number {
+  if (typeof val === 'number') return val;
+  if (typeof val === 'bigint') return Number(val);
+  return val.re;
+}
 
 interface Point2D {
   x: number;
@@ -53,7 +66,7 @@ class CauchyRiemannDemo implements DemoInstance {
   // Adaptive sampling parameters
   private minSamples: number = 64;  // Base samples along each line
   private maxRefineLevel: number = 6;  // Maximum refinement depth
-  private angleThreshold: number = Math.PI / 180 * 2;  // Refine when turn angle > 2 degrees
+  private angleThreshold: number = number(PI) / 180 * 2;  // Refine when turn angle > 2 degrees
 
   async init(container: HTMLElement, config: DemoConfig): Promise<void> {
     this.container = container;
@@ -369,8 +382,8 @@ class CauchyRiemannDemo implements DemoInstance {
 
   private checkCauchyRiemannEquations(partials: PartialDerivatives): boolean {
     const tolerance = 0.001;
-    const eq1_satisfied = Math.abs(partials.dudx - partials.dvdy) < tolerance;
-    const eq2_satisfied = Math.abs(partials.dvdx + partials.dudy) < tolerance;
+    const eq1_satisfied = number(abs(partials.dudx - partials.dvdy)) < tolerance;
+    const eq2_satisfied = number(abs(partials.dvdx + partials.dudy)) < tolerance;
     return eq1_satisfied && eq2_satisfied;
   }
 
@@ -433,13 +446,13 @@ class CauchyRiemannDemo implements DemoInstance {
         const v0 = { x: pm.x - p0.x, y: pm.y - p0.y };
         const v1 = { x: p1.x - pm.x, y: p1.y - pm.y };
         const dot = v0.x * v1.x + v0.y * v1.y;
-        const n0 = Math.hypot(v0.x, v0.y);
-        const n1 = Math.hypot(v1.x, v1.y);
+        const n0 = number(hypot(v0.x, v0.y));
+        const n1 = number(hypot(v1.x, v1.y));
 
         let angle = 0;
         if (n0 > 0 && n1 > 0) {
-          const cosAngle = Math.max(-1, Math.min(1, dot / (n0 * n1)));
-          angle = Math.acos(cosAngle);
+          const cosAngle = number(mathMax(-1, mathMin(1, dot / (n0 * n1))));
+          angle = toReal(acos(cosAngle));
         }
 
         if (angle > this.angleThreshold) {
@@ -469,30 +482,30 @@ class CauchyRiemannDemo implements DemoInstance {
     horizontalLines: Point2D[][] // Lines with constant y (horizontal in preimage)
   } {
     const gridStep = 1.0;
-    const min = -Math.ceil(this.gridRange);
-    const max = Math.ceil(this.gridRange);
-    const numLines = Math.floor((max - min) / gridStep) + 1;
+    const minVal = -number(ceil(this.gridRange));
+    const maxVal = number(ceil(this.gridRange));
+    const numLines = number(floor((maxVal - minVal) / gridStep)) + 1;
 
     const verticalLines: Point2D[][] = [];
     const horizontalLines: Point2D[][] = [];
 
     // Generate vertical lines (constant x)
     for (let i = 0; i < numLines; i++) {
-      const xConst = min + i * gridStep;
+      const xConst = minVal + i * gridStep;
       const line: Point2D[] = [];
       for (let j = 0; j < numLines; j++) {
-        const y = min + j * gridStep;
+        const y = minVal + j * gridStep;
         line.push({ x: xConst, y: y });
       }
       verticalLines.push(line);
     }
 
     // Generate horizontal lines (constant y)
     for (let j = 0; j < numLines; j++) {
-      const yConst = min + j * gridStep;
+      const yConst = minVal + j * gridStep;
       const line: Point2D[] = [];
       for (let i = 0; i < numLines; i++) {
-        const x = min + i * gridStep;
+        const x = minVal + i * gridStep;
         line.push({ x: x, y: yConst });
       }
       horizontalLines.push(line);
@@ -577,7 +590,7 @@ class CauchyRiemannDemo implements DemoInstance {
         angleref: 'previous',
         color: color
       },
-      hovertemplate: `${name}<br>Δ = (${dx.toFixed(3)}, ${dy.toFixed(3)})<br>|Δ| = ${Math.sqrt(dx*dx + dy*dy).toFixed(3)}<extra></extra>`
+      hovertemplate: `${name}<br>Δ = (${dx.toFixed(3)}, ${dy.toFixed(3)})<br>|Δ| = ${toReal(sqrt(dx*dx + dy*dy)).toFixed(3)}<extra></extra>`
     };
   }
 
@@ -634,10 +647,10 @@ class CauchyRiemannDemo implements DemoInstance {
     const diff_dx = { x: f_z0_dx.x - f_z0.x, y: f_z0_dx.y - f_z0.y };
     const diff_dy = { x: f_z0_dy.x - f_z0.x, y: f_z0_dy.y - f_z0.y };
 
-    const mag_dx = Math.sqrt(diff_dx.x * diff_dx.x + diff_dx.y * diff_dx.y);
-    const mag_dy = Math.sqrt(diff_dy.x * diff_dy.x + diff_dy.y * diff_dy.y);
-    const angle = Math.acos((diff_dx.x * diff_dy.x + diff_dx.y * diff_dy.y) /
-                           (mag_dx * mag_dy || 1)) * 180 / Math.PI;
+    const mag_dx = toReal(sqrt(diff_dx.x * diff_dx.x + diff_dx.y * diff_dx.y));
+    const mag_dy = toReal(sqrt(diff_dy.x * diff_dy.x + diff_dy.y * diff_dy.y));
+    const angle = toReal(acos((diff_dx.x * diff_dy.x + diff_dx.y * diff_dy.y) /
+                           (mag_dx * mag_dy || 1))) * 180 / number(PI);
 
     // Update validation display
     const crIcon = crSatisfied ? '✓' : '✗';

demos/complex-analysis/contour-drawing.ts

@@ -8,9 +8,19 @@ import {
   createCheckbox,
   InfoDisplay
 } from '@framework/ui-components';
-import { complex, Complex, multiply, add, divide } from 'mathjs';
+import { complex, Complex, multiply, add, divide, exp, pi as PI, hypot, number, min, max, round, ceil } from 'mathjs';
 import { encodeCoeffs, decodeCoeffs, COEFF_COUNT, SAMPLE_COUNT_FOR_ENCODING } from './fourier-encoding';
 
+// Type for numeric mathjs results we know won't be BigNumber/Fraction/Matrix
+type NumericResult = number | bigint | Complex;
+
+// Helper to extract real part from a mathjs result (number, bigint, or Complex)
+function toReal(val: NumericResult): number {
+  if (typeof val === 'number') return val;
+  if (typeof val === 'bigint') return Number(val);
+  return val.re;
+}
+
 interface Point2D {
   x: number;
   y: number;
@@ -370,7 +380,7 @@ class ContourDrawingDemo implements DemoInstance {
           for (const sp of samplePoints) {
             const pt = this.plotToCanvas(sp);
             ctx.beginPath();
-            ctx.arc(pt.x, pt.y, 4, 0, Math.PI * 2);
+            ctx.arc(pt.x, pt.y, 4, 0, number(multiply(PI, 2)));
             ctx.fill();
             ctx.stroke();
           }
@@ -383,7 +393,7 @@ class ContourDrawingDemo implements DemoInstance {
       ctx.strokeStyle = this.isDark ? '#fff' : '#000';
       ctx.lineWidth = 1;
       ctx.beginPath();
-      ctx.arc(startPt.x, startPt.y, 7, 0, Math.PI * 2);
+      ctx.arc(startPt.x, startPt.y, 7, 0, number(multiply(PI, 2)));
       ctx.fill();
       ctx.stroke();
     }
@@ -431,7 +441,7 @@ class ContourDrawingDemo implements DemoInstance {
         // Tip marker
         ctx.fillStyle = color;
         ctx.beginPath();
-        ctx.arc(end.x, end.y, 3, 0, Math.PI * 2);
+        ctx.arc(end.x, end.y, 3, 0, number(multiply(PI, 2)));
         ctx.fill();
 
         currentX = nextX;
@@ -488,13 +498,13 @@ class ContourDrawingDemo implements DemoInstance {
     for (let i = 1; i < totalPoints; i++) {
       const dx = this.points[i].x - this.points[i - 1].x;
       const dy = this.points[i].y - this.points[i - 1].y;
-      cumLength.push(cumLength[i - 1] + Math.hypot(dx, dy));
+      cumLength.push(cumLength[i - 1] + number(hypot(dx, dy)));
     }
     const totalLength = cumLength[totalPoints - 1];
 
     if (totalLength === 0) return [];
 
-    const sampleCount = Math.min(N, totalPoints);
+    const sampleCount = number(min(N, totalPoints));
     const samples: Point2D[] = [];
 
     // Sample at even arc length intervals
@@ -599,9 +609,9 @@ class ContourDrawingDemo implements DemoInstance {
     const lastPoint = this.points[this.points.length - 1];
     const dx = point.x - lastPoint.x;
     const dy = point.y - lastPoint.y;
-    const dist = Math.hypot(dx, dy);
+    const dist = number(hypot(dx, dy));
     const pixelSize = this.pixelsToPlotUnits(1);
-    const steps = Math.max(1, Math.round(dist / pixelSize));
+    const steps = number(max(1, round(dist / pixelSize)));
 
     // Fill in all pixel-sized steps from last point to new point
     for (let i = 1; i <= steps; i++) {
@@ -626,7 +636,7 @@ class ContourDrawingDemo implements DemoInstance {
     // Check if close enough to start point to auto-close
     const lastPoint = this.points[this.points.length - 1];
     const startPoint = this.points[0];
-    const dist = Math.hypot(lastPoint.x - startPoint.x, lastPoint.y - startPoint.y);
+    const dist = number(hypot(lastPoint.x - startPoint.x, lastPoint.y - startPoint.y));
     const threshold = this.pixelsToPlotUnits(this.closeThresholdPixels);
 
     if (dist <= threshold) {
@@ -767,7 +777,7 @@ class ContourDrawingDemo implements DemoInstance {
   // For N=11: index 0,1,2,3,4,5,6,7,8,9,10 → freq 0,-1,+1,-2,+2,-3,+3,-4,+4,-5,+5
   private indexToFrequency(index: number): number {
     if (index === 0) return 0;
-    const magnitude = Math.ceil(index / 2);
+    const magnitude = number(ceil(index / 2));
     const sign = index % 2 === 1 ? -1 : 1;
     return sign * magnitude;
   }
@@ -782,8 +792,8 @@ class ContourDrawingDemo implements DemoInstance {
       const freq = this.indexToFrequency(n);
       let sum: Complex = complex(0, 0);
       for (let k = 0; k < N; k++) {
-        const angle = -2 * Math.PI * freq * k / N;
-        const expTerm = complex(Math.cos(angle), Math.sin(angle));
+        const angle = toReal(multiply(-2, PI, freq, k, 1/N) as NumericResult);
+        const expTerm = exp(complex(0, angle)) as Complex;
         sum = add(sum, multiply(z[k], expTerm)) as Complex;
       }
       coefficients.push(divide(sum, N) as Complex);
@@ -817,18 +827,18 @@ class ContourDrawingDemo implements DemoInstance {
     this.trailY = [];
 
     for (let j = 0; j < M; j++) {
-      const t_j = (2 * Math.PI * j) / M;
+      const t_j = multiply(2, PI, j, 1/M);
       const frameVectors: Complex[] = [];
       let tipX = 0;
       let tipY = 0;
 
       // Use only kCoefficients (low-pass filter effect)
-      const coeffsToUse = Math.min(this.kCoefficients, N);
+      const coeffsToUse = number(min(this.kCoefficients, N));
       for (let n = 0; n < coeffsToUse; n++) {
         // v_f(t_j) = c_f * e^(i*f*t_j) where f is the actual frequency
         const freq = this.indexToFrequency(n);
-        const angle = freq * t_j;
-        const expTerm = complex(Math.cos(angle), Math.sin(angle));
+        const angle = toReal(multiply(freq, t_j) as NumericResult);
+        const expTerm = exp(complex(0, angle)) as Complex;
         const v = multiply(this.fourierCoefficients[n], expTerm) as Complex;
         frameVectors.push(v);
         tipX += v.re;