simulationjsv2 0.1.5 → 0.1.7

package/dist/graphics.d.ts

@@ -1,33 +1,6 @@
-import { Camera, Color } from './simulation.js';
-import type { Vector2, Vector3, LerpFunc, VertexColorMap, Vector4 } from './types.js';
-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;
-    private is3d;
-    private readonly uv;
-    constructor(x?: number, y?: number, z?: number, color?: Color, is3dPoint?: boolean, uv?: Vector2);
-    getPos(): Vector3;
-    getColor(): Color | null;
-    getUv(): Vector2;
-    setColor(color: Color): void;
-    setPos(pos: Vector3): void;
-    setX(x: number): void;
-    setY(y: number): void;
-    setZ(z: number): void;
-    setIs3d(is3d: boolean): void;
-    clone(): Vertex;
-    toBuffer(defaultColor: Color): number[];
-}
+import { Camera } from './simulation.js';
+import type { Vector2, Vector3, LerpFunc, VertexColorMap } from './types.js';
+import { Vertex, VertexCache, Color } from './utils.js';
 export declare abstract class SimulationElement {
     private pos;
     private color;
@@ -85,17 +58,45 @@ export declare class Polygon extends SimulationElement {
     constructor(pos: Vector3, vertices: Vertex[], color?: Color);
     rotate(amount: number, t?: number, f?: LerpFunc): Promise<void>;
     rotateTo(num: number, t?: number, f?: LerpFunc): Promise<void>;
-    setPoints(newVertices: Vertex[], t?: number, f?: LerpFunc): Promise<void>;
+    getVertices(): Vertex[];
+    setVertices(newVertices: Vertex[], t?: number, f?: LerpFunc): Promise<void>;
+    getBuffer(camera: Camera, force: boolean): number[];
+}
+export declare class BezierCurve2d {
+    private points;
+    constructor(points: Vector2[]);
+    interpolateSlope(t: number): readonly [Vector2, Vector2];
+    interpolate(t: number): Vector2;
+    getPoints(): Vector2[];
+    getLength(): number;
+}
+export declare class CubicBezierCurve2d extends BezierCurve2d {
+    private detail;
+    constructor(points: [Vector2, Vector2, Vector2, Vector2], detail?: number);
+    getDetail(): number | undefined;
+}
+export declare class SplinePoint2d {
+    private start;
+    private end;
+    private control1;
+    private control2;
+    private rawControls;
+    private detail;
+    constructor(start: Vertex | null, end: Vertex, control1: Vector2 | null, control2: Vector2, rawControls: [Vector2, Vector2], detail?: number);
+    getStart(): Vertex | null;
+    getEnd(): Vertex;
+    getControls(): readonly [Vector2 | null, Vector2];
+    getRawControls(): [Vector2, Vector2];
+    getDetail(): number | undefined;
+    getVectorArray(prevEnd: Vector2 | null, prevControl: Vector2 | null): readonly [Vector2, Vector2, Vector2, Vector2];
+}
+export declare class Spline2d extends SimulationElement {
+    private curves;
+    private width;
+    private detail;
+    private interpolateLimit;
+    private distance;
+    constructor(pos: Vector2, points: SplinePoint2d[], width?: number, color?: Color, detail?: number);
+    setInterpolateLimit(limit: number, t?: number, f?: LerpFunc): Promise<void>;
     getBuffer(camera: Camera, force: boolean): number[];
 }
-export declare function vector4(x?: number, y?: number, z?: number, w?: number): Vector4;
-export declare function vector3(x?: number, y?: number, z?: number): Vector3;
-export declare function vector2(x?: number, y?: number): Vector2;
-export declare function vec3fromVec2(vec: Vector2): Vector3;
-export declare function colorFromVec4(vec: Vector4): Color;
-export declare function randomInt(range: number, min?: number): number;
-export declare function randomColor(a?: number): Color;
-export declare function vertex(x?: number, y?: number, z?: number, color?: Color, is3dPoint?: boolean, uv?: Vector2): Vertex;
-export declare function color(r?: number, g?: number, b?: number, a?: number): Color;
-export declare function colorf(val: number, a?: number): Color;
-export {};

package/dist/graphics.js

@@ -1,75 +1,5 @@
 import { vec3, quat, mat4, vec2, vec4 } from 'wgpu-matrix';
-import { Color, transitionValues } from './simulation.js';
-import { BUF_LEN } from './constants.js';
-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;
-    is3d;
-    uv;
-    constructor(x = 0, y = 0, z = 0, color, is3dPoint = true, uv = vector2()) {
-        this.pos = vector3(x, y, z);
-        this.color = color ? color : null;
-        this.is3d = is3dPoint;
-        this.uv = uv;
-    }
-    getPos() {
-        return this.pos;
-    }
-    getColor() {
-        return this.color;
-    }
-    getUv() {
-        return this.uv;
-    }
-    setColor(color) {
-        this.color = color;
-    }
-    setPos(pos) {
-        this.pos = pos;
-    }
-    setX(x) {
-        this.pos[0] = x;
-    }
-    setY(y) {
-        this.pos[1] = y;
-    }
-    setZ(z) {
-        this.pos[2] = z;
-    }
-    setIs3d(is3d) {
-        this.is3d = is3d;
-    }
-    clone() {
-        return new Vertex(this.pos[0], this.pos[1], this.pos[2], this.color?.clone(), this.is3d, cloneBuf(this.uv));
-    }
-    toBuffer(defaultColor) {
-        if (this.is3d)
-            return vertexBuffer3d(this.pos[0], this.pos[1], this.pos[2], this.color || defaultColor, this.uv);
-        else
-            return vertexBuffer2d(this.pos[0], this.pos[1], this.color || defaultColor, this.uv);
-    }
-}
+import { Vertex, VertexCache, cloneBuf, color, colorFromVector4, lossyTriangulate, vec3ToPixelRatio, vector3FromVector2, vector2, vector3, vertex, vertexBuffer2d, vertexBuffer3d, Color, transitionValues, logger, vector2FromVector3 } from './utils.js';
 export class SimulationElement {
     pos;
     color;
@@ -209,7 +139,7 @@ export class Square extends SimulationElement {
      * @param vertexColors{Record<number, Color>} - 0 is top left vertex, numbers increase clockwise
      */
     constructor(pos, width, height, color, rotation, vertexColors) {
-        super(vec3fromVec2(pos), color);
+        super(vector3FromVector2(pos), color);
         this.width = width * devicePixelRatio;
         this.height = height * devicePixelRatio;
         this.rotation = rotation || 0;
@@ -331,7 +261,7 @@ export class Circle extends SimulationElement {
     radius;
     detail = 100;
     constructor(pos, radius, color, detail = 50) {
-        super(vec3fromVec2(pos), color);
+        super(vector3FromVector2(pos), color);
         this.radius = radius * devicePixelRatio;
         this.detail = detail;
     }
@@ -410,7 +340,10 @@ export class Polygon extends SimulationElement {
             this.rotation = num;
         }, t, f);
     }
-    setPoints(newVertices, t = 0, f) {
+    getVertices() {
+        return this.vertices;
+    }
+    setVertices(newVertices, t = 0, f) {
         const vertices = newVertices.map((vert) => {
             const newVertex = vert.clone();
             newVertex.setZ(0);
@@ -461,7 +394,7 @@ export class Polygon extends SimulationElement {
                 vec4.scale(colorChange, p, colorChange);
                 vec4.add((vert.getColor() || this.getColor()).toVec4(), colorChange, colorChange);
                 vert.setPos(posChange);
-                vert.setColor(colorFromVec4(colorChange));
+                vert.setColor(colorFromVector4(colorChange));
             });
             this.vertexCache.updated();
         }, () => {
@@ -471,7 +404,7 @@ export class Polygon extends SimulationElement {
                 vec3.add(initPos, posChanges[i], initPos);
                 vec4.add(initColor, colorChanges[i], initColor);
                 vert.setPos(initPos);
-                vert.setColor(colorFromVec4(initColor));
+                vert.setColor(colorFromVector4(initColor));
             });
             this.vertices.splice(vertices.length, this.vertices.length);
             this.vertexCache.updated();
@@ -498,74 +431,194 @@ export class Polygon extends SimulationElement {
         return this.vertexCache.getCache();
     }
 }
-// optomized for speed, depending on orientation of vertices as input, shape may not be preserved
-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++;
+export class BezierCurve2d {
+    points;
+    constructor(points) {
+        if (points.length === 0)
+            throw logger.error('Expected 1 or more points for BezierCurve2d');
+        this.points = points;
+    }
+    interpolateSlope(t) {
+        let vectors = this.points;
+        let slopeVector = vector2(1);
+        while (vectors.length > 2) {
+            let newVectors = [];
+            for (let i = 1; i < vectors.length - 1; i++) {
+                const from = vector2();
+                const to = vector2();
+                vec2.sub(vectors[i], vectors[i - 1], from);
+                vec2.scale(from, t, from);
+                vec2.add(from, vectors[i - 1], from);
+                vec2.sub(vectors[i + 1], vectors[i], to);
+                vec2.scale(to, t, to);
+                vec2.add(to, vectors[i], to);
+                if (i === 1) {
+                    newVectors.push(from);
+                }
+                newVectors.push(to);
+            }
+            vectors = newVectors;
         }
-        facingRight = !facingRight;
+        vec2.sub(vectors[1], vectors[0], slopeVector);
+        let resVector = vector2();
+        vec2.scale(slopeVector, t, resVector);
+        vec2.add(resVector, vectors[0], resVector);
+        return [resVector, slopeVector];
+    }
+    interpolate(t) {
+        const [vec] = this.interpolateSlope(t);
+        return vec;
+    }
+    getPoints() {
+        return this.points;
+    }
+    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 res;
-}
-function vertexBuffer3d(x, y, z, color, uv = vector2()) {
-    return [x, y, z, 1, ...color.toBuffer(), ...uv, 1];
-}
-function vertexBuffer2d(x, y, color, uv = vector2()) {
-    return [x, y, 0, 1, ...color.toBuffer(), ...uv, 0];
-}
-function vec3ToPixelRatio(vec) {
-    vec3.mul(vec, vector3(devicePixelRatio, devicePixelRatio, devicePixelRatio), vec);
-}
-function cloneBuf(buf) {
-    return new Float32Array(buf);
-}
-export function vector4(x = 0, y = 0, z = 0, w = 0) {
-    return vec4.fromValues(x, y, z, w);
-}
-export function vector3(x = 0, y = 0, z = 0) {
-    return vec3.fromValues(x, y, z);
-}
-export function vector2(x = 0, y = 0) {
-    return vec2.fromValues(x, y, 0);
-}
-export function vec3fromVec2(vec) {
-    return vector3(vec[0], vec[1]);
-}
-export function colorFromVec4(vec) {
-    return new Color(vec[0], vec[1], vec[2], vec[3]);
-}
-export function randomInt(range, min = 0) {
-    return Math.floor(Math.random() * (range - min)) + min;
-}
-export function randomColor(a = 1) {
-    return new Color(randomInt(255), randomInt(255), randomInt(255), a);
 }
-export function vertex(x, y, z, color, is3dPoint, uv) {
-    return new Vertex(x, y, z, color, is3dPoint, uv);
+export class CubicBezierCurve2d extends BezierCurve2d {
+    detail;
+    constructor(points, detail) {
+        super(points);
+        this.detail = detail;
+    }
+    getDetail() {
+        return this.detail;
+    }
 }
-export function color(r, g, b, a) {
-    return new Color(r, g, b, a);
+export class SplinePoint2d {
+    start;
+    end;
+    control1;
+    control2;
+    rawControls;
+    detail;
+    constructor(start, end, control1, control2, rawControls, detail) {
+        this.start = start;
+        this.end = end;
+        this.control1 = control1;
+        this.control2 = control2;
+        this.rawControls = rawControls;
+        this.detail = detail;
+    }
+    getStart() {
+        return this.start;
+    }
+    getEnd() {
+        return this.end;
+    }
+    getControls() {
+        return [this.control1, this.control2];
+    }
+    getRawControls() {
+        return this.rawControls;
+    }
+    getDetail() {
+        return this.detail;
+    }
+    getVectorArray(prevEnd, prevControl) {
+        const firstControl = cloneBuf(this.control1 || prevControl || vector2());
+        if (prevEnd) {
+            vec2.add(firstControl, prevEnd, firstControl);
+        }
+        else if (!this.start) {
+            prevEnd = vector2();
+        }
+        return [
+            this.start ? vector2FromVector3(this.start.getPos()) : prevEnd,
+            firstControl,
+            this.control2,
+            vector2FromVector3(this.end.getPos())
+        ];
+    }
 }
-export function colorf(val, a) {
-    return color(val, val, val, a);
+export class Spline2d extends SimulationElement {
+    curves;
+    width;
+    detail;
+    interpolateLimit;
+    distance;
+    constructor(pos, points, width = 2, color, detail = 40) {
+        super(vector3FromVector2(pos), color);
+        this.curves = [];
+        this.width = width * devicePixelRatio;
+        this.detail = detail;
+        this.interpolateLimit = 1;
+        this.distance = 0;
+        for (let i = 0; i < points.length; i++) {
+            let prevControl = null;
+            if (i > 0) {
+                prevControl = cloneBuf(points[i - 1].getRawControls()[1]);
+                vec2.negate(prevControl, prevControl);
+                console.log(prevControl);
+            }
+            const bezierPoints = points[i].getVectorArray(i > 0 ? vector2FromVector3(points[i - 1].getEnd().getPos()) : null, prevControl);
+            const curve = new CubicBezierCurve2d(bezierPoints, points[i].getDetail());
+            this.distance += curve.getLength();
+            this.curves.push(curve);
+        }
+    }
+    setInterpolateLimit(limit, t = 0, f) {
+        const diff = limit - this.interpolateLimit;
+        return transitionValues((p) => {
+            this.interpolateLimit += diff * p;
+            this.vertexCache.updated();
+        }, () => {
+            this.interpolateLimit = limit;
+            this.vertexCache.updated();
+        }, t, f);
+    }
+    getBuffer(camera, force) {
+        if (this.vertexCache.shouldUpdate() || force) {
+            const screenSize = camera.getScreenSize();
+            let verticesTop = [];
+            const verticesBottom = [];
+            let currentDistance = 0;
+            outer: for (let i = 0; i < this.curves.length; i++) {
+                const detail = this.curves[i].getDetail() || this.detail;
+                const step = 1 / detail;
+                const distanceRatio = currentDistance / this.distance;
+                if (distanceRatio > this.interpolateLimit)
+                    break;
+                const curveLength = this.curves[i].getLength();
+                currentDistance += curveLength;
+                const sectionRatio = curveLength / this.distance;
+                for (let j = 0; j < detail + 1; j++) {
+                    let currentInterpolation = step * j;
+                    let atLimit = false;
+                    if (step * j * sectionRatio + distanceRatio > this.interpolateLimit) {
+                        atLimit = true;
+                        currentInterpolation = (this.interpolateLimit - distanceRatio) / sectionRatio;
+                    }
+                    const [point, slope] = this.curves[i].interpolateSlope(currentInterpolation);
+                    const pos = this.getPos();
+                    point[0] += pos[0];
+                    point[1] += screenSize[1] - pos[1];
+                    const normal = vector2(-slope[1], slope[0]);
+                    vec2.normalize(normal, normal);
+                    vec2.scale(normal, this.width / 2, normal);
+                    const vertTop = vertex(point[0] + normal[0], point[1] + normal[1]);
+                    verticesTop.push(vertTop);
+                    const vertBottom = vertex(point[0] - normal[0], point[1] - normal[1]);
+                    verticesBottom.unshift(vertBottom);
+                    if (atLimit) {
+                        break outer;
+                    }
+                }
+            }
+            verticesTop = verticesTop.concat(verticesBottom);
+            let resBuffer = [];
+            lossyTriangulate(verticesTop)
+                .flat()
+                .forEach((vert) => {
+                const pos = vert.getPos();
+                resBuffer = resBuffer.concat(vertexBuffer2d(pos[0], pos[1], vert.getColor() || this.getColor()));
+            });
+            this.vertexCache.setCache(resBuffer);
+            return resBuffer;
+        }
+        return this.vertexCache.getCache();
+    }
 }

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from './simulation.js';
 export * from './graphics.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 } from './utils.js';

package/dist/index.js

@@ -1,3 +1,4 @@
 export * from './simulation.js';
 export * from './graphics.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 } from './utils.js';

package/dist/simulation.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="dist" />
 import { SimulationElement } from './graphics.js';
 import type { Vector2, Vector3, LerpFunc } from './types.js';
+import { Color } from './utils.js';
 export declare class Simulation {
     canvasRef: HTMLCanvasElement | null;
     private bgColor;
@@ -47,30 +48,3 @@ export declare class Camera {
     getPos(): Vector3;
     getAspectRatio(): number;
 }
-export declare class Color {
-    r: number;
-    g: number;
-    b: number;
-    a: number;
-    constructor(r?: number, g?: number, b?: number, a?: number);
-    clone(): Color;
-    toBuffer(): readonly [number, number, number, number];
-    toVec4(): import("./types.js").Vector4;
-    toObject(): {
-        r: number;
-        g: number;
-        b: number;
-        a: number;
-    };
-    diff(color: Color): Color;
-}
-/**
- * @param callback1 - called every frame until the animation is finished
- * @param callback2 - called after animation is finished (called immediately when t = 0)
- * @param t - animation time (seconds)
- * @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 lerp(a: number, b: number, t: number): number;
-export declare function smoothStep(t: number): number;
-export declare function linearStep(n: number): number;

package/dist/simulation.js

@@ -1,7 +1,7 @@
 import { vec3 } from 'wgpu-matrix';
-import { SimulationElement, vector2, vector3, vector4 } from './graphics.js';
+import { SimulationElement } from './graphics.js';
 import { BUF_LEN } from './constants.js';
-import { applyElementToScene, buildDepthTexture, buildProjectionMatrix, getOrthoMatrix, getTransformationMatrix, logger } from './utils.js';
+import { Color, applyElementToScene, buildDepthTexture, buildProjectionMatrix, getOrthoMatrix, getTransformationMatrix, logger, transitionValues, vector2, vector3 } from './utils.js';
 const vertexSize = 44; // 4 * 10 + 1
 const colorOffset = 16; // 4 * 4
 const uvOffset = 32; // 4 * 8
@@ -251,7 +251,7 @@ export class Simulation {
         });
         const colorAttachment = {
             // @ts-ignore
-            view: undefined,
+            view: undefined, // Assigned later
             clearValue: this.bgColor.toObject(),
             loadOp: 'clear',
             storeOp: 'store'
@@ -469,83 +469,3 @@ export class Camera {
         return this.aspectRatio;
     }
 }
-export class Color {
-    r; // 0 - 255
-    g; // 0 - 255
-    b; // 0 - 255
-    a; // 0.0 - 1.0
-    constructor(r = 0, g = 0, b = 0, a = 1) {
-        this.r = r;
-        this.g = g;
-        this.b = b;
-        this.a = a;
-    }
-    clone() {
-        return new Color(this.r, this.g, this.b, this.a);
-    }
-    toBuffer() {
-        return [this.r / 255, this.g / 255, this.b / 255, this.a];
-    }
-    toVec4() {
-        return vector4(this.r, this.g, this.b, this.a);
-    }
-    toObject() {
-        return {
-            r: this.r / 255,
-            g: this.g / 255,
-            b: this.b / 255,
-            a: this.a
-        };
-    }
-    diff(color) {
-        return new Color(this.r - color.r, this.g - color.g, this.b - color.b, this.a - color.a);
-    }
-}
-/**
- * @param callback1 - called every frame until the animation is finished
- * @param callback2 - called after animation is finished (called immediately when t = 0)
- * @param t - animation time (seconds)
- * @returns {Promise<void>}
- */
-export function transitionValues(callback1, callback2, transitionLength, func) {
-    return new Promise((resolve) => {
-        if (transitionLength == 0) {
-            callback2();
-            resolve();
-        }
-        else {
-            let prevPercent = 0;
-            let prevTime = Date.now();
-            const step = (t, f) => {
-                const newT = f(t);
-                callback1(newT - prevPercent, t);
-                prevPercent = newT;
-                const now = Date.now();
-                let diff = now - prevTime;
-                diff = diff === 0 ? 1 : diff;
-                const fpsScale = 1 / diff;
-                const inc = 1 / (1000 * fpsScale * transitionLength);
-                prevTime = now;
-                if (t < 1) {
-                    window.requestAnimationFrame(() => step(t + inc, f));
-                }
-                else {
-                    callback2();
-                    resolve();
-                }
-            };
-            step(0, func ? func : linearStep);
-        }
-    });
-}
-export function lerp(a, b, t) {
-    return a + (b - a) * t;
-}
-export function smoothStep(t) {
-    const v1 = t * t;
-    const v2 = 1 - (1 - t) * (1 - t);
-    return lerp(v1, v2, t);
-}
-export function linearStep(n) {
-    return n;
-}

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import { Color } from './simulation.js';
+import { Color } from './utils.js';
 export type Vector4 = Float32Array & [number, number, number, number];
 export type Vector3 = Float32Array & [number, number, number];
 export type Vector2 = Float32Array & [number, number];

package/dist/utils.d.ts

@@ -1,7 +1,53 @@
 /// <reference types="dist" />
-import { SimulationElement } from './graphics.js';
-import { Vector3 } from './types.js';
+import { SimulationElement, SplinePoint2d } from './graphics.js';
+import { Vector2, Vector3, Vector4 } from './types.js';
 import { Camera } from './simulation.js';
+export declare class Color {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+    constructor(r?: number, g?: number, b?: number, a?: number);
+    clone(): Color;
+    toBuffer(): readonly [number, number, number, number];
+    toVec4(): Vector4;
+    toObject(): {
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+    };
+    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;
+    private is3d;
+    private uv;
+    constructor(x?: number, y?: number, z?: number, color?: Color, is3dPoint?: boolean, uv?: Vector2);
+    getPos(): Vector3;
+    setPos(pos: Vector3): void;
+    getColor(): Color | null;
+    setColor(color: Color): void;
+    getUv(): Vector2;
+    setUv(uv: Vector2): void;
+    setX(x: number): void;
+    setY(y: number): void;
+    setZ(z: number): void;
+    setIs3d(is3d: boolean): void;
+    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;
@@ -16,4 +62,32 @@ declare class Logger {
     log_error(msg: string): void;
 }
 export declare const logger: Logger;
+export declare function lossyTriangulate(vertices: Vertex[]): (readonly [Vertex, Vertex, Vertex])[];
+/**
+ * @param callback1 - called every frame until the animation is finished
+ * @param callback2 - called after animation is finished (called immediately when t = 0)
+ * @param t - animation time (seconds)
+ * @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 lerp(a: number, b: number, t: number): number;
+export declare function smoothStep(t: number): number;
+export declare function linearStep(n: number): number;
+export declare function vertexBuffer3d(x: number, y: number, z: number, color: Color, uv?: Vector2): number[];
+export declare function vertexBuffer2d(x: number, y: number, color: Color, uv?: Vector2): number[];
+export declare function vec3ToPixelRatio(vec: Vector3): void;
+export declare function cloneBuf<T extends Float32Array>(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;
+export declare function vector2(x?: number, y?: number): Vector2;
+export declare function vector3FromVector2(vec: Vector2): Vector3;
+export declare function vector2FromVector3(vec: Vector3): Vector2;
+export declare function colorFromVector4(vec: Vector4): Color;
+export declare function randomInt(range: number, min?: number): number;
+export declare function randomColor(a?: number): Color;
+export declare function vertex(x?: number, y?: number, z?: number, color?: Color, is3dPoint?: boolean, uv?: Vector2): Vertex;
+export declare function color(r?: number, g?: number, b?: number, a?: number): Color;
+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 {};

package/dist/utils.js

@@ -1,5 +1,110 @@
-import { mat4, vec3 } from 'wgpu-matrix';
-import { SimulationElement, vector3 } from './graphics.js';
+import { mat4, vec2, vec3, vec4 } from 'wgpu-matrix';
+import { SimulationElement, SplinePoint2d } from './graphics.js';
+import { BUF_LEN } from './constants.js';
+export class Color {
+    r; // 0 - 255
+    g; // 0 - 255
+    b; // 0 - 255
+    a; // 0.0 - 1.0
+    constructor(r = 0, g = 0, b = 0, a = 1) {
+        this.r = r;
+        this.g = g;
+        this.b = b;
+        this.a = a;
+    }
+    clone() {
+        return new Color(this.r, this.g, this.b, this.a);
+    }
+    toBuffer() {
+        return [this.r / 255, this.g / 255, this.b / 255, this.a];
+    }
+    toVec4() {
+        return vector4(this.r, this.g, this.b, this.a);
+    }
+    toObject() {
+        return {
+            r: this.r / 255,
+            g: this.g / 255,
+            b: this.b / 255,
+            a: this.a
+        };
+    }
+    diff(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;
+    is3d;
+    uv;
+    constructor(x = 0, y = 0, z = 0, color, is3dPoint = true, uv = vector2()) {
+        this.pos = vector3(x, y, z);
+        this.color = color ? color : null;
+        this.is3d = is3dPoint;
+        this.uv = uv;
+    }
+    getPos() {
+        return this.pos;
+    }
+    setPos(pos) {
+        this.pos = pos;
+    }
+    getColor() {
+        return this.color;
+    }
+    setColor(color) {
+        this.color = color;
+    }
+    getUv() {
+        return this.uv;
+    }
+    setUv(uv) {
+        this.uv = uv;
+    }
+    setX(x) {
+        this.pos[0] = x;
+    }
+    setY(y) {
+        this.pos[1] = y;
+    }
+    setZ(z) {
+        this.pos[2] = z;
+    }
+    setIs3d(is3d) {
+        this.is3d = is3d;
+    }
+    clone() {
+        return new Vertex(this.pos[0], this.pos[1], this.pos[2], this.color?.clone(), this.is3d, cloneBuf(this.uv));
+    }
+    toBuffer(defaultColor) {
+        if (this.is3d)
+            return vertexBuffer3d(this.pos[0], this.pos[1], this.pos[2], this.color || defaultColor, this.uv);
+        else
+            return vertexBuffer2d(this.pos[0], this.pos[1], 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);
@@ -57,3 +162,140 @@ class Logger {
     }
 }
 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)
+ * @param t - animation time (seconds)
+ * @returns {Promise<void>}
+ */
+export function transitionValues(callback1, callback2, transitionLength, func) {
+    return new Promise((resolve) => {
+        if (transitionLength == 0) {
+            callback2();
+            resolve();
+        }
+        else {
+            let prevPercent = 0;
+            let prevTime = Date.now();
+            const step = (t, f) => {
+                const newT = f(t);
+                callback1(newT - prevPercent, t);
+                prevPercent = newT;
+                const now = Date.now();
+                let diff = now - prevTime;
+                diff = diff === 0 ? 1 : diff;
+                const fpsScale = 1 / diff;
+                const inc = 1 / (1000 * fpsScale * transitionLength);
+                prevTime = now;
+                if (t < 1) {
+                    window.requestAnimationFrame(() => step(t + inc, f));
+                }
+                else {
+                    callback2();
+                    resolve();
+                }
+            };
+            step(0, func ? func : linearStep);
+        }
+    });
+}
+export function lerp(a, b, t) {
+    return a + (b - a) * t;
+}
+export function smoothStep(t) {
+    const v1 = t * t;
+    const v2 = 1 - (1 - t) * (1 - t);
+    return lerp(v1, v2, t);
+}
+export function linearStep(n) {
+    return n;
+}
+export function vertexBuffer3d(x, y, z, color, uv = vector2()) {
+    return [x, y, z, 1, ...color.toBuffer(), ...uv, 1];
+}
+export function vertexBuffer2d(x, y, color, uv = vector2()) {
+    return [x, y, 0, 1, ...color.toBuffer(), ...uv, 0];
+}
+export function vec3ToPixelRatio(vec) {
+    vec3.mul(vec, vector3(devicePixelRatio, devicePixelRatio, devicePixelRatio), vec);
+}
+export function cloneBuf(buf) {
+    return new Float32Array(buf);
+}
+export function vector4(x = 0, y = 0, z = 0, w = 0) {
+    return vec4.fromValues(x, y, z, w);
+}
+export function vector3(x = 0, y = 0, z = 0) {
+    return vec3.fromValues(x, y, z);
+}
+export function vector2(x = 0, y = 0) {
+    return vec2.fromValues(x, y);
+}
+export function vector3FromVector2(vec) {
+    return vector3(vec[0], vec[1]);
+}
+export function vector2FromVector3(vec) {
+    return vector2(vec[0], vec[1]);
+}
+export function colorFromVector4(vec) {
+    return new Color(vec[0], vec[1], vec[2], vec[3]);
+}
+export function randomInt(range, min = 0) {
+    return Math.floor(Math.random() * (range - min)) + min;
+}
+export function randomColor(a = 1) {
+    return new Color(randomInt(255), randomInt(255), randomInt(255), a);
+}
+export function vertex(x, y, z, color, is3dPoint, uv) {
+    return new Vertex(x, y, z, color, is3dPoint, uv);
+}
+export function color(r, g, b, a) {
+    return new Color(r, g, b, a);
+}
+export function colorf(val, a) {
+    return color(val, val, val, a);
+}
+export function splinePoint2d(end, control1, control2, detail) {
+    vec2.scale(control1, devicePixelRatio, control1);
+    vec2.scale(control2, devicePixelRatio, control2);
+    vec2.scale(end.getPos(), devicePixelRatio, end.getPos());
+    const rawControls = [cloneBuf(control1), cloneBuf(control2)];
+    vec2.add(end.getPos(), control2, control2);
+    return new SplinePoint2d(null, end, control1, control2, rawControls, detail);
+}
+export function continuousSplinePoint2d(end, control, detail) {
+    vec2.scale(control, devicePixelRatio, control);
+    vec2.scale(end.getPos(), devicePixelRatio, end.getPos());
+    const rawControls = [vector2(), cloneBuf(control)];
+    vec2.add(end.getPos(), control, control);
+    return new SplinePoint2d(null, end, null, control, rawControls, detail);
+}

package/package.json

@@ -5,14 +5,13 @@
   "types": "./dist/index.d.ts",
   "author": "Jackson Otto",
   "description": "A simple graphics library using WebGPU",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "exports": {
     ".": {
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     }
   },
-  "type": "module",
   "scripts": {
     "dev": "npx nodemon --watch src -e ts --exec 'npx tsc || exit 1'",
     "test": "vite --port 3000",

package/types/constants.d.ts

@@ -1 +0,0 @@
-export declare const BUF_LEN = 11;

package/types/graphics.d.ts

@@ -1,90 +0,0 @@
-import { Camera, Color } from './simulation.js';
-import type { Vector2, Vector3, LerpFunc, VertexColorMap } from './types.js';
-declare class VertexCache {
-    private vertices;
-    private hasUpdated;
-    constructor();
-    setCache(vertices: number[]): void;
-    getCache(): number[];
-    updated(): void;
-    shouldUpdate(): boolean;
-    getVertexCount(): number;
-}
-declare class Vertex {
-    private readonly pos;
-    private readonly color;
-    private readonly is3d;
-    private readonly uv;
-    constructor(x?: number, y?: number, z?: number, color?: Color, is3dPoint?: boolean, uv?: Vector2);
-    getPos(): Vector3;
-    getColor(): Color | null;
-    toBuffer(defaultColor: Color): number[];
-}
-export declare abstract class SimulationElement {
-    private pos;
-    private color;
-    camera: Camera | null;
-    vertexCache: VertexCache;
-    constructor(pos: Vector3, color?: Color);
-    setPos(pos: Vector3): void;
-    getPos(): Vector3;
-    setCamera(camera: Camera): void;
-    fill(newColor: Color, t?: number, f?: LerpFunc): Promise<void>;
-    getColor(): Color;
-    move(amount: Vector3, t?: number, f?: LerpFunc): Promise<void>;
-    moveTo(pos: Vector3, t?: number, f?: LerpFunc): Promise<void>;
-    abstract getBuffer(camera: Camera, force: boolean): number[];
-}
-export declare class Plane extends SimulationElement {
-    private points;
-    private rotation;
-    constructor(pos: Vector3, points: Vertex[], rotation?: Vector3, color?: Color);
-    setPoints(newPoints: Vertex[]): void;
-    rotate(amount: Vector3, t?: number, f?: LerpFunc): Promise<void>;
-    rotateTo(angle: Vector3, t?: number, f?: LerpFunc): Promise<void>;
-    getBuffer(_: Camera, force: boolean): number[];
-}
-export declare class Square extends SimulationElement {
-    private width;
-    private height;
-    private rotation;
-    private vertexColors;
-    /**
-     * @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);
-    scaleWidth(amount: number, t?: number, f?: LerpFunc): Promise<void>;
-    scaleHeight(amount: number, t?: number, f?: LerpFunc): Promise<void>;
-    scale(amount: number, t?: number, f?: LerpFunc): Promise<void>;
-    setWidth(num: number, t?: number, f?: LerpFunc): Promise<void>;
-    setHeight(num: number, t?: number, f?: LerpFunc): Promise<void>;
-    rotate(rotation: number, t?: number, f?: LerpFunc): Promise<void>;
-    setRotation(newRotation: number, t?: number, f?: LerpFunc): Promise<void>;
-    getBuffer(camera: Camera, force: boolean): number[];
-}
-export declare class Circle extends SimulationElement {
-    private radius;
-    private detail;
-    constructor(pos: Vector2, radius: number, color?: Color, detail?: number);
-    setRadius(num: number, t?: number, f?: LerpFunc): Promise<void>;
-    scale(amount: number, t?: number, f?: LerpFunc): Promise<void>;
-    getBuffer(camera: Camera, force: boolean): number[];
-}
-export declare class Polygon extends SimulationElement {
-    private points;
-    private rotation;
-    constructor(pos: Vector3, points: Vector2[], color?: Color);
-    rotate(amount: number, t?: number, f?: LerpFunc): Promise<void>;
-    rotateTo(num: number, t?: number, f?: LerpFunc): Promise<void>;
-    setPoints(newPoints: Vector3[], t?: number, f?: LerpFunc): Promise<void>;
-    getBuffer(): never[];
-}
-export declare function vector3(x?: number, y?: number, z?: number): Vector3;
-export declare function vector2(x?: number, y?: number): Vector2;
-export declare function vec3fromVec2(vec: Vector2): Vector3;
-export declare function randomInt(range: number, min?: number): number;
-export declare function randomColor(a?: number): Color;
-export declare function vertex(x?: number, y?: number, z?: number, color?: Color): Vertex;
-export declare function color(r?: number, g?: number, b?: number, a?: number): Color;
-export declare function colorf(val: number, a?: number): Color;
-export {};

package/types/index.d.ts

@@ -1,3 +0,0 @@
-export * from './simulation.js';
-export * from './graphics.js';
-export * from './types.js';

package/types/types.d.ts

@@ -1,5 +0,0 @@
-import { Color } from './simulation.js';
-export type Vector3 = Float32Array & [number, number, number];
-export type Vector2 = Float32Array & [number, number];
-export type LerpFunc = (n: number) => number;
-export type VertexColorMap = Record<0 | 1 | 2 | 3, Color>;

package/types/utils.d.ts

@@ -1,18 +0,0 @@
-import { SimulationElement } from './graphics.js';
-import { Vector3 } from './types.js';
-import { Camera } from './simulation.js';
-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) => any;
-export declare const applyElementToScene: (scene: SimulationElement[], camera: Camera | null, 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 {};