@woosh/meep-engine 2.92.10 → 2.92.11

package/package.json

@@ -5,7 +5,7 @@
   "description": "Fully featured ECS game engine written in JavaScript",
   "type": "module",
   "author": "Alexander Goldring",
-  "version": "2.92.10",
+  "version": "2.92.11",
   "main": "build/meep.module.js",
   "module": "build/meep.module.js",
   "exports": {

package/src/core/math/spline/spline_bezier3_bounds.js

@@ -1,7 +1,7 @@
-import { min2 } from "../min2.js";
-import { max2 } from "../max2.js";
 import { assert } from "../../assert.js";
-import { spline_bezier3 } from './spline_bezier3'
+import { max2 } from "../max2.js";
+import { min2 } from "../min2.js";
+import { spline_bezier3 } from './spline_bezier3.js'
 
 /**
  * Compute bounds of a 3-rd degree bezier curve

package/src/core/math/spline/spline_hermite3.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Perform cubic hermite interpolation
+ * @param {number} t normalized interpolation position (0..1)
+ * @param {number} p0 first value
+ * @param {number} p1 second value
+ * @param {number} m0 first tangent
+ * @param {number} m1 second tangent
+ * @return {number}
+ */
+export function spline_hermite3(t: number, p0: number, p1: number, m0: number, m1: number): number;
+//# sourceMappingURL=spline_hermite3.d.ts.map

package/src/core/math/spline/spline_hermite3.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spline_hermite3.d.ts","sourceRoot":"","sources":["../../../../../src/core/math/spline/spline_hermite3.js"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,mCAPW,MAAM,MACN,MAAM,MACN,MAAM,MACN,MAAM,MACN,MAAM,GACL,MAAM,CAajB"}

package/src/core/math/spline/spline_hermite3.js

@@ -0,0 +1,21 @@
+/**
+ * Perform cubic hermite interpolation
+ * @param {number} t normalized interpolation position (0..1)
+ * @param {number} p0 first value
+ * @param {number} p1 second value
+ * @param {number} m0 first tangent
+ * @param {number} m1 second tangent
+ * @return {number}
+ */
+export function spline_hermite3(t, p0, p1, m0, m1) {
+
+    const t2 = t * t;
+    const t3 = t2 * t;
+
+    const a = 2 * t3 - 3 * t2 + 1;
+    const b = t3 - 2 * t2 + t;
+    const c = t3 - t2;
+    const d = -2 * t3 + 3 * t2;
+
+    return a * p0 + b * m0 + c * m1 + d * p1;
+}

package/src/core/math/spline/spline_hermite3_bounds.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Compute bounds of a 3-rd degree hermite curve
+ * Note that this is a 1d case solver
+ * Lower bound will be written into result[offset], upper bounds will be written into result[offset+result_stride]
+ * Solution is based on https://stackoverflow.com/questions/24809978/calculating-the-bounding-box-of-cubic-bezier-curve
+ * Differentiation of hermite polynomial is done in WolframAlpha
+ * 0 = 3 t^2 (m0 + m1 + 2 p0 - 2 p1) - 2 t (2 m0 + m1 + 3 p0 - 3 p1) + m0
+ * @param {number[]|Float32Array} result
+ * @param {number} result_offset offset into the result array
+ * @param {number} result_stride
+ * @param {number} p0
+ * @param {number} p1
+ * @param {number} m0
+ * @param {number} m1
+ */
+export function spline_hermite3_bounds(result: number[] | Float32Array, result_offset: number, result_stride: number, p0: number, p1: number, m0: number, m1: number): void;
+//# sourceMappingURL=spline_hermite3_bounds.d.ts.map

package/src/core/math/spline/spline_hermite3_bounds.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spline_hermite3_bounds.d.ts","sourceRoot":"","sources":["../../../../../src/core/math/spline/spline_hermite3_bounds.js"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;GAcG;AACH,+CARW,MAAM,EAAE,GAAC,YAAY,iBACrB,MAAM,iBACN,MAAM,MACN,MAAM,MACN,MAAM,MACN,MAAM,MACN,MAAM,QA4EhB"}

package/src/core/math/spline/spline_hermite3_bounds.js

