simulationjsv2 0.2.9 → 0.3.0

package/dist/geometry.d.ts

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

package/dist/geometry.js

@@ -126,12 +126,13 @@ export class SquareGeometry extends Geometry {
     wireframeOrder = [0, 1, 2, 3, 0, 2];
     triangleOrder = [0, 1, 3, 2];
     params;
-    constructor(width, height) {
+    constructor(width, height, centerOffset) {
         super([], 'strip');
         this.params = {
             width,
             height,
-            colorMap: {}
+            colorMap: {},
+            centerOffset: centerOffset || vector2(0, 0)
         };
         this.recompute();
     }
@@ -145,11 +146,12 @@ export class SquareGeometry extends Geometry {
         this.params.height = height;
     }
     recompute() {
+        const centerOffset = this.params.centerOffset;
         this.vertices = [
-            vector3(-this.params.width / 2, this.params.height / 2, 0),
-            vector3(this.params.width / 2, this.params.height / 2, 0),
-            vector3(this.params.width / 2, -this.params.height / 2, 0),
-            vector3(-this.params.width / 2, -this.params.height / 2, 0)
+            vector3(-this.params.width * centerOffset[0], this.params.height * centerOffset[1]),
+            vector3(this.params.width * (1 - centerOffset[0]), this.params.height * centerOffset[1]),
+            vector3(this.params.width * (1 - centerOffset[0]), -this.params.height * (1 - centerOffset[1])),
+            vector3(-this.params.width * centerOffset[0], -this.params.height * (1 - centerOffset[1]))
         ];
     }
     getTriangleBuffer(color) {
@@ -208,7 +210,7 @@ export class CircleGeometry extends Geometry {
         this.updateWireframeOrder();
     }
 }
-export class SplineGeometry extends Geometry {
+export class Spline2dGeometry extends Geometry {
     wireframeOrder;
     triangleOrder;
     params;
@@ -236,6 +238,9 @@ export class SplineGeometry extends Geometry {
     updateInterpolationLimit(limit) {
         this.params.interpolateLimit = Math.min(1, Math.max(0, limit));
     }
+    updateThickness(thickness) {
+        this.params.thickness = thickness;
+    }
     getVertexCount() {
         return this.triangleOrder.length * BUF_LEN;
     }
@@ -245,6 +250,9 @@ export class SplineGeometry extends Geometry {
     getTriangleVertexCount() {
         return this.getVertexCount();
     }
+    getCurves() {
+        return this.params.curves;
+    }
     computeCurves() {
         for (let i = 0; i < this.params.points.length; i++) {
             let prevControl = null;

package/dist/graphics.d.ts

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

package/dist/graphics.js

@@ -1,6 +1,6 @@
 import { vec3, mat4, vec2, vec4 } from 'wgpu-matrix';
 import { Vertex, VertexCache, cloneBuf, color, colorFromVector4, vector3ToPixelRatio, vector2, vector3, vertex, Color, transitionValues, logger, vector2FromVector3, matrix4, rotateMat4, vector3FromVector2, vector2ToPixelRatio, bufferGenerator } from './utils.js';
-import { BlankGeometry, CircleGeometry, CubeGeometry, Line2dGeometry, Line3dGeometry, PlaneGeometry, PolygonGeometry, SplineGeometry, SquareGeometry } from './geometry.js';
+import { BlankGeometry, CircleGeometry, CubeGeometry, Line2dGeometry, Line3dGeometry, PlaneGeometry, PolygonGeometry, Spline2dGeometry, SquareGeometry } from './geometry.js';
 export class SimulationElement {
     color;
     wireframe;
@@ -232,15 +232,16 @@ export class Square extends SimulationElement2d {
     height;
     vertexColors;
     /**
+     * @param centerOffset{Vector2} - A vector2 of values from 0 to 1
      * @param vertexColors{Record<number, Color>} - 0 is top left vertex, numbers increase clockwise
      */
-    constructor(pos, width, height, color, rotation, vertexColors) {
+    constructor(pos, width, height, color, rotation, centerOffset, vertexColors) {
         super(pos, rotation, color);
         vector2ToPixelRatio(this.pos);
         this.width = width * devicePixelRatio;
         this.height = height * devicePixelRatio;
         this.vertexColors = this.cloneColorMap(vertexColors || {});
-        this.geometry = new SquareGeometry(this.width, this.height);
+        this.geometry = new SquareGeometry(this.width, this.height, centerOffset);
         this.geometry.setVertexColorMap(this.vertexColors);
     }
     cloneColorMap(colorMap) {
@@ -359,8 +360,6 @@ export class Square extends SimulationElement2d {
     updateMatrix(camera) {
         const pos = cloneBuf(this.pos);
         pos[1] = camera.getScreenSize()[1] - pos[1];
-        pos[0] += this.width / 2;
-        pos[1] -= this.height / 2;
         const matrix = matrix4();
         mat4.translate(matrix, vector3FromVector2(pos), matrix);
         mat4.rotateZ(matrix, this.rotation, matrix);
@@ -763,19 +762,19 @@ export class SplinePoint2d {
 }
 export class Spline2d extends SimulationElement2d {
     geometry;
-    curves;
     thickness;
     detail;
     interpolateStart;
     interpolateLimit;
     constructor(pos, points, thickness = devicePixelRatio, detail = 40) {
-        super(vector2FromVector3(pos.getPos()), 0, pos.getColor() || undefined);
-        this.curves = [];
+        const tempPos = vector2FromVector3(pos.getPos());
+        vector2ToPixelRatio(tempPos);
+        super(tempPos, 0, pos.getColor() || undefined);
         this.thickness = thickness * devicePixelRatio;
         this.detail = detail;
         this.interpolateStart = 0;
         this.interpolateLimit = 1;
-        this.geometry = new SplineGeometry(points, this.getColor(), this.thickness, this.detail);
+        this.geometry = new Spline2dGeometry(points, this.getColor(), this.thickness, this.detail);
     }
     setInterpolateStart(start, t = 0, f) {
         const diff = start - this.interpolateStart;
@@ -801,13 +800,27 @@ export class Spline2d extends SimulationElement2d {
             this.vertexCache.updated();
         }, t, f);
     }
+    setThickness(thickness, t = 0, f) {
+        thickness *= devicePixelRatio;
+        const diff = thickness - this.thickness;
+        return transitionValues((p) => {
+            this.thickness += diff * p;
+            this.geometry.updateThickness(this.thickness);
+            this.vertexCache.updated();
+        }, () => {
+            this.thickness = thickness;
+            this.geometry.updateThickness(this.thickness);
+            this.vertexCache.updated();
+        }, t, f);
+    }
     interpolateSlope(t) {
-        const curveInterval = 1 / this.curves.length;
+        const curves = this.geometry.getCurves();
+        const curveInterval = 1 / curves.length;
         let index = Math.floor(t / curveInterval);
-        if (index === this.curves.length)
+        if (index === curves.length)
             index--;
         const diff = (t - curveInterval * index) * 2;
-        return this.curves[index].interpolateSlope(diff);
+        return curves[index].interpolateSlope(diff);
     }
     interpolate(t) {
         const [vec] = this.interpolateSlope(t);

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/types.d.ts

@@ -35,12 +35,13 @@ export type SquareGeometryParams = {
     width: number;
     height: number;
     colorMap: VertexColorMap;
+    centerOffset: Vector2;
 };
 export type CircleGeometryParams = {
     radius: number;
     detail: number;
 };
-export type SplineGeometryParams = {
+export type Spline2dGeometryParams = {
     points: SplinePoint2d[];
     curves: CubicBezierCurve2d[];
     distance: number;

package/dist/utils.js

@@ -143,7 +143,7 @@ export const buildMultisampleTexture = (device, ctx, width, height) => {
 };
 export const applyElementToScene = (scene, el) => {
     if (el instanceof SimulationElement) {
-        scene.push(el);
+        scene.unshift(el);
     }
     else {
         throw logger.error('Cannot add invalid SimulationElement');

package/package.json

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