simulationjsv2 0.1.4 → 0.1.6

package/dist/graphics.d.ts

@@ -1,25 +1,6 @@
-import { Camera, Color } from './simulation.js';
+import { Camera } 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[];
-}
+import { Vertex, VertexCache, Color } from './utils.js';
 export declare abstract class SimulationElement {
     private pos;
     private color;
@@ -38,7 +19,7 @@ export declare abstract class SimulationElement {
 export declare class Plane extends SimulationElement {
     private points;
     private rotation;
-    constructor(pos: Vector3, points: Vertex[], rotation?: Vector3, color?: Color);
+    constructor(pos: Vector3, points: Vertex[], color?: Color, rotation?: Vector3);
     setPoints(newPoints: Vertex[]): void;
     rotate(amount: Vector3, t?: number, f?: LerpFunc): Promise<void>;
     rotateTo(angle: Vector3, t?: number, f?: LerpFunc): Promise<void>;
@@ -72,20 +53,38 @@ export declare class Circle extends SimulationElement {
     getBuffer(camera: Camera, force: boolean): number[];
 }
 export declare class Polygon extends SimulationElement {
-    private points;
+    private vertices;
     private rotation;
-    constructor(pos: Vector3, points: Vector2[], color?: Color);
+    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(newPoints: Vector3[], t?: number, f?: LerpFunc): Promise<void>;
-    getBuffer(): never[];
+    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[];
+}
+export declare class CubicBezierCurve2d extends BezierCurve2d {
+    constructor(points: [Vector2, Vector2, Vector2, Vector2]);
+}
+export declare class SplinePoint2d {
+    private start;
+    private end;
+    private controls;
+    constructor(start: Vertex | null, end: Vertex, controls: [Vector2, Vector2]);
+    getStart(): Vertex | null;
+    getEnd(): Vertex;
+    getVectorArray(prevEnd?: Vector2 | null): readonly [Vector2, Vector2, Vector2, Vector2];
+}
+export declare class Spline2d extends SimulationElement {
+    private curves;
+    private width;
+    private detail;
+    constructor(pos: Vector2, points: SplinePoint2d[], width?: number, color?: Color, detail?: number);
+    getBuffer(camera: Camera, force: boolean): number[];
 }
-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/dist/graphics.js

@@ -1,51 +1,5 @@
-import { vec3, quat, mat4, vec2 } 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;
-    }
-}
-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;
-    }
-    toBuffer(defaultColor) {
-        if (this.is3d)
-            return vertexBuffer3d(this.pos, this.color || defaultColor, this.uv);
-        else
-            return vertexBuffer2d(this.pos, this.color || defaultColor, this.uv);
-    }
-}
+import { vec3, quat, mat4, vec2, vec4 } from 'wgpu-matrix';
+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;
@@ -119,7 +73,7 @@ export class SimulationElement {
 export class Plane extends SimulationElement {
     points;
     rotation;
-    constructor(pos, points, rotation = vector3(), color) {
+    constructor(pos, points, color, rotation = vector3()) {
         super(pos, color);
         this.points = points;
         this.rotation = rotation;
@@ -155,8 +109,8 @@ export class Plane extends SimulationElement {
     }
     getBuffer(_, force) {
         if (this.vertexCache.shouldUpdate() || force) {
-            const resBuffer = [];
-            const triangles = generateTriangles(this.points).flat();
+            let resBuffer = [];
+            const triangles = lossyTriangulate(this.points).flat();
             triangles.forEach((verticy) => {
                 const rot = quat.create();
                 quat.fromEuler(...this.rotation, 'xyz', rot);
@@ -167,7 +121,7 @@ export class Plane extends SimulationElement {
                 vec3.add(out, this.getPos(), out);
                 let vertexColor = verticy.getColor();
                 vertexColor = vertexColor ? vertexColor : this.getColor();
-                resBuffer.push(...vertexBuffer3d(out, vertexColor));
+                resBuffer = resBuffer.concat(vertexBuffer3d(out[0], out[1], out[2], vertexColor));
             });
             this.vertexCache.setCache(resBuffer);
             return resBuffer;
@@ -185,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;
@@ -277,25 +231,25 @@ export class Square extends SimulationElement {
         }, t, f);
     }
     getBuffer(camera, force) {
-        const resBuffer = [];
-        const vertexOrder = [0, 1, 2, 0, 2, 3];
         if (this.vertexCache.shouldUpdate() || force) {
+            let resBuffer = [];
+            const vertexOrder = [0, 1, 2, 0, 2, 3];
             const rotationMat = mat4.identity();
             mat4.rotateZ(rotationMat, this.rotation, rotationMat);
             const points = this.points.map((vec) => {
-                vec2.transformMat4(vec, rotationMat, vec);
                 const pos = vector2();
-                vec2.clone(this.getPos(), pos);
+                vec2.add(vec, pos, pos);
+                vec2.transformMat4(vec, rotationMat, pos);
+                vec2.add(vec, this.getPos(), pos);
                 pos[1] = camera.getScreenSize()[1] - pos[1];
                 pos[0] += this.width / 2;
                 pos[1] -= this.height / 2;
-                vec2.add(vec, pos, vec);
-                return vec;
+                return pos;
             });
             vertexOrder.forEach((vertex) => {
                 let vertexColor = this.vertexColors[vertex];
                 vertexColor = vertexColor ? vertexColor : this.getColor();
-                resBuffer.push(...vertexBuffer2d(vec3fromVec2(points[vertex]), vertexColor));
+                resBuffer = resBuffer.concat(vertexBuffer2d(points[vertex][0], points[vertex][1], vertexColor));
             });
             this.vertexCache.setCache(resBuffer);
             return resBuffer;
@@ -307,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;
     }
@@ -346,7 +300,7 @@ export class Circle extends SimulationElement {
                 const screenSize = camera.getScreenSize();
                 points.push(new Vertex(vec[0], screenSize[1] - vec[1], vec[2], this.getColor(), false));
             }
-            const vertices = generateTriangles(points).reduce((acc, curr) => {
+            const vertices = lossyTriangulate(points).reduce((acc, curr) => {
                 curr.forEach((vertex) => acc.push(...vertex.toBuffer(this.getColor())));
                 return acc;
             }, []);
@@ -357,15 +311,15 @@ export class Circle extends SimulationElement {
     }
 }
 export class Polygon extends SimulationElement {
-    points;
+    vertices;
     rotation = 0;
-    /*
-     * points adjusted for device pixel ratio
-     */
-    constructor(pos, points, color) {
+    constructor(pos, vertices, color) {
         super(pos, color);
-        this.points = points.map((point) => {
-            return new Vertex(point[0], point[1], 0, this.getColor(), false);
+        this.vertices = vertices.map((vertex) => {
+            const newVertex = vertex.clone();
+            newVertex.setZ(0);
+            newVertex.setIs3d(false);
+            return vertex;
         });
     }
     rotate(amount, t = 0, f) {
@@ -386,123 +340,222 @@ export class Polygon extends SimulationElement {
             this.rotation = num;
         }, t, f);
     }
-    setPoints(newPoints, t = 0, f) {
-        const points = newPoints.map((point) => {
-            const vec = vector3(...point);
-            return vec;
+    getVertices() {
+        return this.vertices;
+    }
+    setVertices(newVertices, t = 0, f) {
+        const vertices = newVertices.map((vert) => {
+            const newVertex = vert.clone();
+            newVertex.setZ(0);
+            newVertex.setIs3d(false);
+            return newVertex;
         });
-        const lastPoint = this.points.length > 0 ? this.points[this.points.length - 1] : vec3.create();
-        if (points.length > this.points.length) {
-            while (points.length > this.points.length) {
-                this.points.push(new Vertex(lastPoint[0], lastPoint[1], 0, this.getColor(), false));
+        const lastVert = this.vertices.length > 0 ? this.vertices[this.vertices.length - 1] : vertex(0, 0, 0, color(), false);
+        if (vertices.length > this.vertices.length) {
+            while (vertices.length > this.vertices.length) {
+                const lastPos = lastVert.getPos();
+                this.vertices.push(new Vertex(lastPos[0], lastPos[1], 0, lastVert.getColor() || this.getColor(), false));
             }
         }
-        const initial = this.points.map((p) => vector3(...p.getPos()));
-        const changes = [
-            ...points.map((p, i) => {
-                const vec = vec3.create();
-                vec3.sub(vec, p, this.points[i]);
-                return vec;
+        const initialPositions = this.vertices.map((p) => cloneBuf(p.getPos()));
+        const posChanges = [
+            ...vertices.map((vert, i) => {
+                const vec = vector3();
+                vec3.sub(vert.getPos(), this.vertices[i].getPos(), vec);
+                return cloneBuf(vec);
             }),
-            ...this.points.slice(points.length, this.points.length).map((point) => {
-                const vec = vector3(...points[points.length - 1]) || vec3.create();
-                vec3.sub(vec, vec, point);
-                return vec;
-            })
+            ...(this.vertices.length > vertices.length
+                ? this.vertices.slice(vertices.length, this.vertices.length).map((vert) => {
+                    const vec = cloneBuf(vertices[vertices.length - 1].getPos());
+                    vec3.sub(vec, vert.getPos(), vec);
+                    return vec;
+                })
+                : [])
+        ];
+        const initialColors = this.vertices.map((vert) => (vert.getColor() || this.getColor()).toVec4());
+        const colorChanges = [
+            ...vertices.map((vert, i) => {
+                const diff = (vert.getColor() || this.getColor()).diff(this.vertices[i].getColor() || this.getColor());
+                return diff.toVec4();
+            }),
+            ...(this.vertices.length > vertices.length
+                ? this.vertices.slice(vertices.length, this.vertices.length).map((vert) => {
+                    const toColor = vertices[vertices.length - 1].getColor();
+                    return (toColor || this.getColor()).diff(vert.getColor() || this.getColor()).toVec4();
+                })
+                : [])
         ];
         return transitionValues((p) => {
-            this.points = this.points.map((point, i) => {
-                const change = vector3(...changes[i]);
-                vec3.scale(change, change, p);
-                vec3.add(point, point, change);
-                return point;
+            this.vertices.forEach((vert, i) => {
+                const posChange = cloneBuf(posChanges[i]);
+                const colorChange = cloneBuf(colorChanges[i]);
+                vec3.scale(posChange, p, posChange);
+                vec3.add(vert.getPos(), posChange, posChange);
+                vec4.scale(colorChange, p, colorChange);
+                vec4.add((vert.getColor() || this.getColor()).toVec4(), colorChange, colorChange);
+                vert.setPos(posChange);
+                vert.setColor(colorFromVector4(colorChange));
             });
             this.vertexCache.updated();
         }, () => {
-            this.points = initial.map((p, i) => {
-                const vec = vec3.create();
-                vec3.add(vec, p, changes[i]);
-                return vec;
+            this.vertices.forEach((vert, i) => {
+                const initPos = initialPositions[i];
+                const initColor = initialColors[i];
+                vec3.add(initPos, posChanges[i], initPos);
+                vec4.add(initColor, colorChanges[i], initColor);
+                vert.setPos(initPos);
+                vert.setColor(colorFromVector4(initColor));
             });
-            this.points.splice(points.length, this.points.length);
+            this.vertices.splice(vertices.length, this.vertices.length);
             this.vertexCache.updated();
         }, t, f);
     }
-    getBuffer() {
-        // let triangles: Triangles = [];
-        // if (this.triangleCache.shouldUpdate()) {
-        //   let newPoints: vec3[] = this.points.map((vec) => {
-        //     const newPoint = vec3.create();
-        //     vec3.add(newPoint, vec, this.getPos());
-        //     return newPoint;
-        //   });
-        //   triangles = generateTriangles(newPoints);
-        //   this.triangleCache.setCache(triangles);
-        // } else {
-        //   triangles = this.triangleCache.getCache();
-        // }
-        // return trianglesAndColorToBuffer(triangles, this.getColor());
-        return [];
+    getBuffer(camera, force) {
+        if (this.vertexCache.shouldUpdate() || force) {
+            let resBuffer = [];
+            const rotationMat = mat4.identity();
+            mat4.rotateZ(rotationMat, this.rotation, rotationMat);
+            lossyTriangulate(this.vertices)
+                .flat()
+                .forEach((vert) => {
+                const pos = vector3();
+                vec3.add(vert.getPos(), pos, pos);
+                vec3.transformMat4(pos, rotationMat, pos);
+                vec3.add(this.getPos(), pos, pos);
+                pos[1] = camera.getScreenSize()[1] - pos[1];
+                resBuffer = resBuffer.concat(vertexBuffer2d(pos[0], pos[1], vert.getColor() || this.getColor()));
+            });
+            this.vertexCache.setCache(resBuffer);
+            return resBuffer;
+        }
+        return this.vertexCache.getCache();
     }
 }
-function generateTriangles(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;
     }
-    return res;
-}
-function vertexBuffer3d(point, color, uv = vector2()) {
-    return [...point, 1, ...color.toBuffer(), ...uv, 1];
-}
-function vertexBuffer2d(point, color, uv = vector2()) {
-    return [...point, 1, ...color.toBuffer(), ...uv, 0];
-}
-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);
-}
-function vec3ToPixelRatio(vec) {
-    vec3.mul(vec, vector3(devicePixelRatio, devicePixelRatio, devicePixelRatio), vec);
-}
-export function vec3fromVec2(vec) {
-    return vector3(vec[0], vec[1]);
-}
-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) {
-    return new Vertex(x, y, z, color);
+export class CubicBezierCurve2d extends BezierCurve2d {
+    constructor(points) {
+        super(points);
+    }
 }
-export function color(r, g, b, a) {
-    return new Color(r, g, b, a);
+export class SplinePoint2d {
+    start;
+    end;
+    controls;
+    constructor(start, end, controls) {
+        this.start = start;
+        this.end = end;
+        this.controls = controls;
+    }
+    getStart() {
+        return this.start;
+    }
+    getEnd() {
+        return this.end;
+    }
+    getVectorArray(prevEnd) {
+        const firstControl = cloneBuf(this.controls[0]);
+        if (prevEnd) {
+            vec2.add(firstControl, prevEnd, firstControl);
+        }
+        else if (!this.start) {
+            prevEnd = vector2();
+        }
+        return [
+            this.start ? vector2FromVector3(this.start.getPos()) : prevEnd,
+            firstControl,
+            this.controls[1],
+            vector2FromVector3(this.end.getPos())
+        ];
+    }
 }
-export function colorf(val, a) {
-    return color(val, val, val, a);
+export class Spline2d extends SimulationElement {
+    curves;
+    width;
+    detail;
+    constructor(pos, points, width = 2, color, detail = 40) {
+        super(vector3FromVector2(pos), color);
+        this.curves = [];
+        this.width = width * devicePixelRatio;
+        this.detail = detail;
+        for (let i = 0; i < points.length; i++) {
+            const bezierPoints = points[i].getVectorArray(i > 0 ? vector2FromVector3(points[i - 1].getEnd().getPos()) : null);
+            const curve = new CubicBezierCurve2d(bezierPoints);
+            this.curves.push(curve);
+        }
+    }
+    getBuffer(camera, force) {
+        if (this.vertexCache.shouldUpdate() || force) {
+            const screenSize = camera.getScreenSize();
+            const step = 1 / this.detail;
+            let verticesTop = [];
+            const verticesBottom = [];
+            for (let i = 0; i < this.curves.length; i++) {
+                for (let j = 0; j < this.detail + 1; j++) {
+                    const [point, slope] = this.curves[i].interpolateSlope(step * j);
+                    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);
+                }
+            }
+            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 } 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 } 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,28 +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];
-    toObject(): {
-        r: number;
-        g: number;
-        b: number;
-        a: number;
-    };
-}
-/**
- * @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 } 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,77 +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];
-    }
-    toObject() {
-        return {
-            r: this.r / 255,
-            g: this.g / 255,
-            b: this.b / 255,
-            a: this.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,5 @@
-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];
 export type LerpFunc = (n: 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,31 @@ 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): 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,132 @@ 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) {
+    vec2.scale(control1, devicePixelRatio, control1);
+    vec2.scale(control2, devicePixelRatio, control2);
+    vec2.scale(end.getPos(), devicePixelRatio, end.getPos());
+    vec2.add(end.getPos(), control2, control2);
+    return new SplinePoint2d(null, end, [control1, control2]);
+}

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.4",
+  "version": "0.1.6",
   "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 {};