@@ -0,0 +1,95 @@
+import { assert } from "../../assert.js";
+import { max2 } from "../max2.js";
+import { min2 } from "../min2.js";
+import { spline_hermite3 } from "./spline_hermite3.js";
+
+/**
+ * Compute bounds of a 3-rd degree hermite curve
+ * Note that this is a 1d case solver
+ * Lower bound will be written into result[offset], upper bounds will be written into result[offset+result_stride]
+ * Solution is based on https://stackoverflow.com/questions/24809978/calculating-the-bounding-box-of-cubic-bezier-curve
+ * Differentiation of hermite polynomial is done in WolframAlpha
+ * 0 = 3 t^2 (m0 + m1 + 2 p0 - 2 p1) - 2 t (2 m0 + m1 + 3 p0 - 3 p1) + m0
+ * @param {number[]|Float32Array} result
+ * @param {number} result_offset offset into the result array
+ * @param {number} result_stride
+ * @param {number} p0
+ * @param {number} p1
+ * @param {number} m0
+ * @param {number} m1
+ */
+export function spline_hermite3_bounds(
+    result,
+    result_offset,
+    result_stride,
+    p0, p1, m0, m1) {
+
+    assert.greaterThan(result_stride, 0, 'result_stride must be greater than 0');
+    assert.isInteger(result_stride, 'result_stride');
+
+    const a = 3 * (m0 + m1 + 2 * p0 - 2 * p1);
+    const b = -2 * (2 * m0 + m1 + 3 * p0 - 3 * p1);
+    const c = m0;
+
+    let min = min2(p0, p1);
+    let max = max2(p0, p1);
+
+    if (Math.abs(a) < 1e-12) {
+
+        if (Math.abs(b) >= 1e-12) {
+            const t = -c / b;
+
+            if (0 < t && t < 1) {
+                const value = spline_hermite3(t, p0, p1, m0, m1);
+
+                if (value < min) {
+                    min = value;
+                }
+                if (value > max) {
+                    max = value;
+                }
+
+            }
+
+        }
+
+    } else {
+
+        const b2ac = b * b - 4 * c * a;
+        const sqrtb2ac = Math.sqrt(b2ac);
+
+        if (b2ac >= 0) {
+
+            const t1 = (-b + sqrtb2ac) / (2 * a);
+
+            if (0 < t1 && t1 < 1) {
+                const value = spline_hermite3(t1, p0, p1, m0, m1);
+
+                if (value < min) {
+                    min = value;
+                }
+                if (value > max) {
+                    max = value;
+                }
+            }
+
+            const t2 = (-b - sqrtb2ac) / (2 * a);
+
+            if (0 < t2 && t2 < 1) {
+                const value = spline_hermite3(t2, p0, p1, m0, m1);
+
+                if (value < min) {
+                    min = value;
+                }
+                if (value > max) {
+                    max = value;
+                }
+            }
+
+        }
+
+    }
+
+    result[result_offset] = min;
+    result[result_offset + result_stride] = max;
+}

package/src/core/math/spline/spline_hermite3_bounds.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=spline_hermite3_bounds.spec.d.ts.map

package/src/core/math/spline/spline_hermite3_bounds.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spline_hermite3_bounds.spec.d.ts","sourceRoot":"","sources":["../../../../../src/core/math/spline/spline_hermite3_bounds.spec.js"],"names":[],"mappings":""}

package/src/core/math/spline/spline_hermite3_bounds.spec.js

@@ -0,0 +1,37 @@
+import { spline_hermite3_bounds } from "./spline_hermite3_bounds.js";
+
+test("spline of 0 length", () => {
+    const bounds = [];
+
+    spline_hermite3_bounds(
+        bounds, 0, 1,
+        0, 0, 0, 0
+    );
+
+    expect(bounds[0]).toBeCloseTo(0);
+    expect(bounds[1]).toBeCloseTo(0);
+});
+
+test("0-slope line", () => {
+    const bounds = [];
+
+    spline_hermite3_bounds(
+        bounds, 0, 1,
+        -2, 2, 0, 0
+    );
+
+    expect(bounds[0]).toBeCloseTo(-2);
+    expect(bounds[1]).toBeCloseTo(2);
+});
+
+test("overshooting control points", () => {
+    const bounds = [];
+
+    spline_hermite3_bounds(
+        bounds, 0, 1,
+        0, 1, 100, 100
+    );
+
+    expect(bounds[0]).toBeLessThan(0);
+    expect(bounds[1]).toBeGreaterThan(1);
+});

