simulationjsv2 0.2.9 → 0.3.1

package/dist/geometry.d.ts

@@ -1,6 +1,6 @@
-import { CircleGeometryParams, CubeGeometryParams, Line2dGeometryParams, Line3dGeometryParams, Mat4, PolygonGeometryParams, SplineGeometryParams, SquareGeometryParams, Vector2, Vector3, VertexColorMap } from './types.js';
+import { CircleGeometryParams, CubeGeometryParams, Line2dGeometryParams, Line3dGeometryParams, Mat4, PolygonGeometryParams, Spline2dGeometryParams, SquareGeometryParams, Vector2, Vector3, VertexColorMap } from './types.js';
 import { Color, Vertex } from './utils.js';
-import { SplinePoint2d } from './graphics.js';
+import { CubicBezierCurve2d, SplinePoint2d } from './graphics.js';
 export declare abstract class Geometry {
     protected abstract wireframeOrder: number[];
     protected abstract triangleOrder: number[];
@@ -43,7 +43,7 @@ export declare class SquareGeometry extends Geometry {
     protected wireframeOrder: number[];
     protected triangleOrder: number[];
     protected params: SquareGeometryParams;
-    constructor(width: number, height: number);
+    constructor(width: number, height: number, centerOffset?: Vector2);
     setVertexColorMap(colorMap: VertexColorMap): void;
     setWidth(width: number): void;
     setHeight(height: number): void;
@@ -67,16 +67,18 @@ export declare class CircleGeometry extends Geometry {
     private updateTriangleOrder;
     recompute(): void;
 }
-export declare class SplineGeometry extends Geometry {
+export declare class Spline2dGeometry extends Geometry {
     protected wireframeOrder: number[];
     protected triangleOrder: number[];
-    protected params: SplineGeometryParams;
+    protected params: Spline2dGeometryParams;
     constructor(points: SplinePoint2d[], color: Color, thickness: number, detail: number);
     updateInterpolationStart(start: number): void;
     updateInterpolationLimit(limit: number): void;
+    updateThickness(thickness: number): void;
     private getVertexCount;
     getWireframeVertexCount(): number;
     getTriangleVertexCount(): number;
+    getCurves(): CubicBezierCurve2d[];
     private computeCurves;
     private updateWireframeOrder;
     recompute(): void;

package/dist/geometry.js

@@ -1,7 +1,8 @@
 import { mat4, vec2, vec3 } from 'wgpu-matrix';
-import { cloneBuf, interpolateColors, lossyTriangulate, matrix4, triangulateWireFrameOrder, vector2, vector2FromVector3, vector3, vector3FromVector2, vertex, bufferGenerator } from './utils.js';
+import { cloneBuf, matrix4, vector2, vector2FromVector3, vector3, vector3FromVector2, vertex } from './utils.js';
 import { CubicBezierCurve2d } from './graphics.js';
 import { BUF_LEN } from './constants.js';
+import { bufferGenerator, interpolateColors, lossyTriangulate, triangulateWireFrameOrder } from './internalUtils.js';
 export class Geometry {
     vertices;
     matrix;
@@ -126,12 +127,13 @@ export class SquareGeometry extends Geometry {
     wireframeOrder = [0, 1, 2, 3, 0, 2];
     triangleOrder = [0, 1, 3, 2];
     params;
-    constructor(width, height) {
+    constructor(width, height, centerOffset) {
         super([], 'strip');
         this.params = {
             width,
             height,
-            colorMap: {}
+            colorMap: {},
+            centerOffset: centerOffset || vector2(0, 0)
         };
         this.recompute();
     }
@@ -145,11 +147,12 @@ export class SquareGeometry extends Geometry {
         this.params.height = height;
     }
     recompute() {
+        const centerOffset = this.params.centerOffset;
         this.vertices = [
-            vector3(-this.params.width / 2, this.params.height / 2, 0),
-            vector3(this.params.width / 2, this.params.height / 2, 0),
-            vector3(this.params.width / 2, -this.params.height / 2, 0),
-            vector3(-this.params.width / 2, -this.params.height / 2, 0)
+            vector3(-this.params.width * centerOffset[0], this.params.height * centerOffset[1]),
+            vector3(this.params.width * (1 - centerOffset[0]), this.params.height * centerOffset[1]),
+            vector3(this.params.width * (1 - centerOffset[0]), -this.params.height * (1 - centerOffset[1])),
+            vector3(-this.params.width * centerOffset[0], -this.params.height * (1 - centerOffset[1]))
         ];
     }
     getTriangleBuffer(color) {
@@ -208,7 +211,7 @@ export class CircleGeometry extends Geometry {
         this.updateWireframeOrder();
     }
 }
-export class SplineGeometry extends Geometry {
+export class Spline2dGeometry extends Geometry {
     wireframeOrder;
     triangleOrder;
     params;
@@ -236,6 +239,9 @@ export class SplineGeometry extends Geometry {
     updateInterpolationLimit(limit) {
         this.params.interpolateLimit = Math.min(1, Math.max(0, limit));
     }
+    updateThickness(thickness) {
+        this.params.thickness = thickness;
+    }
     getVertexCount() {
         return this.triangleOrder.length * BUF_LEN;
     }
@@ -245,6 +251,9 @@ export class SplineGeometry extends Geometry {
     getTriangleVertexCount() {
         return this.getVertexCount();
     }
+    getCurves() {
+        return this.params.curves;
+    }
     computeCurves() {
         for (let i = 0; i < this.params.points.length; i++) {
             let prevControl = null;

package/dist/graphics.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="dist" />
 import { Camera } from './simulation.js';
 import type { Vector2, Vector3, LerpFunc, VertexColorMap, ElementRotation, Mat4 } from './types.js';
-import { Vertex, VertexCache, Color } from './utils.js';
-import { BlankGeometry, CircleGeometry, CubeGeometry, Geometry, Line2dGeometry, Line3dGeometry, PlaneGeometry, PolygonGeometry, SplineGeometry, SquareGeometry } from './geometry.js';
+import { Vertex, Color } from './utils.js';
+import { BlankGeometry, CircleGeometry, CubeGeometry, Geometry, Line2dGeometry, Line3dGeometry, PlaneGeometry, PolygonGeometry, Spline2dGeometry, SquareGeometry } from './geometry.js';
+import { VertexCache } from './internalUtils.js';
 export declare abstract class SimulationElement<T extends Vector2 | Vector3 = Vector3> {
     protected abstract pos: T;
     protected abstract geometry: Geometry;
@@ -63,9 +64,10 @@ export declare class Square extends SimulationElement2d {
     private height;
     private vertexColors;
     /**
+     * @param centerOffset{Vector2} - A vector2 of values from 0 to 1
      * @param vertexColors{Record<number, Color>} - 0 is top left vertex, numbers increase clockwise
      */
-    constructor(pos: Vector2, width: number, height: number, color?: Color, rotation?: number, vertexColors?: VertexColorMap);
+    constructor(pos: Vector2, width: number, height: number, color?: Color, rotation?: number, centerOffset?: Vector2, vertexColors?: VertexColorMap);
     private cloneColorMap;
     setVertexColors(newColorMap: VertexColorMap, t?: number, f?: LerpFunc): Promise<void>;
     scaleWidth(amount: number, t?: number, f?: LerpFunc): Promise<void>;
@@ -124,10 +126,12 @@ export declare class Cube extends SimulationElement3d {
 }
 export declare class BezierCurve2d {
     private points;
+    private length;
     constructor(points: Vector2[]);
     interpolateSlope(t: number): readonly [Vector2, Vector2];
     interpolate(t: number): Vector2;
     getPoints(): Vector2[];
+    estimateLength(detail: number): number;
     getLength(): number;
 }
 export declare class CubicBezierCurve2d extends BezierCurve2d {
@@ -154,15 +158,18 @@ export declare class SplinePoint2d {
     getVectorArray(prevEnd: Vector2 | null, prevControl: Vector2 | null): readonly [Vector2, Vector2, Vector2, Vector2];
 }
 export declare class Spline2d extends SimulationElement2d {
-    protected geometry: SplineGeometry;
-    private curves;
+    protected geometry: Spline2dGeometry;
     private thickness;
     private detail;
     private interpolateStart;
     private interpolateLimit;
+    private length;
     constructor(pos: Vertex, points: SplinePoint2d[], thickness?: number, detail?: number);
+    private estimateLength;
+    getLength(): number;
     setInterpolateStart(start: number, t?: number, f?: LerpFunc): Promise<void>;
     setInterpolateLimit(limit: number, t?: number, f?: LerpFunc): Promise<void>;
+    setThickness(thickness: number, t?: number, f?: LerpFunc): Promise<void>;
     interpolateSlope(t: number): readonly [Vector2, Vector2];
     interpolate(t: number): Vector2;
     protected updateMatrix(camera: Camera): void;

package/dist/graphics.js

@@ -1,6 +1,7 @@
 import { vec3, mat4, vec2, vec4 } from 'wgpu-matrix';
-import { Vertex, VertexCache, cloneBuf, color, colorFromVector4, vector3ToPixelRatio, vector2, vector3, vertex, Color, transitionValues, logger, vector2FromVector3, matrix4, rotateMat4, vector3FromVector2, vector2ToPixelRatio, bufferGenerator } from './utils.js';
-import { BlankGeometry, CircleGeometry, CubeGeometry, Line2dGeometry, Line3dGeometry, PlaneGeometry, PolygonGeometry, SplineGeometry, SquareGeometry } from './geometry.js';
+import { Vertex, cloneBuf, color, colorFromVector4, vector2, vector3, vertex, Color, transitionValues, vector2FromVector3, matrix4, vector3FromVector2, distance2d } from './utils.js';
+import { BlankGeometry, CircleGeometry, CubeGeometry, Line2dGeometry, Line3dGeometry, PlaneGeometry, PolygonGeometry, Spline2dGeometry, SquareGeometry } from './geometry.js';
+import { VertexCache, bufferGenerator, logger, rotateMat4, vector2ToPixelRatio, vector3ToPixelRatio } from './internalUtils.js';
 export class SimulationElement {
     color;
     wireframe;
@@ -62,7 +63,7 @@ export class SimulationElement {
         const matrix = matrix4();
         if (typeof this.rotation === 'number') {
             const pos = vector3FromVector2(this.pos);
-            pos[1] = camera.getScreenSize()[1] - pos[1];
+            pos[1] = camera.getScreenSize()[1] + pos[1];
             mat4.translate(matrix, pos, matrix);
             mat4.rotateZ(matrix, this.rotation, matrix);
         }
@@ -232,15 +233,16 @@ export class Square extends SimulationElement2d {
     height;
     vertexColors;
     /**
+     * @param centerOffset{Vector2} - A vector2 of values from 0 to 1
      * @param vertexColors{Record<number, Color>} - 0 is top left vertex, numbers increase clockwise
      */
-    constructor(pos, width, height, color, rotation, vertexColors) {
+    constructor(pos, width, height, color, rotation, centerOffset, vertexColors) {
         super(pos, rotation, color);
         vector2ToPixelRatio(this.pos);
         this.width = width * devicePixelRatio;
         this.height = height * devicePixelRatio;
         this.vertexColors = this.cloneColorMap(vertexColors || {});
-        this.geometry = new SquareGeometry(this.width, this.height);
+        this.geometry = new SquareGeometry(this.width, this.height, centerOffset);
         this.geometry.setVertexColorMap(this.vertexColors);
     }
     cloneColorMap(colorMap) {
@@ -358,9 +360,7 @@ export class Square extends SimulationElement2d {
     }
     updateMatrix(camera) {
         const pos = cloneBuf(this.pos);
-        pos[1] = camera.getScreenSize()[1] - pos[1];
-        pos[0] += this.width / 2;
-        pos[1] -= this.height / 2;
+        pos[1] = camera.getScreenSize()[1] + pos[1];
         const matrix = matrix4();
         mat4.translate(matrix, vector3FromVector2(pos), matrix);
         mat4.rotateZ(matrix, this.rotation, matrix);
@@ -638,10 +638,13 @@ export class Cube extends SimulationElement3d {
 }
 export class BezierCurve2d {
     points;
+    length;
     constructor(points) {
         if (points.length === 0)
             throw logger.error('Expected 1 or more points for BezierCurve2d');
         this.points = points;
+        const dist = distance2d(points[0], points[points.length - 1]);
+        this.length = this.estimateLength(dist);
     }
     interpolateSlope(t) {
         t = Math.max(0, Math.min(1, t));
@@ -678,10 +681,20 @@ export class BezierCurve2d {
     getPoints() {
         return this.points;
     }
+    estimateLength(detail) {
+        let totalDist = 0;
+        for (let i = 0; i < detail - 1; i++) {
+            const t1 = i / detail;
+            const t2 = (i + 1) / detail;
+            const p1 = this.interpolate(t1);
+            const p2 = this.interpolate(t2);
+            const dist = distance2d(p1, p2);
+            totalDist += dist;
+        }
+        return totalDist;
+    }
     getLength() {
-        const start = this.points[0];
-        const end = this.points[this.points.length - 1];
-        return Math.sqrt(Math.pow(end[0] - start[0], 2) + Math.pow(end[1] - start[1], 2));
+        return this.length;
     }
 }
 export class CubicBezierCurve2d extends BezierCurve2d {
@@ -763,19 +776,31 @@ export class SplinePoint2d {
 }
 export class Spline2d extends SimulationElement2d {
     geometry;
-    curves;
     thickness;
     detail;
     interpolateStart;
     interpolateLimit;
+    length;
     constructor(pos, points, thickness = devicePixelRatio, detail = 40) {
-        super(vector2FromVector3(pos.getPos()), 0, pos.getColor() || undefined);
-        this.curves = [];
+        const tempPos = vector2FromVector3(pos.getPos());
+        vector2ToPixelRatio(tempPos);
+        super(tempPos, 0, pos.getColor() || undefined);
         this.thickness = thickness * devicePixelRatio;
         this.detail = detail;
         this.interpolateStart = 0;
         this.interpolateLimit = 1;
-        this.geometry = new SplineGeometry(points, this.getColor(), this.thickness, this.detail);
+        this.length = 0;
+        this.geometry = new Spline2dGeometry(points, this.getColor(), this.thickness, this.detail);
+        this.estimateLength();
+    }
+    estimateLength() {
+        const curves = this.geometry.getCurves();
+        for (let i = 0; i < curves.length; i++) {
+            this.length += curves[i].getLength();
+        }
+    }
+    getLength() {
+        return this.length;
     }
     setInterpolateStart(start, t = 0, f) {
         const diff = start - this.interpolateStart;
@@ -801,13 +826,36 @@ export class Spline2d extends SimulationElement2d {
             this.vertexCache.updated();
         }, t, f);
     }
+    setThickness(thickness, t = 0, f) {
+        thickness *= devicePixelRatio;
+        const diff = thickness - this.thickness;
+        return transitionValues((p) => {
+            this.thickness += diff * p;
+            this.geometry.updateThickness(this.thickness);
+            this.vertexCache.updated();
+        }, () => {
+            this.thickness = thickness;
+            this.geometry.updateThickness(this.thickness);
+            this.vertexCache.updated();
+        }, t, f);
+    }
     interpolateSlope(t) {
-        const curveInterval = 1 / this.curves.length;
-        let index = Math.floor(t / curveInterval);
-        if (index === this.curves.length)
-            index--;
-        const diff = (t - curveInterval * index) * 2;
-        return this.curves[index].interpolateSlope(diff);
+        const curves = this.geometry.getCurves();
+        const totalLength = this.length;
+        let currentLength = 0;
+        let index = 0;
+        let diff = 0;
+        for (let i = 0; i < curves.length; i++) {
+            if ((currentLength + curves[i].getLength()) / totalLength >= t) {
+                let dist = totalLength * t;
+                dist -= currentLength;
+                diff = dist / curves[i].getLength();
+                index = i;
+                break;
+            }
+            currentLength += curves[i].getLength();
+        }
+        return curves[index].interpolateSlope(diff);
     }
     interpolate(t) {
         const [vec] = this.interpolateSlope(t);

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './simulation.js';
 export * from './graphics.js';
+export * from './utils.js';
 export * from './types.js';
-export { Vertex, Color, cloneBuf, vector4, vector3, vector2, vector3FromVector2, colorFromVector4, randomInt, randomColor, vertex, color, colorf, transitionValues, lerp, smoothStep, linearStep, splinePoint2d, continuousSplinePoint2d, easeInOutQuad, easeInOutExpo, easeInOutQuart, waitFor, matrix4 } from './utils.js';
+export { vec2, vec3, vec4, mat3, mat4 } from 'wgpu-matrix';

package/dist/index.js

@@ -1,4 +1,5 @@
 export * from './simulation.js';
 export * from './graphics.js';
+export * from './utils.js';
 export * from './types.js';
-export { Vertex, Color, cloneBuf, vector4, vector3, vector2, vector3FromVector2, colorFromVector4, randomInt, randomColor, vertex, color, colorf, transitionValues, lerp, smoothStep, linearStep, splinePoint2d, continuousSplinePoint2d, easeInOutQuad, easeInOutExpo, easeInOutQuart, waitFor, matrix4 } from './utils.js';
+export { vec2, vec3, vec4, mat3, mat4 } from 'wgpu-matrix';

package/dist/internalUtils.d.ts

@@ -0,0 +1,46 @@
+/// <reference types="dist" />
+import { Mat4, Vector2, Vector3 } from './types.js';
+import { Color } from './utils.js';
+import { SimulationElement } from './graphics.js';
+export declare class VertexCache {
+    private vertices;
+    private hasUpdated;
+    constructor();
+    setCache(vertices: number[]): void;
+    getCache(): number[];
+    updated(): void;
+    shouldUpdate(): boolean;
+    getVertexCount(): number;
+}
+export declare const buildProjectionMatrix: (aspectRatio: number, zNear?: number, zFar?: number) => any;
+export declare const getTransformationMatrix: (pos: Vector3, rotation: Vector3, projectionMatrix: mat4) => Float32Array;
+export declare const getOrthoMatrix: (screenSize: [number, number]) => Float32Array;
+export declare const buildDepthTexture: (device: GPUDevice, width: number, height: number) => GPUTexture;
+export declare const buildMultisampleTexture: (device: GPUDevice, ctx: GPUCanvasContext, width: number, height: number) => GPUTexture;
+export declare const applyElementToScene: (scene: SimulationElement[], el: SimulationElement) => void;
+declare class Logger {
+    constructor();
+    private fmt;
+    log(msg: string): void;
+    error(msg: string): Error;
+    warn(msg: string): void;
+    log_error(msg: string): void;
+}
+export declare const logger: Logger;
+export declare function lossyTriangulate<T>(vertices: T[]): (readonly [T, T, T])[];
+declare class BufferGenerator {
+    private instancing;
+    constructor();
+    setInstancing(state: boolean): void;
+    generate(x: number, y: number, z: number, color: Color, uv?: Vector2): number[];
+}
+export declare const bufferGenerator: BufferGenerator;
+export declare function vector3ToPixelRatio(vec: Vector3): void;
+export declare function vector2ToPixelRatio(vec: Vector2): void;
+export declare function interpolateColors(colors: Color[], t: number): Color;
+export declare function matrixFromRotation(rotation: Vector3): Mat4;
+export declare function rotateMat4(mat: Mat4, rotation: Vector3): void;
+export declare function createPipeline(device: GPUDevice, module: GPUShaderModule, bindGroupLayout: GPUBindGroupLayout, presentationFormat: GPUTextureFormat, entryPoint: string, topology: GPUPrimitiveTopology): GPURenderPipeline;
+export declare function triangulateWireFrameOrder(len: number): number[];
+export declare function getTotalVertices(scene: SimulationElement[]): number;
+export {};

package/dist/internalUtils.js

@@ -0,0 +1,258 @@
+import { mat4, vec3 } from 'wgpu-matrix';
+import { BUF_LEN, colorOffset, drawingInstancesOffset, uvOffset, vertexSize } from './constants.js';
+import { color, vector2, vector3 } from './utils.js';
+import { SimulationElement } from './graphics.js';
+export class VertexCache {
+    vertices = [];
+    hasUpdated = true;
+    constructor() { }
+    setCache(vertices) {
+        this.vertices = vertices;
+        this.hasUpdated = false;
+    }
+    getCache() {
+        return this.vertices;
+    }
+    updated() {
+        this.hasUpdated = true;
+    }
+    shouldUpdate() {
+        return this.hasUpdated;
+    }
+    getVertexCount() {
+        return this.vertices.length / BUF_LEN;
+    }
+}
+export const buildProjectionMatrix = (aspectRatio, zNear = 1, zFar = 500) => {
+    const fov = (2 * Math.PI) / 5;
+    return mat4.perspective(fov, aspectRatio, zNear, zFar);
+};
+export const getTransformationMatrix = (pos, rotation, projectionMatrix) => {
+    const modelViewProjectionMatrix = mat4.create();
+    const viewMatrix = mat4.identity();
+    const camPos = vector3();
+    vec3.clone(pos, camPos);
+    vec3.scale(camPos, -1, camPos);
+    mat4.rotateZ(viewMatrix, rotation[2], viewMatrix);
+    mat4.rotateY(viewMatrix, rotation[1], viewMatrix);
+    mat4.rotateX(viewMatrix, rotation[0], viewMatrix);
+    mat4.translate(viewMatrix, camPos, viewMatrix);
+    mat4.multiply(projectionMatrix, viewMatrix, modelViewProjectionMatrix);
+    return modelViewProjectionMatrix;
+};
+export const getOrthoMatrix = (screenSize) => {
+    return mat4.ortho(0, screenSize[0], 0, screenSize[1], 0, 100);
+};
+export const buildDepthTexture = (device, width, height) => {
+    return device.createTexture({
+        size: [width, height],
+        format: 'depth24plus',
+        usage: GPUTextureUsage.RENDER_ATTACHMENT,
+        sampleCount: 4
+    });
+};
+export const buildMultisampleTexture = (device, ctx, width, height) => {
+    return device.createTexture({
+        size: [width, height],
+        format: ctx.getCurrentTexture().format,
+        usage: GPUTextureUsage.RENDER_ATTACHMENT,
+        sampleCount: 4
+    });
+};
+export const applyElementToScene = (scene, el) => {
+    if (el instanceof SimulationElement) {
+        scene.unshift(el);
+    }
+    else {
+        throw logger.error('Cannot add invalid SimulationElement');
+    }
+};
+class Logger {
+    constructor() { }
+    fmt(msg) {
+        return `SimJS: ${msg}`;
+    }
+    log(msg) {
+        console.log(this.fmt(msg));
+    }
+    error(msg) {
+        return new Error(this.fmt(msg));
+    }
+    warn(msg) {
+        console.warn(this.fmt(msg));
+    }
+    log_error(msg) {
+        console.error(this.fmt(msg));
+    }
+}
+export const logger = new Logger();
+// optomized for speed, depending on orientation of vertices as input, shape may not be preserved
+export function lossyTriangulate(vertices) {
+    const res = [];
+    let facingRight = true;
+    let rightOffset = 0;
+    let leftOffset = 0;
+    while (rightOffset < vertices.length - leftOffset - 2) {
+        if (facingRight) {
+            const triangle = [
+                vertices[rightOffset],
+                vertices[rightOffset + 1],
+                vertices[vertices.length - leftOffset - 1]
+            ];
+            res.push(triangle);
+            rightOffset++;
+        }
+        else {
+            const triangle = [
+                vertices[rightOffset],
+                vertices[vertices.length - leftOffset - 1],
+                vertices[vertices.length - leftOffset - 2]
+            ];
+            res.push(triangle);
+            leftOffset++;
+        }
+        facingRight = !facingRight;
+    }
+    return res;
+}
+class BufferGenerator {
+    instancing = false;
+    constructor() { }
+    setInstancing(state) {
+        this.instancing = state;
+    }
+    generate(x, y, z, color, uv = vector2()) {
+        return [x, y, z, 1, ...color.toBuffer(), ...uv, this.instancing ? 1 : 0];
+    }
+}
+export const bufferGenerator = new BufferGenerator();
+export function vector3ToPixelRatio(vec) {
+    vec[0] *= devicePixelRatio;
+    vec[1] *= devicePixelRatio;
+    vec[2] *= devicePixelRatio;
+}
+export function vector2ToPixelRatio(vec) {
+    vec[0] *= devicePixelRatio;
+    vec[1] *= devicePixelRatio;
+}
+export function interpolateColors(colors, t) {
+    t = Math.min(1, Math.max(0, t));
+    if (colors.length === 0)
+        return color();
+    if (colors.length === 1)
+        return colors[0];
+    const colorInterval = 1 / colors.length;
+    let index = Math.floor(t / colorInterval);
+    if (index >= colors.length)
+        index = colors.length - 1;
+    const from = index === colors.length - 1 ? colors[index - 1] : colors[index];
+    const to = index === colors.length - 1 ? colors[index] : colors[index + 1];
+    const diff = to.diff(from);
+    const scale = t / (colorInterval * colors.length);
+    diff.r *= scale;
+    diff.g *= scale;
+    diff.b *= scale;
+    diff.a *= scale;
+    const res = from.clone();
+    res.r += diff.r;
+    res.g += diff.g;
+    res.b += diff.b;
+    res.a += diff.a;
+    return res;
+}
+export function matrixFromRotation(rotation) {
+    let rotMatrix = mat4.identity();
+    mat4.rotateZ(rotMatrix, rotation[2], rotMatrix);
+    mat4.rotateY(rotMatrix, rotation[1], rotMatrix);
+    mat4.rotateX(rotMatrix, rotation[0], rotMatrix);
+    return rotMatrix;
+}
+export function rotateMat4(mat, rotation) {
+    mat4.rotateZ(mat, rotation[2], mat);
+    mat4.rotateY(mat, rotation[1], mat);
+    mat4.rotateX(mat, rotation[0], mat);
+}
+export function createPipeline(device, module, bindGroupLayout, presentationFormat, entryPoint, topology) {
+    return device.createRenderPipeline({
+        layout: device.createPipelineLayout({
+            bindGroupLayouts: [bindGroupLayout]
+        }),
+        vertex: {
+            module,
+            entryPoint,
+            buffers: [
+                {
+                    arrayStride: vertexSize,
+                    attributes: [
+                        {
+                            // position
+                            shaderLocation: 0,
+                            offset: 0,
+                            format: 'float32x4'
+                        },
+                        {
+                            // color
+                            shaderLocation: 1,
+                            offset: colorOffset,
+                            format: 'float32x4'
+                        },
+                        {
+                            // size
+                            shaderLocation: 2,
+                            offset: uvOffset,
+                            format: 'float32x2'
+                        },
+                        {
+                            // drawing instances
+                            shaderLocation: 3,
+                            offset: drawingInstancesOffset,
+                            format: 'float32'
+                        }
+                    ]
+                }
+            ]
+        },
+        fragment: {
+            module,
+            entryPoint: 'fragment_main',
+            targets: [
+                {
+                    format: presentationFormat
+                }
+            ]
+        },
+        primitive: {
+            topology
+        },
+        multisample: {
+            count: 4
+        },
+        depthStencil: {
+            depthWriteEnabled: true,
+            depthCompare: 'less',
+            format: 'depth24plus'
+        }
+    });
+}
+export function triangulateWireFrameOrder(len) {
+    const order = Array(len)
+        .fill(0)
+        .map((_, index) => index);
+    let front = 0;
+    let back = len - 1;
+    while (front < back) {
+        order.push(front, back);
+        front++;
+        back--;
+    }
+    return order;
+}
+export function getTotalVertices(scene) {
+    let total = 0;
+    for (let i = 0; i < scene.length; i++) {
+        if (scene[i].isCollection)
+            continue;
+        total += scene[i].getVertexCount();
+    }
+    return total;
+}

package/dist/simulation.js

@@ -1,8 +1,9 @@
 import { vec3 } from 'wgpu-matrix';
 import { SimulationElement3d } from './graphics.js';
 import { BUF_LEN } from './constants.js';
-import { Color, applyElementToScene, buildDepthTexture, buildMultisampleTexture, buildProjectionMatrix, createPipeline, getOrthoMatrix, getTotalVertices, getTransformationMatrix, logger, transitionValues, vector2, vector3 } from './utils.js';
+import { Color, transitionValues, vector2, vector3 } from './utils.js';
 import { BlankGeometry } from './geometry.js';
+import { applyElementToScene, buildDepthTexture, buildMultisampleTexture, buildProjectionMatrix, createPipeline, getOrthoMatrix, getTotalVertices, getTransformationMatrix, logger } from './internalUtils.js';
 const shader = `
 struct Uniforms {
   modelViewProjectionMatrix : mat4x4<f32>,

package/dist/types.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="dist" />
 import { CubicBezierCurve2d, SplinePoint2d } from './graphics.js';
 import { Color, Vertex } from './utils.js';
+export type Shift<T extends any[]> = ((...args: T) => any) extends (arg1: any, ...rest: infer R) => any ? R : never;
 export type FloatArray = Float32Array | Float64Array;
 export type Vector4 = FloatArray & [number, number, number, number];
 export type Vector3 = FloatArray & [number, number, number];
@@ -35,12 +36,13 @@ export type SquareGeometryParams = {
     width: number;
     height: number;
     colorMap: VertexColorMap;
+    centerOffset: Vector2;
 };
 export type CircleGeometryParams = {
     radius: number;
     detail: number;
 };
-export type SplineGeometryParams = {
+export type Spline2dGeometryParams = {
     points: SplinePoint2d[];
     curves: CubicBezierCurve2d[];
     distance: number;

package/dist/utils.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="dist" />
-import { SimulationElement, SplinePoint2d } from './graphics.js';
-import { FloatArray, Mat4, Vector2, Vector3, Vector4 } from './types.js';
+import { SplinePoint2d } from './graphics.js';
+import { FloatArray, Mat4, Shift, Vector2, Vector3, Vector4 } from './types.js';
 export declare class Color {
     r: number;
     g: number;
@@ -18,16 +17,6 @@ export declare class Color {
     };
     diff(color: Color): Color;
 }
-export declare class VertexCache {
-    private vertices;
-    private hasUpdated;
-    constructor();
-    setCache(vertices: number[]): void;
-    getCache(): number[];
-    updated(): void;
-    shouldUpdate(): boolean;
-    getVertexCount(): number;
-}
 export declare class Vertex {
     private pos;
     private color;
@@ -47,22 +36,6 @@ export declare class Vertex {
     clone(): Vertex;
     toBuffer(defaultColor: Color): number[];
 }
-export declare const buildProjectionMatrix: (aspectRatio: number, zNear?: number, zFar?: number) => any;
-export declare const getTransformationMatrix: (pos: Vector3, rotation: Vector3, projectionMatrix: mat4) => Float32Array;
-export declare const getOrthoMatrix: (screenSize: [number, number]) => Float32Array;
-export declare const buildDepthTexture: (device: GPUDevice, width: number, height: number) => GPUTexture;
-export declare const buildMultisampleTexture: (device: GPUDevice, ctx: GPUCanvasContext, width: number, height: number) => GPUTexture;
-export declare const applyElementToScene: (scene: SimulationElement[], el: SimulationElement) => void;
-declare class Logger {
-    constructor();
-    private fmt;
-    log(msg: string): void;
-    error(msg: string): Error;
-    warn(msg: string): void;
-    log_error(msg: string): void;
-}
-export declare const logger: Logger;
-export declare function lossyTriangulate<T>(vertices: T[]): (readonly [T, T, T])[];
 /**
  * @param callback1 - called every frame until the animation is finished
  * @param callback2 - called after animation is finished (called immediately when t = 0)
@@ -70,21 +43,13 @@ export declare function lossyTriangulate<T>(vertices: T[]): (readonly [T, T, T])
  * @returns {Promise<void>}
  */
 export declare function transitionValues(callback1: (deltaT: number, t: number) => void, callback2: () => void, transitionLength: number, func?: (n: number) => number): Promise<void>;
+export declare function frameLoop<T extends (...args: any[]) => any>(cb: T): (...params: Shift<Parameters<T>>) => void;
 export declare function lerp(a: number, b: number, t: number): number;
 export declare function smoothStep(t: number): number;
 export declare function linearStep(t: number): number;
 export declare function easeInOutExpo(t: number): number;
 export declare function easeInOutQuart(t: number): number;
 export declare function easeInOutQuad(t: number): number;
-declare class BufferGenerator {
-    private instancing;
-    constructor();
-    setInstancing(state: boolean): void;
-    generate(x: number, y: number, z: number, color: Color, uv?: Vector2): number[];
-}
-export declare const bufferGenerator: BufferGenerator;
-export declare function vector3ToPixelRatio(vec: Vector3): void;
-export declare function vector2ToPixelRatio(vec: Vector2): void;
 export declare function cloneBuf<T extends FloatArray>(buf: T): T;
 export declare function vector4(x?: number, y?: number, z?: number, w?: number): Vector4;
 export declare function vector3(x?: number, y?: number, z?: number): Vector3;
@@ -100,14 +65,9 @@ export declare function color(r?: number, g?: number, b?: number, a?: number): C
 export declare function colorf(val: number, a?: number): Color;
 export declare function splinePoint2d(end: Vertex, control1: Vector2, control2: Vector2, detail?: number): SplinePoint2d;
 export declare function continuousSplinePoint2d(end: Vertex, control: Vector2, detail?: number): SplinePoint2d;
-export declare function interpolateColors(colors: Color[], t: number): Color;
 /**
  * @param t - seconds
  */
 export declare function waitFor(t: number): Promise<unknown>;
-export declare function matrixFromRotation(rotation: Vector3): Mat4;
-export declare function rotateMat4(mat: Mat4, rotation: Vector3): void;
-export declare function createPipeline(device: GPUDevice, module: GPUShaderModule, bindGroupLayout: GPUBindGroupLayout, presentationFormat: GPUTextureFormat, entryPoint: string, topology: GPUPrimitiveTopology): GPURenderPipeline;
-export declare function triangulateWireFrameOrder(len: number): number[];
-export declare function getTotalVertices(scene: SimulationElement[]): number;
-export {};
+export declare function distance2d(vector1: Vector2, vector2: Vector2): number;
+export declare function distance3d(vector1: Vector3, vector2: Vector3): number;

package/dist/utils.js

@@ -1,6 +1,6 @@
 import { mat4, vec2, vec3, vec4 } from 'wgpu-matrix';
-import { SimulationElement, SplinePoint2d } from './graphics.js';
-import { BUF_LEN, colorOffset, drawingInstancesOffset, uvOffset, vertexSize } from './constants.js';
+import { SplinePoint2d } from './graphics.js';
+import { bufferGenerator } from './internalUtils.js';
 export class Color {
     r; // 0 - 255
     g; // 0 - 255
@@ -33,27 +33,6 @@ export class Color {
         return new Color(this.r - color.r, this.g - color.g, this.b - color.b, this.a - color.a);
     }
 }
-export class VertexCache {
-    vertices = [];
-    hasUpdated = true;
-    constructor() { }
-    setCache(vertices) {
-        this.vertices = vertices;
-        this.hasUpdated = false;
-    }
-    getCache() {
-        return this.vertices;
-    }
-    updated() {
-        this.hasUpdated = true;
-    }
-    shouldUpdate() {
-        return this.hasUpdated;
-    }
-    getVertexCount() {
-        return this.vertices.length / BUF_LEN;
-    }
-}
 export class Vertex {
     pos;
     color;
@@ -105,98 +84,6 @@ export class Vertex {
             return bufferGenerator.generate(this.pos[0], this.pos[1], 0, this.color || defaultColor, this.uv);
     }
 }
-export const buildProjectionMatrix = (aspectRatio, zNear = 1, zFar = 500) => {
-    const fov = (2 * Math.PI) / 5;
-    return mat4.perspective(fov, aspectRatio, zNear, zFar);
-};
-export const getTransformationMatrix = (pos, rotation, projectionMatrix) => {
-    const modelViewProjectionMatrix = mat4.create();
-    const viewMatrix = mat4.identity();
-    const camPos = vector3();
-    vec3.clone(pos, camPos);
-    vec3.scale(camPos, -1, camPos);
-    mat4.rotateZ(viewMatrix, rotation[2], viewMatrix);
-    mat4.rotateY(viewMatrix, rotation[1], viewMatrix);
-    mat4.rotateX(viewMatrix, rotation[0], viewMatrix);
-    mat4.translate(viewMatrix, camPos, viewMatrix);
-    mat4.multiply(projectionMatrix, viewMatrix, modelViewProjectionMatrix);
-    return modelViewProjectionMatrix;
-};
-export const getOrthoMatrix = (screenSize) => {
-    return mat4.ortho(0, screenSize[0], 0, screenSize[1], 0, 100);
-};
-export const buildDepthTexture = (device, width, height) => {
-    return device.createTexture({
-        size: [width, height],
-        format: 'depth24plus',
-        usage: GPUTextureUsage.RENDER_ATTACHMENT,
-        sampleCount: 4
-    });
-};
-export const buildMultisampleTexture = (device, ctx, width, height) => {
-    return device.createTexture({
-        size: [width, height],
-        format: ctx.getCurrentTexture().format,
-        usage: GPUTextureUsage.RENDER_ATTACHMENT,
-        sampleCount: 4
-    });
-};
-export const applyElementToScene = (scene, el) => {
-    if (el instanceof SimulationElement) {
-        scene.push(el);
-    }
-    else {
-        throw logger.error('Cannot add invalid SimulationElement');
-    }
-};
-class Logger {
-    constructor() { }
-    fmt(msg) {
-        return `SimJS: ${msg}`;
-    }
-    log(msg) {
-        console.log(this.fmt(msg));
-    }
-    error(msg) {
-        return new Error(this.fmt(msg));
-    }
-    warn(msg) {
-        console.warn(this.fmt(msg));
-    }
-    log_error(msg) {
-        console.error(this.fmt(msg));
-    }
-}
-export const logger = new Logger();
-// optomized for speed, depending on orientation of vertices as input, shape may not be preserved
-export function lossyTriangulate(vertices) {
-    const res = [];
-    let facingRight = true;
-    let rightOffset = 0;
-    let leftOffset = 0;
-    while (rightOffset < vertices.length - leftOffset - 2) {
-        if (facingRight) {
-            const triangle = [
-                vertices[rightOffset],
-                vertices[rightOffset + 1],
-                vertices[vertices.length - leftOffset - 1]
-            ];
-            res.push(triangle);
-            rightOffset++;
-        }
-        else {
-            const triangle = [
-                vertices[rightOffset],
-                vertices[vertices.length - leftOffset - 1],
-                vertices[vertices.length - leftOffset - 2]
-            ];
-            res.push(triangle);
-            leftOffset++;
-        }
-        facingRight = !facingRight;
-    }
-    return res;
-}
 /**
  * @param callback1 - called every frame until the animation is finished
  * @param callback2 - called after animation is finished (called immediately when t = 0)
@@ -234,6 +121,27 @@ export function transitionValues(callback1, callback2, transitionLength, func) {
         }
     });
 }
+export function frameLoop(cb) {
+    let prevFrame = 0;
+    let prevTime = 0;
+    function start(dt, ...args) {
+        let res = cb(dt, ...args);
+        if (res === false) {
+            window.cancelAnimationFrame(prevFrame);
+            return;
+        }
+        if (!Array.isArray(res))
+            res = args;
+        const now = Date.now();
+        const diff = now - prevTime;
+        prevTime = now;
+        prevFrame = window.requestAnimationFrame(() => start(diff, ...res));
+    }
+    return (...p) => {
+        prevTime = Date.now();
+        start(0, ...p);
+    };
+}
 export function lerp(a, b, t) {
     return a + (b - a) * t;
 }
@@ -260,26 +168,6 @@ export function easeInOutQuart(t) {
 export function easeInOutQuad(t) {
     return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
 }
-class BufferGenerator {
-    instancing = false;
-    constructor() { }
-    setInstancing(state) {
-        this.instancing = state;
-    }
-    generate(x, y, z, color, uv = vector2()) {
-        return [x, y, z, 1, ...color.toBuffer(), ...uv, this.instancing ? 1 : 0];
-    }
-}
-export const bufferGenerator = new BufferGenerator();
-export function vector3ToPixelRatio(vec) {
-    vec[0] *= devicePixelRatio;
-    vec[1] *= devicePixelRatio;
-    vec[2] *= devicePixelRatio;
-}
-export function vector2ToPixelRatio(vec) {
-    vec[0] *= devicePixelRatio;
-    vec[1] *= devicePixelRatio;
-}
 export function cloneBuf(buf) {
     return new Float32Array(buf);
 }
@@ -334,31 +222,6 @@ export function continuousSplinePoint2d(end, control, detail) {
     vec2.add(end.getPos(), control, control);
     return new SplinePoint2d(null, end, null, control, rawControls, detail);
 }
-export function interpolateColors(colors, t) {
-    t = Math.min(1, Math.max(0, t));
-    if (colors.length === 0)
-        return color();
-    if (colors.length === 1)
-        return colors[0];
-    const colorInterval = 1 / colors.length;
-    let index = Math.floor(t / colorInterval);
-    if (index >= colors.length)
-        index = colors.length - 1;
-    const from = index === colors.length - 1 ? colors[index - 1] : colors[index];
-    const to = index === colors.length - 1 ? colors[index] : colors[index + 1];
-    const diff = to.diff(from);
-    const scale = t / (colorInterval * colors.length);
-    diff.r *= scale;
-    diff.g *= scale;
-    diff.b *= scale;
-    diff.a *= scale;
-    const res = from.clone();
-    res.r += diff.r;
-    res.g += diff.g;
-    res.b += diff.b;
-    res.a += diff.a;
-    return res;
-}
 /**
  * @param t - seconds
  */
@@ -367,99 +230,9 @@ export function waitFor(t) {
         setTimeout(resolve, t * 1000);
     });
 }
-export function matrixFromRotation(rotation) {
-    let rotMatrix = mat4.identity();
-    mat4.rotateZ(rotMatrix, rotation[2], rotMatrix);
-    mat4.rotateY(rotMatrix, rotation[1], rotMatrix);
-    mat4.rotateX(rotMatrix, rotation[0], rotMatrix);
-    return rotMatrix;
+export function distance2d(vector1, vector2) {
+    return vec2.distance(vector1, vector2);
 }
-export function rotateMat4(mat, rotation) {
-    mat4.rotateZ(mat, rotation[2], mat);
-    mat4.rotateY(mat, rotation[1], mat);
-    mat4.rotateX(mat, rotation[0], mat);
-}
-export function createPipeline(device, module, bindGroupLayout, presentationFormat, entryPoint, topology) {
-    return device.createRenderPipeline({
-        layout: device.createPipelineLayout({
-            bindGroupLayouts: [bindGroupLayout]
-        }),
-        vertex: {
-            module,
-            entryPoint,
-            buffers: [
-                {
-                    arrayStride: vertexSize,
-                    attributes: [
-                        {
-                            // position
-                            shaderLocation: 0,
-                            offset: 0,
-                            format: 'float32x4'
-                        },
-                        {
-                            // color
-                            shaderLocation: 1,
-                            offset: colorOffset,
-                            format: 'float32x4'
-                        },
-                        {
-                            // size
-                            shaderLocation: 2,
-                            offset: uvOffset,
-                            format: 'float32x2'
-                        },
-                        {
-                            // drawing instances
-                            shaderLocation: 3,
-                            offset: drawingInstancesOffset,
-                            format: 'float32'
-                        }
-                    ]
-                }
-            ]
-        },
-        fragment: {
-            module,
-            entryPoint: 'fragment_main',
-            targets: [
-                {
-                    format: presentationFormat
-                }
-            ]
-        },
-        primitive: {
-            topology
-        },
-        multisample: {
-            count: 4
-        },
-        depthStencil: {
-            depthWriteEnabled: true,
-            depthCompare: 'less',
-            format: 'depth24plus'
-        }
-    });
-}
-export function triangulateWireFrameOrder(len) {
-    const order = Array(len)
-        .fill(0)
-        .map((_, index) => index);
-    let front = 0;
-    let back = len - 1;
-    while (front < back) {
-        order.push(front, back);
-        front++;
-        back--;
-    }
-    return order;
-}
-export function getTotalVertices(scene) {
-    let total = 0;
-    for (let i = 0; i < scene.length; i++) {
-        if (scene[i].isCollection)
-            continue;
-        total += scene[i].getVertexCount();
-    }
-    return total;
+export function distance3d(vector1, vector2) {
+    return vec3.distance(vector1, vector2);
 }

package/package.json

@@ -5,7 +5,7 @@
   "types": "./dist/index.d.ts",
   "author": "Jackson Otto",
   "description": "A simple graphics library using WebGPU",
-  "version": "0.2.9",
+  "version": "0.3.1",
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -24,6 +24,6 @@
   },
   "dependencies": {
     "@webgpu/types": "^0.1.34",
-    "wgpu-matrix": "^2.5.1"
+    "wgpu-matrix": "^2.8.0"
   }
 }