fix vector math

Author: zendive

src/api/canvas.ts

@@ -1,3 +1,8 @@
+/**
+ * Module assumption:
+ * - Coordinate system of canvas html element
+ */
+
 export const PI = Math.PI;
 export const PI2 = 2 * PI;
 export const PId2 = PI / 2;
@@ -24,7 +29,7 @@ export function rad2deg(rad: number) {
   return ((rad % PI2) / PI2) * 360;
 }
 
-class Coordinate<T extends typeof Coordinate = typeof Coordinate> {
+class XY {
   x: number = 0;
   y: number = 0;
 
@@ -38,6 +43,10 @@ class Coordinate<T extends typeof Coordinate = typeof Coordinate> {
     return this;
   }
 
+  clone() {
+    return new XY(this.x, this.y);
+  }
+
   toString() {
     return `{${this.x}, ${this.y}}`;
   }
@@ -58,12 +67,12 @@ class Coordinate<T extends typeof Coordinate = typeof Coordinate> {
     return this;
   }
 
-  equalXY(x: number, y: number) {
+  hasSameXY(x: number, y: number) {
     return (x === this.x && y === this.y);
   }
 
-  equal(c: Coordinate) {
-    return this.equalXY(c.x, c.y);
+  isEqualTo(xy: XY) {
+    return this.hasSameXY(xy.x, xy.y);
   }
 
   round(precision?: number) {
@@ -74,10 +83,7 @@ class Coordinate<T extends typeof Coordinate = typeof Coordinate> {
   }
 }
 
-/**
- * Point {x,y}
- */
-export class Point extends Coordinate {
+export class Point extends XY {
   constructor(x: number, y: number) {
     super(x, y);
   }
@@ -90,33 +96,32 @@ export class Point extends Coordinate {
    * Get distance between two points
    */
   proximity(p: Point) {
-    return this.toVector(p).length();
+    return this.vectorTo(p).length;
   }
 
   /**
    * Convert point to vector
    * Assuming this(x,y) is a v(0,0)
    * @note this(0,0) is at top left corner
    */
-  toVector(to: Point) {
-    return new Vector(to.x - this.x, this.y - to.y);
+  vectorTo(to: XY) {
+    return new Vector(to.x - this.x, to.y - this.y);
   }
 
   /**
    * Rotate point over center `axis` point by an angle
-   * @note: positive angle value means counterclockwise
+   * @note: positive `radAngle` means counterclockwise
    */
-  rotate(angle: number, axis: Point) {
-    return axis.toVector(this).rotate(angle).toPoint(axis);
+  rotate(radAngle: number, axis: Point) {
+    const p = axis.vectorTo(this).rotate(radAngle).atBase(axis);
+    return this.set(p.x, p.y);
   }
 }
 
 /**
- * Vector with virtual base of {0,0}
- * and assumed position at top-left corner
- * that points to {this.x, this.y}
+ * Vector with virtual base of {0,0} that points to {x,y}
  */
-export class Vector extends Coordinate {
+export class Vector extends XY {
   constructor(x: number, y: number) {
     super(x, y);
   }
@@ -126,121 +131,85 @@ export class Vector extends Coordinate {
   }
 
   /**
-   * Convert vector to point
-   * Assuming pBase(x,y) refers to v(0,0)
-   * @note: base(0,0) is at top left corner
+   * Get point where vector points from `base` point of view
+   * Assuming base(x,y) refers to v(0,0) of `this` vector
    */
-  toPoint(base: Point) {
-    return new Point(base.x + this.x, base.y - this.y);
+  atBase(base: Point) {
+    return new Point(base.x + this.x, base.y + this.y);
   }
 
   /**
-   * Create vector rotated on specific angle
+   * Rotate at specific angle
    * produced vector may contain float epsilon errors
-   * @note: Positive angle means counterclockwise
+   * @note: positive `radAngle` means counterclockwise
    */
-  rotate(angle: number) {
-    const cos = Math.cos(angle);
-    const sin = Math.sin(angle);
-    return new Vector(
+  rotate(radAngle: number) {
+    const cos = Math.cos(-radAngle);
+    const sin = Math.sin(-radAngle);
+
+    return this.set(
       this.x * cos - this.y * sin,
       this.x * sin + this.y * cos,
     );
   }
 
-  /**
-   * Create vector rotated to left
-   */
   rotateLeft() {
-    return new Vector(-this.y, this.x);
+    return this.set(-this.y, this.x);
   }
 
-  /**
-   * Create vector rotated to right
-   */
   rotateRight() {
-    return new Vector(this.y, -this.x);
+    return this.set(this.y, -this.x);
   }
 
-  /**
-   * Create vector rotated backwards
-   */
   rotateBack() {
-    return new Vector(-this.x, -this.y);
+    return this.set(-this.x, -this.y);
   }
 
-  /**
-   * Return new vector mirrored over another vector interpreted as rotation axis
-   */
-  mirror(axis: Vector) {
-    const delta = this.xAxisAngle() - axis.xAxisAngle();
+  mirrorOver(axis: Vector) {
+    const delta = this.angleWithX - axis.angleWithX;
     const k = delta >= 0 ? -2 : 2;
     return this.rotate(k * this.angle(axis));
   }
 
-  length() {
+  get length() {
     return Math.sqrt(this.dot(this));
   }
 
-  /**
-   * Return new vector with new vector length
-   */
   setLength(newLength: number) {
-    return (new Vector(newLength, 0)).rotate(this.xAxisAngle());
+    const v = new Vector(newLength, 0).rotate(this.angleWithX);
+    return this.set(v.x, v.y);
   }
 
-  /**
-   * Return new vector halved in length
-   */
   half() {
-    return new Vector(this.x / 2, this.y / 2);
+    return this.set(this.x / 2, this.y / 2);
   }
 
   /**
-   * Vector normalization
+   * Get angle of vector relative to X axis in range [0 ... α ... PI2] counterclockwise
    */
-  normalize() {
-    const length = this.length();
-    return new Vector(this.x / length, this.y / length);
-  }
+  get angleWithX() {
+    const angle = Math.atan2(-this.y, this.x);
 
-  /**
-   * Dot product of two vectors
-   */
-  dot(v: Vector) {
-    return (this.x * v.x + this.y * v.y);
+    return (angle < 0) ? angle + PI2 : angle;
   }
 
   angle(v: Vector) {
     return Math.acos(this.normalize().dot(v.normalize()));
   }
 
-  angleWithNorth() {
-    return this.angle(new Vector(0, 1));
-  }
-
-  angleWithEast() {
-    return this.angle(new Vector(1, 0));
-  }
-
-  angleWithSought() {
-    return this.angle(new Vector(0, -1));
-  }
-
-  angleWithWest() {
-    return this.angle(new Vector(-1, 0));
+  /**
+   * Return normalized vector
+   */
+  normalize() {
+    const length = this.length;
+    return new Vector(this.x / length, this.y / length);
   }
 
   /**
-   * Get angle of vector relative to OX in range [0 ... α ... XY.PI2]
-   * @note produced angle will be always positive radian
+   * Dot product of two vectors
    */
-  xAxisAngle() {
-    let angle = Math.atan2(this.y, this.x);
-    if (angle < 0) {
-      angle += PI2;
-    }
-    return angle;
+  dot(v: Vector) {
+    return (this.x * v.x + this.y * v.y);
   }
 }
 
@@ -280,9 +249,10 @@ export class Box {
 
   toString() {
     return JSON.stringify({
-      tl: this.tl.toString(),
       w: this.w,
       h: this.h,
+      tl: this.tl.toString(),
+      c: this.c.toString(),
     });
   }
 

src/view/menu/UpdatePace.svelte

@@ -12,8 +12,8 @@
     return ctx && startAnimation(ctx);
   });
 
-  ts.timeOfCollection.subscribe(() => {
-    update();
+  ts.timeOfCollection.subscribe((v) => {
+    update(v);
   });
 </script>
 

src/view/menu/UpdatePaceTimeMap.ts

@@ -1,9 +1,11 @@
 import { deg2rad, PI2, Point, Vector } from '../../api/canvas.ts';
 
 interface IMemo {
-  when: number;
-  vector: Vector;
+  whenOccurred: number;
+  whenAdded: number;
   age: number;
+  timePoint: Point;
+  vector: Vector;
 }
 
 let raf = 0;
@@ -15,7 +17,8 @@ const SHADOW_WIDTH = 4;
 const pRotationAxis = new Point(R, R);
 const WHITE = 'rgb(100% 100% 100%)';
 const BLACK = 'rgb(0% 0% 0%)';
-const ANIMATION_DURATION = 2e3;
+const ANIMATION_DURATION = 1.5e3;
+const ANIMATION_DELTA_PX = R / ANIMATION_DURATION;
 let primaryColour: string = BLACK;
 let shadowColour: string = WHITE;
 const memory: IMemo[] = [];
@@ -32,15 +35,21 @@ export function startAnimation(ctx: CanvasRenderingContext2D) {
   };
 }
 
-export function update() {
-  const when = Date.now();
-  const angle = -(when % 1000) * 360 / 1000;
-  const vector = new Vector(R, 0).rotate(deg2rad(angle));
+export function update(timeOfCollection: number) {
+  const whenAdded = Date.now();
+  const angle = (timeOfCollection % 1000) * 360 / 1000;
+  const vector = new Vector(R, 0)
+    .rotate(deg2rad(-angle))
+    // rotate left to adjust zero angle to point at {0,-1} (north)
+    .rotateLeft();
+  const timePoint = vector.atBase(pRotationAxis);
 
   memory.unshift({
-    when,
-    vector,
+    whenOccurred: timeOfCollection,
+    whenAdded,
     age: 0,
+    timePoint,
+    vector: vector.rotateBack(),
   });
 }
 
@@ -63,24 +72,21 @@ function initContext(_ctx: CanvasRenderingContext2D) {
 function draw() {
   const drawTime = Date.now();
   ctx.clearRect(0, 0, D, D);
+  drawCenter();
 
-  if (memory.length) {
-    for (let n = 0, N = memory.length; n < N; n++) {
-      const memo = memory[n];
-      memo.age = drawTime - memo.when;
-      drawLine(memo);
-    }
+  for (let n = 0, N = memory.length; n < N; n++) {
+    const memo = memory[n];
+    memo.age = drawTime - memo.whenAdded;
+    drawLine(memo);
+  }
 
-    let n = memory.length;
-    while (n--) {
-      if (memory[n].age >= ANIMATION_DURATION) {
-        memory.pop();
-      } else {
-        break;
-      }
+  let n = memory.length;
+  while (n--) {
+    if (memory[n].age >= ANIMATION_DURATION) {
+      memory.pop();
+    } else {
+      break;
     }
-  } else {
-    drawCenter();
   }
 
   raf = requestAnimationFrame(draw);
@@ -96,13 +102,13 @@ function drawCenter() {
 }
 
 function drawLine(memo: IMemo) {
-  const length = R - memo.age * R / ANIMATION_DURATION;
-  const p = memo.vector.setLength(length).toPoint(pRotationAxis);
+  const length = R - memo.age * ANIMATION_DELTA_PX;
+  const p = memo.vector.setLength(length).atBase(memo.timePoint);
 
   ctx.save();
   ctx.beginPath();
-  ctx.moveTo(pRotationAxis.x, pRotationAxis.y);
-  ctx.lineTo(p.x, p.y);
+  ctx.moveTo(p.x, p.y);
+  ctx.lineTo(memo.timePoint.x, memo.timePoint.y);
   ctx.stroke();
   ctx.closePath();
   ctx.restore();