package/src/engine/animation/curve/AnimationCurve.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimationCurve.d.ts","sourceRoot":"","sources":["../../../../../src/engine/animation/curve/AnimationCurve.js"],"names":[],"mappings":"AAyCA;;;GAGG;AACH;IA4EI;;;;OAIG;IACH,kBAHW,QAAQ,EAAE,GACR,cAAc,CAU1B;IAxFD;;;OAGG;IACH,eAFU,QAAQ,EAAE,CAEV;IAEV;;;;OAIG;IACH,SAHW,QAAQ,GACN,MAAM,CA4BlB;IAED;;;OAGG;IACH,cAFW,QAAQ,EAAE,QAQpB;IAED;;;;OAIG;IACH,YAHW,QAAQ,GACN,OAAO,CAYnB;IAED;;OAEG;IACH,cAEC;IAiBD;;;OAGG;IACH,qBAEC;IAGD;;;;OAIG;IACH,YAHW,MAAM,GACL,MAAM,CA+BjB;IAED;;;OAGG;IACH,qBAFW,MAAM,QAoBhB;IAED;;;;OAIG;IACH,sBAHW,MAAM,UACN,MAAM,QAWhB;IAED,0BAKC;IAED;;MAIC;IAED;;aAeC;CACJ;yBAtPwB,eAAe"}
+{"version":3,"file":"AnimationCurve.d.ts","sourceRoot":"","sources":["../../../../../src/engine/animation/curve/AnimationCurve.js"],"names":[],"mappings":"AAmCA;;;GAGG;AACH;IA4EI;;;;OAIG;IACH,kBAHW,QAAQ,EAAE,GACR,cAAc,CAU1B;IAxFD;;;OAGG;IACH,eAFU,QAAQ,EAAE,CAEV;IAEV;;;;OAIG;IACH,SAHW,QAAQ,GACN,MAAM,CA4BlB;IAED;;;OAGG;IACH,cAFW,QAAQ,EAAE,QAQpB;IAED;;;;OAIG;IACH,YAHW,QAAQ,GACN,OAAO,CAYnB;IAED;;OAEG;IACH,cAEC;IAiBD;;;OAGG;IACH,qBAEC;IAGD;;;;OAIG;IACH,YAHW,MAAM,GACL,MAAM,CA+BjB;IAED;;;OAGG;IACH,qBAFW,MAAM,QAoBhB;IAED;;;;OAIG;IACH,sBAHW,MAAM,UACN,MAAM,QAWhB;IAED,0BAKC;IAED;;MAIC;IAED;;aAeC;CACJ;yBA/OwB,eAAe"}

package/src/engine/animation/curve/AnimationCurve.js

@@ -1,32 +1,26 @@
 import { binarySearchHighIndex } from "../../../core/collection/array/binarySearchHighIndex.js";
 import { inverseLerp } from "../../../core/math/inverseLerp.js";
 import { lerp } from "../../../core/math/lerp.js";
