simulationjsv2 0.2.0 → 0.2.2

package/dist/graphics.d.ts

@@ -137,9 +137,13 @@ export declare class Spline2d extends SimulationElement {
     private curves;
     private thickness;
     private detail;
+    private interpolateStart;
     private interpolateLimit;
     private distance;
     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>;
+    interpolateSlope(t: number): readonly [Vector2, Vector2];
+    interpolate(t: number): Vector2;
     getBuffer(camera: Camera, force: boolean): number[];
 }

package/dist/graphics.js

@@ -7,7 +7,11 @@ export class SimulationElement {
     vertexCache;
     constructor(pos, color = new Color()) {
         this.pos = pos;
-        vec3ToPixelRatio(vector3(...this.pos));
+        const temp = vector3(...this.pos);
+        vec3ToPixelRatio(temp);
+        for (let i = 0; i < this.pos.length; i++) {
+            this.pos[i] = temp[i];
+        }
         this.color = color;
         this.vertexCache = new VertexCache();
         this.camera = null;
@@ -738,6 +742,7 @@ export class BezierCurve2d {
         this.points = points;
     }
     interpolateSlope(t) {
+        t = Math.max(0, Math.min(1, t));
         let vectors = this.points;
         let slopeVector = vector2(1);
         while (vectors.length > 2) {
@@ -824,15 +829,15 @@ export class SplinePoint2d {
     }
     getColors(prevColor) {
         const colors = [null, null];
-        if (this.start && this.start.getColor()) {
+        if (prevColor) {
+            colors[0] = prevColor;
+        }
+        else if (this.start && this.start.getColor()) {
             colors[0] = this.start.getColor();
         }
         if (this.end.getColor()) {
             colors[1] = this.end.getColor();
         }
-        if (prevColor) {
-            colors.unshift(prevColor);
-        }
         if (colors.at(-1) === null) {
             colors.pop();
         }
@@ -858,6 +863,7 @@ export class Spline2d extends SimulationElement {
     curves;
     thickness;
     detail;
+    interpolateStart;
     interpolateLimit;
     distance;
     constructor(pos, points, thickness = devicePixelRatio, detail = 40) {
@@ -865,6 +871,7 @@ export class Spline2d extends SimulationElement {
         this.curves = [];
         this.thickness = thickness * devicePixelRatio;
         this.detail = detail;
+        this.interpolateStart = 0;
         this.interpolateLimit = 1;
         this.distance = 0;
         for (let i = 0; i < points.length; i++) {
@@ -884,6 +891,16 @@ export class Spline2d extends SimulationElement {
             this.curves.push(curve);
         }
     }
+    setInterpolateStart(start, t = 0, f) {
+        const diff = start - this.interpolateStart;
+        return transitionValues((p) => {
+            this.interpolateStart += diff * p;
+            this.vertexCache.updated();
+        }, () => {
+            this.interpolateStart = start;
+            this.vertexCache.updated();
+        }, t, f);
+    }
     setInterpolateLimit(limit, t = 0, f) {
         const diff = limit - this.interpolateLimit;
         return transitionValues((p) => {
@@ -894,12 +911,26 @@ export class Spline2d extends SimulationElement {
             this.vertexCache.updated();
         }, t, f);
     }
+    interpolateSlope(t) {
+        const curveInterval = 1 / this.curves.length;
+        let index = Math.floor(t / curveInterval);
+        if (index === this.curves.length)
+            index--;
+        const diff = (t - curveInterval * index) * 2;
+        console.log(index);
+        return this.curves[index].interpolateSlope(diff);
+    }
+    interpolate(t) {
+        const [vec] = this.interpolateSlope(t);
+        return vec;
+    }
     getBuffer(camera, force) {
         if (this.vertexCache.shouldUpdate() || force) {
             const screenSize = camera.getScreenSize();
             let verticesTop = [];
             const verticesBottom = [];
             let currentDistance = 0;
+            let interpolationStarted = false;
             outer: for (let i = 0; i < this.curves.length; i++) {
                 const detail = this.curves[i].getDetail() || this.detail;
                 const step = 1 / detail;
@@ -916,6 +947,14 @@ export class Spline2d extends SimulationElement {
                         atLimit = true;
                         currentInterpolation = (this.interpolateLimit - distanceRatio) / sectionRatio;
                     }
+                    if (distanceRatio + currentInterpolation / this.curves.length < this.interpolateStart) {
+                        continue;
+                    }
+                    if (!interpolationStarted) {
+                        interpolationStarted = true;
+                        currentInterpolation = (this.interpolateStart - distanceRatio) / sectionRatio;
+                        j--;
+                    }
                     const [point, slope] = this.curves[i].interpolateSlope(currentInterpolation);
                     const pos = this.getPos();
                     point[0] += pos[0];
@@ -923,7 +962,9 @@ export class Spline2d extends SimulationElement {
                     const normal = vector2(-slope[1], slope[0]);
                     vec2.normalize(normal, normal);
                     vec2.scale(normal, this.thickness / 2, normal);
-                    const colors = this.curves[i].getColors().map((c) => (c ? c : this.getColor()));
+                    const colorsBefore = this.curves[i].getColors();
+                    console.log(colorsBefore);
+                    const colors = colorsBefore.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);

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

package/dist/simulation.d.ts

@@ -25,7 +25,7 @@ export declare class SceneCollection extends SimulationElement {
     private scene;
     constructor(name: string);
     getName(): string;
-    add(el: SimulationElement): void;
+    add(el: SimulationElement<any>): void;
     empty(): void;
     getBuffer(camera: Camera, force: boolean): number[];
 }

package/dist/utils.d.ts

@@ -74,7 +74,9 @@ export declare function transitionValues(callback1: (deltaT: number, t: number)
 export declare function lerp(a: number, b: number, t: number): number;
 export declare function smoothStep(t: number): number;
 export declare function linearStep(t: number): number;
-export declare function exponentialStep(t: number): number;
+export declare function easeInOutExpo(t: number): number;
+export declare function easeInOutQuart(t: number): number;
+export declare function easeInOutQuad(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

@@ -248,7 +248,7 @@ export function smoothStep(t) {
 export function linearStep(t) {
     return t;
 }
-export function exponentialStep(t) {
+export function easeInOutExpo(t) {
     return t === 0
         ? 0
         : t === 1
@@ -257,6 +257,12 @@ export function exponentialStep(t) {
                 ? Math.pow(2, 20 * t - 10) / 2
                 : (2 - Math.pow(2, -20 * t + 10)) / 2;
 }
+export function easeInOutQuart(t) {
+    return t < 0.5 ? 8 * t * t * t * t : 1 - Math.pow(-2 * t + 2, 4) / 2;
+}
+export function easeInOutQuad(t) {
+    return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+}
 export function vertexBuffer3d(x, y, z, color, uv = vector2()) {
     return [x, y, z, 1, ...color.toBuffer(), ...uv, 1];
 }
@@ -318,21 +324,25 @@ export function continuousSplinePoint2d(end, control, detail) {
     return new SplinePoint2d(null, end, null, control, rawControls, detail);
 }
 export function interpolateColors(colors, t) {
+    t = Math.min(1, Math.max(0, t));
     if (colors.length === 0)
         return color();
     if (colors.length === 1)
         return colors[0];
     const colorInterval = 1 / colors.length;
     let index = Math.floor(t / colorInterval);
-    if (index === colors.length)
-        index--;
+    if (index === -1)
+        console.log(t);
+    if (index >= colors.length)
+        index = colors.length - 1;
     const from = index === colors.length - 1 ? colors[index - 1] : colors[index];
     const to = index === colors.length - 1 ? colors[index] : colors[index + 1];
     const diff = to.diff(from);
-    diff.r *= t / (colorInterval * colors.length);
-    diff.g *= t / (colorInterval * colors.length);
-    diff.b *= t / (colorInterval * colors.length);
-    diff.a *= t / (colorInterval * colors.length);
+    const scale = t / (colorInterval * colors.length);
+    diff.r *= scale;
+    diff.g *= scale;
+    diff.b *= scale;
+    diff.a *= scale;
     const res = from.clone();
     res.r += diff.r;
     res.g += diff.g;

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.0",
+  "version": "0.2.2",
   "exports": {
     ".": {
       "import": "./dist/index.js",