replace all mod operations with the util

Author: g-harel

internal/animate/interpolate.ts

@@ -1,10 +1,10 @@
 import {Shape} from "../types";
-import {split, splitLine} from "../util";
+import {split, splitLine, mod} from "../util";
 
 const interpolateAngle = (percentage: number, a: number, b: number): number => {
     const tau = Math.PI * 2;
-    let aNorm = ((a % tau) + tau) % tau;
-    let bNorm = ((b % tau) + tau) % tau;
+    let aNorm = mod(a, tau);
+    let bNorm = mod(b, tau);
     if (Math.abs(aNorm - bNorm) > Math.PI) {
         if (aNorm < bNorm) {
             aNorm += tau;

internal/animate/prepare.ts

@@ -1,4 +1,4 @@
-import {copyPoint, length, reverse, shift, insertCount, distance} from "../util";
+import {copyPoint, length, reverse, shift, insertCount, distance, mod} from "../util";
 import {Point, Shape} from "../types";
 
 const optimizeOrder = (a: Shape, b: Shape): Shape => {
@@ -12,7 +12,7 @@ const optimizeOrder = (a: Shape, b: Shape): Shape => {
         for (let i = 0; i < count; i++) {
             let sum = 0;
             for (let j = 0; j < count; j++) {
-                sum += distance(a[j], shape[(j + i) % count]);
+                sum += distance(a[j], shape[mod(j + i, count)]);
                 if (sum > minSum) break;
             }
             if (sum <= minSum) {
@@ -35,14 +35,14 @@ export const divideShape = (count: number, points: Shape): Shape => {
 
     const lengths = [];
     for (let i = 0; i < points.length; i++) {
-        lengths.push(length(points[i], points[(i + 1) % points.length]));
+        lengths.push(length(points[i], points[mod(i + 1, points.length)]));
     }
 
     const divisors = divideLengths(lengths, count - points.length);
     const out: Shape = [];
     for (let i = 0; i < points.length; i++) {
         const curr: Point = out[out.length - 1] || points[i];
-        const next = points[(i + 1) % points.length];
+        const next = points[mod(i + 1, points.length)];
         out.pop();
         out.push(...insertCount(divisors[i], curr, next));
     }

internal/render/canvas.ts

@@ -1,5 +1,5 @@
 import {Coord, Shape} from "../types";
-import {expandHandle} from "../util";
+import {expandHandle, mod} from "../util";
 
 const pointSize = 2;
 const infoSpacing = 20;
@@ -37,7 +37,7 @@ export const drawShape = (ctx: CanvasRenderingContext2D, debug: boolean, shape:
     for (let i = 0; i < shape.length; i++) {
         // Compute coordinates of handles.
         const curr = shape[i];
-        const next = shape[(i + 1) % shape.length];
+        const next = shape[mod(i + 1, shape.length)];
         const currHandle = expandHandle(curr, curr.handleOut);
         const nextHandle = expandHandle(next, next.handleIn);
 

internal/render/svg.ts

@@ -1,6 +1,6 @@
 import {xml, XmlElement} from "../../editable";
 import {Shape} from "../types";
-import {expandHandle} from "../util";
+import {expandHandle, mod} from "../util";
 
 export interface RenderOptions {
     // Viewport size.
@@ -31,7 +31,7 @@ export const renderEditable = (points: Shape, opt: RenderOptions): XmlElement =>
     let path = `M${points[0].x},${points[0].y}`;
     for (let i = 0; i < points.length; i++) {
         const curr = points[i];
-        const next = points[(i + 1) % points.length];
+        const next = points[mod(i + 1, points.length)];
         const currControl = expandHandle(curr, curr.handleOut);
         const nextControl = expandHandle(next, next.handleIn);
         path += `C${currControl.x},${currControl.y},${nextControl.x},${nextControl.y},${next.x},${next.y}`;
@@ -80,7 +80,7 @@ export const renderEditable = (points: Shape, opt: RenderOptions): XmlElement =>
         // Points and handles.
         for (let i = 0; i < points.length; i++) {
             const curr = points[i];
-            const next = points[(i + 1) % points.length];
+            const next = points[mod(i + 1, points.length)];
             const currControl = expandHandle(curr, curr.handleOut);
             const nextControl = expandHandle(next, next.handleIn);
 

internal/util.ts

@@ -52,7 +52,7 @@ export const shift = (offset: number, shape: Shape): Shape => {
     if (offset === 0) return shape;
     const out: Shape = [];
     for (let i = 0; i < shape.length; i++) {
-        out.push(shape[(i + offset) % shape.length]);
+        out.push(shape[mod(i + offset, shape.length)]);
     }
     return out;
 };
@@ -110,7 +110,7 @@ export const smooth = (shape: Shape, strength: number): Shape => {
     for (let i = 0; i < shape.length; i++) {
         const curr = shape[i];
         const before = shape[mod(i - 1, shape.length)];
-        const after = shape[(i + 1) % shape.length];
+        const after = shape[mod(i + 1, shape.length)];
         const angle = angleOf(before, after);
 
         out.push({
@@ -130,6 +130,8 @@ export const smooth = (shape: Shape, strength: number): Shape => {
     return out;
 };
 
+// Modulo operation that always produces a positive result.
+// https://stackoverflow.com/q/4467539/3053361
 export const mod = (a: number, n: number): number => {
     return ((a % n) + n) % n;
 };

testing/animate.ts

@@ -3,7 +3,7 @@ import blobs from "..";
 import {interpolateBetweenLoop} from "../internal/animate/interpolate";
 import {divideShape, prepShapes} from "../internal/animate/prepare";
 import {Coord, Point, Shape} from "../internal/types";
-import {length, insertAt, insertCount, rad} from "../internal/util";
+import {length, insertAt, insertCount, rad, mod} from "../internal/util";
 import {clear, drawInfo, drawShape} from "../internal/render/canvas";
 
 const animationSpeed = 2;
@@ -40,15 +40,15 @@ const testSplitAt = (percentage: number) => {
     const stop = 2 * count - 1;
     for (let i = 0; i < count; i++) {
         const double = i * 2;
-        const next = (double + 1) % stop;
+        const next = mod(double + 1, stop);
         points.splice(double, 2, ...insertAt(percentage, points[double], points[next]));
     }
     points.splice(0, 1);
 
     let sum = 0;
     for (let i = 0; i < points.length; i++) {
         const curr = points[i];
-        const next = points[(i + 1) % points.length];
+        const next = points[mod(i + 1, points.length)];
         sum += length(curr, next);
     }
     drawInfo(ctx, 1, "split at lengths sum", sum);
@@ -154,7 +154,7 @@ const genBlob = (
         testPrepShapesB(percentage);
 
         percentage += animationSpeed / 1000;
-        percentage %= 1;
+        percentage = mod(percentage, 1);
         if (animationSpeed > 0) requestAnimationFrame(renderFrame);
     };
     renderFrame();