+import { spline_hermite3 } from "../../../core/math/spline/spline_hermite3.js";
 import { invokeObjectToJSON } from "../../../core/model/object/invokeObjectToJSON.js";
 import { Keyframe } from "./Keyframe.js";
 
 /**
  *
- * @param {number} t
+ * @param {number} t interpolation value, between 0 and 1
  * @param {Keyframe} keyframe0
  * @param {Keyframe} keyframe1
  * @return {number}
  */
 function evaluate(t, keyframe0, keyframe1) {
-
-    const dt = keyframe1.time - keyframe0.time;
-
-    const m0 = keyframe0.outTangent * dt;
-    const m1 = keyframe1.inTangent * dt;
-
-    const t2 = t * t;
-    const t3 = t2 * t;
-
-    const a = 2 * t3 - 3 * t2 + 1;
-    const b = t3 - 2 * t2 + t;
-    const c = t3 - t2;
-    const d = -2 * t3 + 3 * t2;
-
-    return a * keyframe0.value + b * m0 + c * m1 + d * keyframe1.value;
+    const time_distance = keyframe1.time - keyframe0.time;
+
+    return spline_hermite3(
+        t,
+        keyframe0.value, keyframe1.value,
+        keyframe0.outTangent * time_distance,
+        keyframe1.inTangent * time_distance
+    );
 }
 
 /**

package/src/engine/animation/curve/AnimationCurve.spec.js

@@ -113,6 +113,17 @@ test("smooth tangents on a middle frame", () => {
     expect(key.inTangent).toEqual(key.outTangent);
 });
 
+test("extreme tangent interpolation", () => {
+
+
+    const curve = new AnimationCurve();
+
+    curve.add(Keyframe.from(0, 1, 0, -1));
+    curve.add(Keyframe.from(1, 2, 1, 0));
+
+    expect(curve.evaluate(0.5)).toBe(0.5);
+
+});
 
 test("to/from JSON consistency", () => {
 

package/src/engine/animation/curve/compression/prototypeCurveCompression.js

@@ -9,7 +9,7 @@ import { AnimationCurve } from "../AnimationCurve.js";
 import { build_curve_editor } from "../draw/build_curve_editor.js";
 import { build_plot_entity_from_array } from "../draw/build_plot_entity_from_array.js";
 import { Keyframe } from "../Keyframe.js";
-import { CURVE_EASE_OUT } from "../preset/CURVE_EASE_OUT.js";
+import { CURVE_EASE_IN_OUT } from "../preset/CURVE_EASE_IN_OUT.js";
 import { downsample_float_array_curve_by_error } from "./downsample_float_array_curve_by_error.js";
 import { sample_animation_curve_to_float_array } from "./sample_animation_curve_to_float_array.js";
 
@@ -139,11 +139,22 @@ async function main(engine) {
         return curve;
     }
 
+    function sample_curve_5() {
+
+        const curve = new AnimationCurve();
+
+        curve.add(Keyframe.from(0, 1, 0, -1));
+        curve.add(Keyframe.from(10, 1, 1, 0));
+
+        return curve;
+    }
+
     // const curve = sample_curve_0();
 
     // curve.smoothAllTangents();
 
-    const curve = CURVE_EASE_OUT;
+    // const curve = sample_curve_5();
+    const curve = CURVE_EASE_IN_OUT;
 
     const ecd = engine.entityManager.dataset;
 

package/src/engine/animation/curve/compute_curve_aabb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"compute_curve_aabb.d.ts","sourceRoot":"","sources":["../../../../../src/engine/animation/curve/compute_curve_aabb.js"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,4EAiBC"}
+{"version":3,"file":"compute_curve_aabb.d.ts","sourceRoot":"","sources":["../../../../../src/engine/animation/curve/compute_curve_aabb.js"],"names":[],"mappings":"AAMA;;;;GAIG;AACH,4EAmCC"}

package/src/engine/animation/curve/compute_curve_aabb.js

@@ -1,5 +1,8 @@
 import { max2 } from "../../../core/math/max2.js";
 import { min2 } from "../../../core/math/min2.js";
+import { spline_hermite3_bounds } from "../../../core/math/spline/spline_hermite3_bounds.js";
+
+const temp_bounds = new Float32Array(4);
 
 /**
  *
@@ -12,14 +15,32 @@ export function compute_curve_aabb(out, curve) {
     let y0 = Number.POSITIVE_INFINITY;
     let y1 = Number.NEGATIVE_INFINITY;
 
-    for (let i = 0; i < curve.keys.length; i++) {
-        const keyframe = curve.keys[i];
+    const keys = curve.keys;
+    const key_count = keys.length;
+
+    let previous = keys[0];
+    x0 = x1 = previous.time;
+    y0 = y1 = previous.value;
+
+
+    for (let i = 1; i < key_count; i++) {
+        const keyframe = keys[i];
+
+        const time_delta = keyframe.time - previous.time;
+
+        spline_hermite3_bounds(temp_bounds, 0, 1,
+            previous.value, keyframe.value,
+            previous.outTangent * time_delta,
+            keyframe.inTangent * time_delta
+        );
 
         x0 = min2(x0, keyframe.time)
         x1 = max2(x1, keyframe.time)
 
-        y0 = min2(y0, keyframe.value);
-        y1 = max2(y1, keyframe.value);
+        y0 = min2(y0, temp_bounds[0]);
+        y1 = max2(y1, temp_bounds[1]);
+
+        previous = keyframe;
     }
 
     out.set(x0, y0, x1, y1);

package/src/engine/animation/curve/draw/build_plot_entity_from_array.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"build_plot_entity_from_array.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/animation/curve/draw/build_plot_entity_from_array.js"],"names":[],"mappings":"AAQA;;;;;;;;;;GAUG;AACH,2FATW,MAAM,EAAE,GAOP,MAAM,CAkCjB;mBAjDkB,wBAAwB"}
+{"version":3,"file":"build_plot_entity_from_array.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/animation/curve/draw/build_plot_entity_from_array.js"],"names":[],"mappings":"AASA;;;;;;;;;;GAUG;AACH,2FATW,MAAM,EAAE,GAOP,MAAM,CAyCjB;mBAxDkB,wBAAwB"}

package/src/engine/animation/curve/draw/build_plot_entity_from_array.js

@@ -1,3 +1,4 @@
+import { array_compute_min_max } from "../../../../core/collection/array/array_compute_min_max.js";
 import Vector2 from "../../../../core/geom/Vector2.js";
 import { CanvasView } from "../../../../view/elements/CanvasView.js";
 import Entity from "../../../ecs/Entity.js";
@@ -35,10 +36,17 @@ export function build_plot_entity_from_array({
     });
     const ctx = canvasView.context2d;
 
-    canvas2d_plot_data_line({ ctx, data, width, height, margin });
+    canvas2d_plot_data_line({ ctx, data, width, height, margin, range_x: [0, 1], range_y: array_compute_min_max(data) });
 
     const text = `${data.length}`;
-    canvas2d_draw_label({ ctx: ctx, text: text, x: margin.x, y: height - (20) });
+    canvas2d_draw_label({
+        ctx: ctx,
+        text: text,
+        x: margin.x,
+        y: height - (20),
+        fontSize: 20,
+        color: 'red'
+    });
 
     if (typeof label === "string" && label.length > 0) {
         canvas2d_draw_label({ ctx: ctx, text: label, x: width - margin.x - 50, y: 20 })

package/src/engine/animation/curve/prototypeGLTF.js

@@ -38,22 +38,22 @@ async function main(engine) {
         yaw: 3.123185307179593,
     });
     //
-    // make_sample('data/models/samples/InterpolationTest.glb',[
-    //     'Step Scale',
-    //     'Linear Scale',
-    //     'CubicSpline Scale',
-    //     'Step Rotation',
-    //     'CubicSpline Rotation',
-    //     'Linear Rotation',
-    //     'Step Translation',
-    //     'CubicSpline Translation',
-    //     'Linear Translation'
-    // ],engine.entityManager.dataset);
-    //
-    make_sample('data/models/samples/BoxAnimated.glb',[
-       'animation_0'
+    make_sample('data/models/samples/InterpolationTest.glb',[
+        'Step Scale',
+        'Linear Scale',
+        'CubicSpline Scale',
+        'Step Rotation',
+        'CubicSpline Rotation',
+        'Linear Rotation',
+        'Step Translation',
+        'CubicSpline Translation',
+        'Linear Translation'
     ],engine.entityManager.dataset);
 
+    // make_sample('data/models/samples/BoxAnimated.glb',[
+    //    'animation_0'
+    // ],engine.entityManager.dataset);
+
     // make_sample('data/models/samples/animatedbox1.gltf', [
     //     'All Animations'
     // ], engine.entityManager.dataset);

package/src/engine/graphics/canvas/canvas2d_draw_label.d.ts

@@ -4,6 +4,9 @@
  * @param {string} text
  * @param {number} x
  * @param {number} y
+ * @param {string} [color] CSS color
+ * @param {number} [fontSize] in pixels
+ * @param {string} [outline] CSS color
  */
