simulationjsv2 0.1.9 → 0.2.0

package/dist/graphics.d.ts

@@ -1,19 +1,19 @@
 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 {
+export declare abstract class SimulationElement<T extends Vector2 | Vector3 = Vector3> {
     private pos;
     private color;
     camera: Camera | null;
     vertexCache: VertexCache;
-    constructor(pos: Vector3, color?: Color);
-    setPos(pos: Vector3): void;
-    getPos(): Vector3;
+    constructor(pos: T, color?: Color);
+    setPos(pos: T): void;
+    getPos(): T;
     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>;
+    move(amount: T, t?: number, f?: LerpFunc): Promise<void>;
+    moveTo(pos: T, t?: number, f?: LerpFunc): Promise<void>;
     abstract getBuffer(camera: Camera, force: boolean): number[];
 }
 export declare class Plane extends SimulationElement {
@@ -25,7 +25,7 @@ export declare class Plane extends SimulationElement {
     rotateTo(angle: Vector3, t?: number, f?: LerpFunc): Promise<void>;
     getBuffer(_: Camera, force: boolean): number[];
 }
-export declare class Square extends SimulationElement {
+export declare class Square extends SimulationElement<Vector2> {
     private width;
     private height;
     private rotation;
@@ -44,7 +44,7 @@ export declare class Square extends SimulationElement {
     setRotation(newRotation: number, t?: number, f?: LerpFunc): Promise<void>;
     getBuffer(camera: Camera, force: boolean): number[];
 }
-export declare class Circle extends SimulationElement {
+export declare class Circle extends SimulationElement<Vector2> {
     private radius;
     private detail;
     constructor(pos: Vector2, radius: number, color?: Color, detail?: number);
@@ -52,16 +52,56 @@ export declare class Circle extends SimulationElement {
     scale(amount: number, t?: number, f?: LerpFunc): Promise<void>;
     getBuffer(camera: Camera, force: boolean): number[];
 }
-export declare class Polygon extends SimulationElement {
+export declare class Polygon extends SimulationElement<Vector2> {
     private vertices;
     private rotation;
-    constructor(pos: Vector3, vertices: Vertex[], color?: Color);
+    constructor(pos: Vector2, vertices: Vertex[], color?: Color);
     rotate(amount: number, t?: number, f?: LerpFunc): Promise<void>;
     rotateTo(num: number, 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 Line3d extends SimulationElement {
+    private to;
+    private toColor;
+    private thickness;
+    constructor(pos: Vertex, to: Vertex, thickness: number);
+    setStart(pos: Vector3, t?: number, f?: LerpFunc): Promise<void>;
+    setEnd(pos: Vector3, t?: number, f?: LerpFunc): Promise<void>;
+    getBuffer(_: Camera, force: boolean): number[];
+}
+export declare class Line2d extends SimulationElement {
+    private to;
+    private toColor;
+    private thickness;
+    constructor(from: Vertex, to: Vertex, thickness?: number);
+    setEndColor(newColor: Color, t?: number, f?: LerpFunc): Promise<void>;
+    setStart(pos: Vector2, t?: number, f?: LerpFunc): Promise<void>;
+    setEnd(pos: Vector2, t?: number, f?: LerpFunc): Promise<void>;
+    getBuffer(camera: Camera, force: boolean): number[];
+}
+export declare class Cube extends SimulationElement {
+    private vertices;
+    private rotation;
+    private width;
+    private height;
+    private depth;
+    private wireframe;
+    private wireframeLines;
+    private static readonly wireframeOrder;
+    constructor(pos: Vector3, width: number, height: number, depth: number, color?: Color, rotation?: Vector3);
+    private computeVertices;
+    private shiftWireframeLines;
+    setWireframe(wireframe: boolean): void;
+    rotate(amount: Vector3, t?: number, f?: LerpFunc): Promise<void>;
+    setRotation(rot: Vector3, t?: number, f?: LerpFunc): Promise<void>;
+    setWidth(width: number, t?: number, f?: LerpFunc): Promise<void>;
+    setHeight(height: number, t?: number, f?: LerpFunc): Promise<void>;
+    setDepth(depth: 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 BezierCurve2d {
     private points;
     constructor(points: Vector2[]);
@@ -73,9 +113,9 @@ export declare class BezierCurve2d {
 export declare class CubicBezierCurve2d extends BezierCurve2d {
     private detail;
     private colors;
-    constructor(points: [Vector2, Vector2, Vector2, Vector2], detail?: number, colors?: Color[]);
+    constructor(points: [Vector2, Vector2, Vector2, Vector2], detail?: number, colors?: (Color | null)[]);
     getDetail(): number | undefined;
-    getColors(): Color[];
+    getColors(): (Color | null)[];
 }
 export declare class SplinePoint2d {
     private start;
@@ -90,16 +130,16 @@ export declare class SplinePoint2d {
     getControls(): readonly [Vector2 | null, Vector2];
     getRawControls(): [Vector2, Vector2];
     getDetail(): number | undefined;
-    getColors(prevColor?: Color): Color[];
+    getColors(prevColor?: Color | null): (Color | null)[];
     getVectorArray(prevEnd: Vector2 | null, prevControl: Vector2 | null): readonly [Vector2, Vector2, Vector2, Vector2];
 }
 export declare class Spline2d extends SimulationElement {
     private curves;
-    private width;
+    private thickness;
     private detail;
     private interpolateLimit;
     private distance;
-    constructor(pos: Vertex, points: SplinePoint2d[], width?: number, detail?: number);
+    constructor(pos: Vertex, points: SplinePoint2d[], thickness?: number, detail?: number);
     setInterpolateLimit(limit: number, t?: number, f?: LerpFunc): Promise<void>;
     getBuffer(camera: Camera, force: boolean): number[];
 }

package/dist/graphics.js

@@ -7,7 +7,7 @@ export class SimulationElement {
     vertexCache;
     constructor(pos, color = new Color()) {
         this.pos = pos;
-        vec3ToPixelRatio(this.pos);
+        vec3ToPixelRatio(vector3(...this.pos));
         this.color = color;
         this.vertexCache = new VertexCache();
         this.camera = null;
@@ -22,16 +22,13 @@ export class SimulationElement {
         this.camera = camera;
     }
     fill(newColor, t = 0, f) {
-        const diffR = newColor.r - this.color.r;
-        const diffG = newColor.g - this.color.g;
-        const diffB = newColor.b - this.color.b;
-        const diffA = newColor.a - this.color.a;
+        const diff = newColor.diff(this.color);
         const finalColor = newColor.clone();
         return transitionValues((p) => {
-            this.color.r += diffR * p;
-            this.color.g += diffG * p;
-            this.color.b += diffB * p;
-            this.color.a += diffA * p;
+            this.color.r += diff.r * p;
+            this.color.g += diff.g * p;
+            this.color.b += diff.b * p;
+            this.color.a += diff.a * p;
             this.vertexCache.updated();
         }, () => {
             this.color = finalColor;
@@ -42,13 +39,12 @@ export class SimulationElement {
         return this.color;
     }
     move(amount, t = 0, f) {
-        const finalPos = vec3.create();
+        const finalPos = amount.length === 3 ? vector3() : vector2();
         vec3.add(finalPos, this.pos, amount);
         return transitionValues((p) => {
-            const x = amount[0] * p;
-            const y = amount[1] * p;
-            const z = amount[2] * p;
-            vec3.add(this.pos, this.pos, vector3(x, y, z));
+            for (let i = 0; i < this.pos.length; i++) {
+                this.pos[i] += amount[i] * p;
+            }
             this.vertexCache.updated();
         }, () => {
             this.pos = finalPos;
@@ -56,16 +52,17 @@ export class SimulationElement {
         }, t, f);
     }
     moveTo(pos, t = 0, f) {
-        const diff = vec3.create();
+        const diff = pos.length === 3 ? vector3() : vector2();
         vec3.sub(diff, pos, this.pos);
         return transitionValues((p) => {
-            const x = diff[0] * p;
-            const y = diff[1] * p;
-            const z = diff[2] * p;
-            vec3.add(this.pos, this.pos, vector3(x, y, z));
+            for (let i = 0; i < this.pos.length; i++) {
+                this.pos[i] += diff[i] * p;
+            }
             this.vertexCache.updated();
         }, () => {
-            this.pos = pos;
+            for (let i = 0; i < this.pos.length; i++) {
+                this.pos[i] = pos[i];
+            }
             this.vertexCache.updated();
         }, t, f);
     }
@@ -139,7 +136,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(vector3FromVector2(pos), color);
+        super(pos, color);
         this.width = width * devicePixelRatio;
         this.height = height * devicePixelRatio;
         this.rotation = rotation || 0;
@@ -261,7 +258,7 @@ export class Circle extends SimulationElement {
     radius;
     detail = 100;
     constructor(pos, radius, color, detail = 50) {
-        super(vector3FromVector2(pos), color);
+        super(pos, color);
         this.radius = radius * devicePixelRatio;
         this.detail = detail;
     }
@@ -431,6 +428,308 @@ export class Polygon extends SimulationElement {
         return this.vertexCache.getCache();
     }
 }
+export class Line3d extends SimulationElement {
+    to;
+    toColor;
+    thickness;
+    constructor(pos, to, thickness) {
+        super(pos.getPos(), to.getColor() || undefined);
+        this.thickness = thickness;
+        this.toColor = to.getColor() || this.getColor();
+        this.to = to.getPos();
+        vec3.scale(this.to, devicePixelRatio, this.to);
+        vec3.sub(this.to, this.getPos(), this.to);
+    }
+    setStart(pos, t = 0, f) {
+        return this.moveTo(pos, t, f);
+    }
+    setEnd(pos, t = 0, f) {
+        const diff = vector3();
+        vec3.sub(pos, this.to, diff);
+        return transitionValues((p) => {
+            this.to[0] += diff[0] * p;
+            this.to[1] += diff[1] * p;
+            this.to[2] += diff[2] * p;
+            this.vertexCache.updated();
+        }, () => {
+            this.to[0] = pos[0];
+            this.to[1] = pos[1];
+            this.to[2] = pos[2];
+            this.vertexCache.updated();
+        }, t, f);
+    }
+    getBuffer(_, force) {
+        if (this.vertexCache.shouldUpdate() || force) {
+            const normal = vector2(-this.to[1], this.to[0]);
+            vec2.normalize(normal, normal);
+            vec2.scale(normal, this.thickness / 2, normal);
+            const pos = this.getPos();
+            const resBuffer = [
+                ...vertexBuffer3d(pos[0] + normal[0], pos[1] + normal[1], pos[2], this.getColor()),
+                ...vertexBuffer3d(pos[0] - normal[0], pos[1] - normal[1], pos[2], this.getColor()),
+                ...vertexBuffer3d(pos[0] + this.to[0] + normal[0], pos[1] + this.to[1] + normal[1], pos[2] + this.to[2], this.toColor || this.getColor()),
+                ...vertexBuffer3d(pos[0] - normal[0], pos[1] - normal[1], pos[2], this.getColor()),
+                ...vertexBuffer3d(pos[0] + this.to[0] + normal[0], pos[1] + this.to[1] + normal[1], pos[2] + this.to[2], this.toColor || this.getColor()),
+                ...vertexBuffer3d(pos[0] + this.to[0] - normal[0], pos[1] + this.to[1] - normal[1], pos[2] + this.to[2], this.toColor || this.getColor())
+            ];
+            this.vertexCache.setCache(resBuffer);
+            return resBuffer;
+        }
+        return this.vertexCache.getCache();
+    }
+}
+export class Line2d extends SimulationElement {
+    to;
+    toColor;
+    thickness;
+    constructor(from, to, thickness = 1) {
+        super(from.getPos(), from.getColor() || undefined);
+        this.thickness = thickness * devicePixelRatio;
+        this.toColor = to.getColor();
+        this.to = vector2FromVector3(to.getPos());
+        vec2.scale(this.to, devicePixelRatio, this.to);
+        vec2.sub(this.to, this.getPos(), this.to);
+    }
+    setEndColor(newColor, t = 0, f) {
+        if (!this.toColor)
+            this.toColor = this.getColor();
+        const diff = newColor.diff(this.toColor);
+        const finalColor = newColor.clone();
+        return transitionValues((p) => {
+            this.toColor.r += diff.r * p;
+            this.toColor.g += diff.g * p;
+            this.toColor.b += diff.b * p;
+            this.toColor.a += diff.a * p;
+            this.vertexCache.updated();
+        }, () => {
+            this.toColor = finalColor;
+            this.vertexCache.updated();
+        }, t, f);
+    }
+    setStart(pos, t = 0, f) {
+        return this.moveTo(vector3FromVector2(pos), t, f);
+    }
+    setEnd(pos, t = 0, f) {
+        const diff = vector3();
+        vec2.sub(pos, this.to, diff);
+        return transitionValues((p) => {
+            this.to[0] += diff[0] * p;
+            this.to[1] += diff[1] * p;
+            this.vertexCache.updated();
+        }, () => {
+            this.to[0] = pos[0];
+            this.to[1] = pos[1];
+            this.vertexCache.updated();
+        }, t, f);
+    }
+    getBuffer(camera, force) {
+        if (this.vertexCache.shouldUpdate() || force) {
+            const normal = vector2(-this.to[1], this.to[0]);
+            vec2.normalize(normal, normal);
+            vec2.scale(normal, this.thickness / 2, normal);
+            const screenSize = camera.getScreenSize();
+            const pos = this.getPos();
+            const resBuffer = [
+                ...vertexBuffer2d(pos[0] + normal[0], screenSize[1] - pos[1] + normal[1], this.getColor()),
+                ...vertexBuffer2d(pos[0] - normal[0], screenSize[1] - pos[1] - normal[1], this.getColor()),
+                ...vertexBuffer2d(pos[0] + this.to[0] + normal[0], screenSize[1] - pos[1] + this.to[1] + normal[1], this.toColor || this.getColor()),
+                ...vertexBuffer2d(pos[0] - normal[0], screenSize[1] - pos[1] - normal[1], this.getColor()),
+                ...vertexBuffer2d(pos[0] + this.to[0] + normal[0], screenSize[1] - pos[1] + this.to[1] + normal[1], this.toColor || this.getColor()),
+                ...vertexBuffer2d(pos[0] + this.to[0] - normal[0], screenSize[1] - pos[1] + this.to[1] - normal[1], this.toColor || this.getColor())
+            ];
+            this.vertexCache.setCache(resBuffer);
+            return resBuffer;
+        }
+        return this.vertexCache.getCache();
+    }
+}
+export class Cube extends SimulationElement {
+    vertices;
+    rotation;
+    width;
+    height;
+    depth;
+    wireframe;
+    wireframeLines;
+    static wireframeOrder = [
+        [0, 1],
+        [1, 2],
+        [2, 3],
+        [3, 0],
+        [4, 5],
+        [5, 6],
+        [6, 7],
+        [7, 4],
+        [0, 4],
+        [3, 7],
+        [1, 5],
+        [2, 6]
+    ];
+    constructor(pos, width, height, depth, color, rotation) {
+        super(pos, color);
+        this.width = width * devicePixelRatio;
+        this.height = height * devicePixelRatio;
+        this.depth = depth * devicePixelRatio;
+        this.rotation = rotation || vector3();
+        this.wireframe = false;
+        this.wireframeLines = [];
+        const numWireframeLines = 12;
+        const lineThickness = 0.025;
+        for (let i = 0; i < numWireframeLines; i++) {
+            this.wireframeLines.push(new Line3d(vertex(), vertex(), lineThickness));
+        }
+        this.vertices = [];
+        this.computeVertices();
+        this.shiftWireframeLines();
+    }
+    computeVertices() {
+        console.log(this.width, this.height);
+        this.vertices = [
+            // front face
+            vector3(-this.width / 2, -this.height / 2, this.depth / 2),
+            vector3(this.width / 2, -this.height / 2, this.depth / 2),
+            vector3(this.width / 2, this.height / 2, this.depth / 2),
+            vector3(-this.width / 2, this.height / 2, this.depth / 2),
+            // back face
+            vector3(-this.width / 2, -this.height / 2, -this.depth / 2),
+            vector3(this.width / 2, -this.height / 2, -this.depth / 2),
+            vector3(this.width / 2, this.height / 2, -this.depth / 2),
+            vector3(-this.width / 2, this.height / 2, -this.depth / 2)
+        ];
+    }
+    shiftWireframeLines() {
+        let rotMatrix = mat4.identity();
+        mat4.rotateZ(rotMatrix, this.rotation[2], rotMatrix);
+        mat4.rotateY(rotMatrix, this.rotation[1], rotMatrix);
+        mat4.rotateX(rotMatrix, this.rotation[0], rotMatrix);
+        const pos = this.getPos();
+        Cube.wireframeOrder.forEach((lineVertices, index) => {
+            const line = this.wireframeLines[index];
+            const start = cloneBuf(this.vertices[lineVertices[0]]);
+            const endPoint = cloneBuf(this.vertices[lineVertices[1]]);
+            vec3.sub(endPoint, start, endPoint);
+            vec3.transformMat4(endPoint, rotMatrix, endPoint);
+            vec3.transformMat4(start, rotMatrix, start);
+            vec3.add(start, pos, start);
+            line.setStart(start);
+            line.setEnd(endPoint);
+        });
+    }
+    setWireframe(wireframe) {
+        this.wireframe = wireframe;
+    }
+    rotate(amount, t = 0, f) {
+        const finalRotation = cloneBuf(this.rotation);
+        vec3.add(finalRotation, amount, finalRotation);
+        return transitionValues((p) => {
+            this.rotation[0] += amount[0] * p;
+            this.rotation[1] += amount[1] * p;
+            this.rotation[2] += amount[2] * p;
+            this.vertexCache.updated();
+        }, () => {
+            this.rotation = finalRotation;
+            this.vertexCache.updated();
+        }, t, f);
+    }
+    setRotation(rot, t = 0, f) {
+        const diff = vector3();
+        vec3.sub(rot, this.rotation, diff);
+        return transitionValues((p) => {
+            this.rotation[0] += diff[0] * p;
+            this.rotation[1] += diff[1] * p;
+            this.rotation[2] += diff[2] * p;
+            this.vertexCache.updated();
+        }, () => {
+            this.rotation = rot;
+            this.vertexCache.updated();
+        }, t, f);
+    }
+    setWidth(width, t = 0, f) {
+        width *= devicePixelRatio;
+        const diff = width - this.width;
+        return transitionValues((p) => {
+            this.width += diff * p;
+            this.vertexCache.updated();
+        }, () => {
+            this.width = width;
+            this.vertexCache.updated();
+        }, t, f);
+    }
+    setHeight(height, t = 0, f) {
+        height *= devicePixelRatio;
+        const diff = height - this.width;
+        return transitionValues((p) => {
+            this.height += diff * p;
+            this.vertexCache.updated();
+        }, () => {
+            this.height = height;
+            this.vertexCache.updated();
+        }, t, f);
+    }
+    setDepth(depth, t = 0, f) {
+        depth *= devicePixelRatio;
+        const diff = depth - this.width;
+        return transitionValues((p) => {
+            this.depth += diff * p;
+            this.vertexCache.updated();
+        }, () => {
+            this.depth = depth;
+            this.vertexCache.updated();
+        }, t, f);
+    }
+    scale(amount, t = 0, f) {
+        const finalWidth = this.width * amount;
+        const finalHeight = this.height * amount;
+        const finalDepth = this.depth * amount;
+        const widthDiff = finalWidth - this.width;
+        const heightDiff = finalHeight - this.height;
+        const depthDiff = finalDepth - this.depth;
+        return transitionValues((p) => {
+            this.width += widthDiff * p;
+            this.height += heightDiff * p;
+            this.depth += depthDiff * p;
+            this.vertexCache.updated();
+        }, () => {
+            this.width = finalWidth;
+            this.height = finalHeight;
+            this.depth = finalDepth;
+            this.vertexCache.updated();
+        }, t, f);
+    }
+    getBuffer(camera, force) {
+        if (this.vertexCache.shouldUpdate() || force) {
+            this.computeVertices();
+            this.shiftWireframeLines();
+            const triangleOrder = [
+                0, 1, 2, 0, 2, 3,
+                4, 5, 6, 4, 6, 7,
+                0, 3, 7, 0, 7, 4,
+                0, 4, 5, 0, 5, 1,
+                1, 2, 6, 1, 5, 6,
+                2, 3, 7, 2, 6, 7
+            ];
+            let rotMatrix = mat4.identity();
+            mat4.rotateZ(rotMatrix, this.rotation[2], rotMatrix);
+            mat4.rotateY(rotMatrix, this.rotation[1], rotMatrix);
+            mat4.rotateX(rotMatrix, this.rotation[0], rotMatrix);
+            const pos = this.getPos();
+            let resBuffer = [];
+            triangleOrder.forEach((index) => {
+                const vertex = cloneBuf(this.vertices[index]);
+                vec3.transformMat4(vertex, rotMatrix, vertex);
+                resBuffer = resBuffer.concat(vertexBuffer3d(vertex[0] + pos[0], vertex[1] + pos[1], vertex[2] + pos[2], this.getColor()));
+            });
+            if (this.wireframe) {
+                this.wireframeLines.forEach((line) => {
+                    resBuffer = resBuffer.concat(line.getBuffer(camera, force));
+                });
+            }
+            this.vertexCache.setCache(resBuffer);
+            return resBuffer;
+        }
+        return this.vertexCache.getCache();
+    }
+}
 export class BezierCurve2d {
     points;
     constructor(points) {
@@ -524,14 +823,18 @@ export class SplinePoint2d {
         return this.detail;
     }
     getColors(prevColor) {
-        const colors = [];
-        if (prevColor)
-            colors.push(prevColor);
+        const colors = [null, null];
         if (this.start && this.start.getColor()) {
-            colors.push(this.start.getColor());
+            colors[0] = this.start.getColor();
         }
         if (this.end.getColor()) {
-            colors.push(this.end.getColor());
+            colors[1] = this.end.getColor();
+        }
+        if (prevColor) {
+            colors.unshift(prevColor);
+        }
+        if (colors.at(-1) === null) {
+            colors.pop();
         }
         return colors;
     }
@@ -553,26 +856,26 @@ export class SplinePoint2d {
 }
 export class Spline2d extends SimulationElement {
     curves;
-    width;
+    thickness;
     detail;
     interpolateLimit;
     distance;
-    constructor(pos, points, width = 2, detail = 40) {
+    constructor(pos, points, thickness = devicePixelRatio, detail = 40) {
         super(pos.getPos(), pos.getColor() || undefined);
         this.curves = [];
-        this.width = width * devicePixelRatio;
+        this.thickness = thickness * devicePixelRatio;
         this.detail = detail;
         this.interpolateLimit = 1;
         this.distance = 0;
         for (let i = 0; i < points.length; i++) {
             let prevControl = null;
-            let prevColor = this.getColor();
+            let prevColor = null;
             if (i > 0) {
                 prevControl = cloneBuf(points[i - 1].getRawControls()[1]);
                 vec2.negate(prevControl, prevControl);
                 const prevColors = points[i - 1].getColors();
                 if (prevColors.at(-1)) {
-                    prevColor = prevColors.at(-1);
+                    prevColor = prevColors.at(-1) || null;
                 }
             }
             const bezierPoints = points[i].getVectorArray(i > 0 ? vector2FromVector3(points[i - 1].getEnd().getPos()) : null, prevControl);
@@ -619,8 +922,9 @@ export class Spline2d extends SimulationElement {
                     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 vertexColor = interpolateColors(this.curves[i].getColors(), currentInterpolation);
+                    vec2.scale(normal, this.thickness / 2, normal);
+                    const colors = this.curves[i].getColors().map((c) => (c ? c : this.getColor()));
+                    const vertexColor = interpolateColors(colors, currentInterpolation);
                     const vertTop = vertex(point[0] + normal[0], point[1] + normal[1], 0, vertexColor);
                     verticesTop.push(vertTop);
                     const vertBottom = vertex(point[0] - normal[0], point[1] - normal[1], 0, vertexColor);

package/dist/index.d.ts

@@ -1,4 +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';
+export { Vertex, Color, cloneBuf, vector4, vector3, vector2, vector3FromVector2, colorFromVector4, randomInt, randomColor, vertex, color, colorf, transitionValues, lerp, smoothStep, linearStep, exponentialStep, splinePoint2d, continuousSplinePoint2d } from './utils.js';

package/dist/index.js

@@ -1,4 +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';
+export { Vertex, Color, cloneBuf, vector4, vector3, vector2, vector3FromVector2, colorFromVector4, randomInt, randomColor, vertex, color, colorf, transitionValues, lerp, smoothStep, linearStep, exponentialStep, splinePoint2d, continuousSplinePoint2d } from './utils.js';

package/dist/simulation.d.ts

@@ -11,7 +11,7 @@ export declare class Simulation {
     private frameRateView;
     private camera;
     constructor(idOrCanvasRef: string | HTMLCanvasElement, camera?: Camera | null, showFrameRate?: boolean);
-    add(el: SimulationElement): void;
+    add(el: SimulationElement<any>): void;
     setCanvasSize(width: number, height: number): void;
     start(): void;
     stop(): void;

package/dist/simulation.js

@@ -1,7 +1,7 @@
 import { vec3 } from 'wgpu-matrix';
 import { SimulationElement } from './graphics.js';
 import { BUF_LEN } from './constants.js';
-import { Color, applyElementToScene, buildMultisampleTexture, buildProjectionMatrix, getOrthoMatrix, getTransformationMatrix, logger, transitionValues, vector2, vector3 } from './utils.js';
+import { Color, applyElementToScene, buildDepthTexture, buildMultisampleTexture, 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
@@ -229,6 +229,11 @@ export class Simulation {
             },
             multisample: {
                 count: 4
+            },
+            depthStencil: {
+                depthWriteEnabled: true,
+                depthCompare: 'less',
+                format: 'depth24plus'
             }
         });
         const uniformBufferSize = 4 * 16 + 4 * 16 + 4 * 2 + 8; // 4x4 matrix + 4x4 matrix + vec2<f32> + 8 bc 144 is cool
@@ -267,8 +272,15 @@ export class Simulation {
         };
         updateOrthoMatrix();
         let multisampleTexture = buildMultisampleTexture(device, ctx, canvas.width, canvas.height);
+        let depthTexture = buildDepthTexture(device, canvas.width, canvas.height);
         const renderPassDescriptor = {
-            colorAttachments: [colorAttachment]
+            colorAttachments: [colorAttachment],
+            depthStencilAttachment: {
+                view: depthTexture.createView(),
+                depthClearValue: 1.0,
+                depthLoadOp: 'clear',
+                depthStoreOp: 'store'
+            }
         };
         // sub 10 to start with a reasonable gap between starting time and next frame time
         let prev = Date.now() - 10;
@@ -296,6 +308,8 @@ export class Simulation {
                 projectionMatrix = buildProjectionMatrix(aspect);
                 updateModelViewProjectionMatrix();
                 multisampleTexture = buildMultisampleTexture(device, ctx, screenSize[0], screenSize[1]);
+                depthTexture = buildDepthTexture(device, screenSize[0], screenSize[1]);
+                renderPassDescriptor.depthStencilAttachment.view = depthTexture.createView();
             }
             // @ts-ignore
             renderPassDescriptor.colorAttachments[0].view = multisampleTexture.createView();

package/dist/utils.d.ts

@@ -51,6 +51,7 @@ export declare class Vertex {
 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[], camera: Camera | null, el: SimulationElement) => void;
 declare class Logger {
@@ -72,7 +73,8 @@ export declare function lossyTriangulate(vertices: Vertex[]): (readonly [Vertex,
 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 linearStep(t: number): number;
+export declare function exponentialStep(t: 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;

package/dist/utils.js

@@ -125,6 +125,14 @@ export const getTransformationMatrix = (pos, rotation, projectionMatrix) => {
 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],
@@ -237,8 +245,17 @@ export function smoothStep(t) {
     const v2 = 1 - (1 - t) * (1 - t);
     return lerp(v1, v2, t);
 }
-export function linearStep(n) {
-    return n;
+export function linearStep(t) {
+    return t;
+}
+export function exponentialStep(t) {
+    return t === 0
+        ? 0
+        : t === 1
+            ? 1
+            : t < 0.5
+                ? Math.pow(2, 20 * t - 10) / 2
+                : (2 - Math.pow(2, -20 * t + 10)) / 2;
 }
 export function vertexBuffer3d(x, y, z, color, uv = vector2()) {
     return [x, y, z, 1, ...color.toBuffer(), ...uv, 1];
@@ -301,6 +318,10 @@ export function continuousSplinePoint2d(end, control, detail) {
     return new SplinePoint2d(null, end, null, control, rawControls, detail);
 }
 export function interpolateColors(colors, 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)

package/package.json

@@ -5,7 +5,7 @@
   "types": "./dist/index.d.ts",
   "author": "Jackson Otto",
   "description": "A simple graphics library using WebGPU",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "exports": {
     ".": {
       "import": "./dist/index.js",