-export function canvas2d_draw_label({ ctx, text, x, y }: CanvasRenderingContext2D): void;
+export function canvas2d_draw_label({ ctx, text, x, y, color, fontSize, outline }: CanvasRenderingContext2D): void;
 //# sourceMappingURL=canvas2d_draw_label.d.ts.map

package/src/engine/graphics/canvas/canvas2d_draw_label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"canvas2d_draw_label.d.ts","sourceRoot":"","sources":["../../../../../src/engine/graphics/canvas/canvas2d_draw_label.js"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,yDALW,wBAAwB,QAmBlC"}
+{"version":3,"file":"canvas2d_draw_label.d.ts","sourceRoot":"","sources":["../../../../../src/engine/graphics/canvas/canvas2d_draw_label.js"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,mFARW,wBAAwB,QAyBlC"}

package/src/engine/graphics/canvas/canvas2d_draw_label.js

@@ -4,18 +4,24 @@
  * @param {string} text
  * @param {number} x
  * @param {number} y
+ * @param {string} [color] CSS color
+ * @param {number} [fontSize] in pixels
+ * @param {string} [outline] CSS color
  */
 export function canvas2d_draw_label({
                                         ctx,
                                         text,
                                         x,
-                                        y
+                                        y,
+                                        color = 'white',
+                                        fontSize = 10,
+                                        outline = `rgba(0, 0, 0, 0.5)`
                                     }) {
 
-    ctx.fillStyle = 'white';
-    ctx.font = '10px Tahoma';
+    ctx.fillStyle = color;
+    ctx.font = `${Math.ceil(fontSize)}px Tahoma`;
 
-    ctx.strokeStyle = `rgba(0, 0, 0, 0.5)`;
+    ctx.strokeStyle = outline;
     ctx.lineWidth = 2;
     ctx.strokeText(text, x, y);
     ctx.fillText(text, x, y);