@woosh/meep-engine 2.75.3 → 2.75.5

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

@@ -1,8 +1,8 @@
+import { binarySearchHighIndex } from "../../../core/collection/array/binarySearchHighIndex.js";
 import { inverseLerp } from "../../../core/math/inverseLerp.js";
 import { lerp } from "../../../core/math/lerp.js";
 import { invokeObjectToJSON } from "../../../core/model/object/invokeObjectToJSON.js";
 import { Keyframe } from "./Keyframe.js";
-import { binarySearchHighIndex } from "../../../core/collection/array/binarySearchHighIndex.js";
 
 /**
  *
@@ -44,22 +44,22 @@ function compareKeyframeToTime(time, keyframe) {
  * @see https://github.com/nothke/ThreadableCurve/blob/master/ThreadableCurve.cs
  */
 export class AnimationCurve {
-    constructor() {
-        /**
-         * @readonly
-         * @type {Keyframe[]}
-         */
-        this.keys = [];
-    }
+    /**
+     * @readonly
+     * @type {Keyframe[]}
+     */
+    keys = [];
 
     /**
      *
      * @param {Keyframe} key
+     * @returns {number} key index
      */
     add(key) {
         const keys = this.keys;
 
-        const last_key_index = keys.length - 1;
+        const key_count = keys.length;
+        const last_key_index = key_count - 1;
 
         if (
             last_key_index < 0
@@ -69,6 +69,8 @@ export class AnimationCurve {
             // inserted key goes at the end
             keys.push(key);
 
+            return key_count;
+
         } else {
 
             // figure out the right place to insert the key
@@ -76,6 +78,20 @@ export class AnimationCurve {
 
             // insert key at the right place
             keys.splice(i, 0, key);
+
+            return i;
+        }
+    }
+
+    /**
+     *
+     * @param {Keyframe[]} keys
+     */
+    addMany(keys) {
+        const key_count = keys.length;
+
+        for (let i = 0; i < key_count; i++) {
+            this.add(keys[i]);
         }
     }
 
@@ -111,15 +127,9 @@ export class AnimationCurve {
     static from(keys) {
         const curve = new AnimationCurve();
 
-        const key_count = keys.length;
+        curve.addMany(keys);
 
-        for (let i = 0; i < key_count; i++) {
-            curve.add(keys[i]);
-        }
-
-        for (let i = 0; i < key_count; i++) {
-            curve.smoothTangents(i, 1);
-        }
+        curve.smoothAllTangents();
 
         return curve;
     }
@@ -149,7 +159,7 @@ export class AnimationCurve {
             return keys[0].value;
         }
 
-        if (t < keys[0].time) {
+        if (t <= keys[0].time) {
             // before start
             return keys[0].value;
         }
@@ -169,13 +179,11 @@ export class AnimationCurve {
         return keys[key_count - 1].value;
     }
 
-
     /**
-     *
-     * @param {number} index
-     * @param {number} weight value between 0 and 1
+     * Set tangents of a key to match surrounding keys
+     * @param {number} index index of keyframe
      */
-    smoothTangents(index, weight) {
+    alignTangents(index) {
         const keys = this.keys;
 
         const key_main = keys[index];
@@ -193,19 +201,28 @@ export class AnimationCurve {
 
             key_main.outTangent = key_next.value - key_main.value;
         }
+    }
 
-        if (has_previous && has_next) {
-            const average = lerp(key_main.inTangent, key_main.outTangent, 0.5);
-            key_main.inTangent = average;
-            key_main.outTangent = average;
-        }
+    /**
+     *
+     * @param {number} index Index of keyframe to be affected
+     * @param {number} weight How much smoothing to apply, 1 will be fully smoothed out and 0 will have no effect at all. Value between 0 and 1
+     */
+    smoothTangents(index, weight) {
+        const keys = this.keys;
+
+        const key = keys[index];
 
+        const average = lerp(key.inTangent, key.outTangent, 0.5);
+
+        key.inTangent = lerp(key.inTangent, average, weight);
+        key.outTangent = lerp(key.outTangent, average, weight);
     }
 
     smoothAllTangents() {
         const n = this.length;
         for (let i = 0; i < n; i++) {
-            this.smoothTangents(i, 0);
+            this.smoothTangents(i, 1);
         }
     }
 
@@ -215,10 +232,12 @@ export class AnimationCurve {
         };
     }
 
-    fromJSON({ keys }) {
+    fromJSON({ keys = [] }) {
         this.clear();
 
-        for (let i = 0; i < keys.length; i++) {
+        const key_count = keys.length;
+
+        for (let i = 0; i < key_count; i++) {
 
             const keyframe = new Keyframe();
 

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

@@ -52,13 +52,21 @@ test("evaluate on empty curve", () => {
     expect(curve.evaluate(0)).toBe(0);
 });
 
-test("evaluate before first frame", () => {
+test("evaluate before first frame, 1 frame curve", () => {
     const curve = new AnimationCurve();
 
     curve.add(Keyframe.from(1, 7));
 
     expect(curve.evaluate(0.9)).toEqual(7);
 });
+test("evaluate before first frame, 2 frame curve", () => {
+    const curve = new AnimationCurve();
+
+    curve.add(Keyframe.from(1, 7));
+    curve.add(Keyframe.from(2, 10));
+
+    expect(curve.evaluate(0.9)).toEqual(7);
+});
 
 test("sample linear curve with 2 points", () => {
     const curve = new AnimationCurve();

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

@@ -1,10 +1,15 @@
+import Entity from "../../../ecs/Entity.js";
+import GUIElement from "../../../ecs/gui/GUIElement.js";
 import GUIElementSystem from "../../../ecs/gui/GUIElementSystem.js";
+import ViewportPosition from "../../../ecs/gui/position/ViewportPosition.js";
 import ViewportPositionSystem from "../../../ecs/gui/position/ViewportPositionSystem.js";
 import { EngineConfiguration } from "../../../EngineConfiguration.js";
 import { EngineHarness } from "../../../EngineHarness.js";
 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 { 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";
 
@@ -134,22 +139,26 @@ async function main(engine) {
         return curve;
     }
 
-    const curve = sample_curve_0();
+    // const curve = sample_curve_0();
 
-    curve.smoothAllTangents();
+    // curve.smoothAllTangents();
+
+    const curve = CURVE_EASE_OUT;
 
     const ecd = engine.entityManager.dataset;
 
-    build_error_scale(ecd, curve);
+    // build_error_scale(ecd, curve);
+
+    console.log(curve);
+
+    const editor_view = build_curve_editor({ curve });
 
-    // const editor_view = build_curve_editor({ curve });
-    //
-    // new EntityBuilder()
-    //     .add(ViewportPosition.fromJSON({
-    //         offset: { x: 0, y: 0 }
-    //     }))
-    //     .add(GUIElement.fromView(editor_view))
-    //     .build(ecd);
+    new Entity()
+        .add(ViewportPosition.fromJSON({
+            offset: { x: 0, y: 0 }
+        }))
+        .add(GUIElement.fromView(editor_view))
+        .build(ecd);
 
 }
 

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

@@ -0,0 +1,26 @@
+import { max2 } from "../../../core/math/max2.js";
+import { min2 } from "../../../core/math/min2.js";
+
+/**
+ *
+ * @param {AABB2} out
+ * @param {AnimationCurve} curve
+ */
+export function compute_curve_aabb(out, curve) {
+    let x0 = Number.POSITIVE_INFINITY;
+    let x1 = Number.NEGATIVE_INFINITY;
+    let y0 = Number.POSITIVE_INFINITY;
+    let y1 = Number.NEGATIVE_INFINITY;
+
+    for (let i = 0; i < curve.keys.length; i++) {
+        const keyframe = curve.keys[i];
+
+        x0 = min2(x0, keyframe.time)
+        x1 = max2(x1, keyframe.time)
+
+        y0 = min2(y0, keyframe.value);
+        y1 = max2(y1, keyframe.value);
+    }
+
+    out.set(x0, y0, x1, y1);
+}

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

@@ -1,38 +1,19 @@
-import Vector2 from "../../../../core/geom/Vector2.js";
-import EmptyView from "../../../../view/elements/EmptyView.js";
-import { CanvasView } from "../../../../view/elements/CanvasView.js";
-import AABB2 from "../../../../core/geom/2d/aabb/AABB2.js";
 import Signal from "../../../../core/events/signal/Signal.js";
+import AABB2 from "../../../../core/geom/2d/aabb/AABB2.js";
+import Vector2 from "../../../../core/geom/Vector2.js";
 import ObservedValue from "../../../../core/model/ObservedValue.js";
-import { sample_animation_curve_to_float_array } from "../compression/sample_animation_curve_to_float_array.js";
-import { plot_data } from "./plot_data.js";
+import { number_pretty_print } from "../../../../core/primitives/numbers/number_pretty_print.js";
+import LabelView from "../../../../view/common/LabelView.js";
+import { CSS_ABSOLUTE_POSITIONING } from "../../../../view/CSS_ABSOLUTE_POSITIONING.js";
+import { CanvasView } from "../../../../view/elements/CanvasView.js";
+import EmptyView from "../../../../view/elements/EmptyView.js";
+import { canvas2d_plot_data_line } from "../../../graphics/canvas/canvas2d_plot_data_line.js";
+import { MouseEvents } from "../../../input/devices/events/MouseEvents.js";
+import { readPositionFromMouseEvent } from "../../../input/devices/PointerDevice.js";
 import { DraggableAspect } from "../../../ui/DraggableAspect.js";
-import { min2 } from "../../../../core/math/min2.js";
-import { max2 } from "../../../../core/math/max2.js";
-
-/**
- *
- * @param {AABB2} out
- * @param {AnimationCurve} curve
- */
-function compute_curve_aabb(out, curve) {
-    let x0 = Number.POSITIVE_INFINITY;
-    let x1 = Number.NEGATIVE_INFINITY;
-    let y0 = Number.POSITIVE_INFINITY;
-    let y1 = Number.NEGATIVE_INFINITY;
-
-    for (let i = 0; i < curve.keys.length; i++) {
-        const keyframe = curve.keys[i];
-
-        x0 = min2(x0, keyframe.time)
-        x1 = max2(x1, keyframe.time)
-
-        y0 = min2(y0, keyframe.value);
-        y1 = max2(y1, keyframe.value);
-    }
-
-    out.set(x0, y0, x1, y1);
-}
+import { sample_animation_curve_to_float_array } from "../compression/sample_animation_curve_to_float_array.js";
+import { compute_curve_aabb } from "../compute_curve_aabb.js";
+import { Keyframe } from "../Keyframe.js";
 
 /**
  *
@@ -85,16 +66,20 @@ function position_canvas_to_curve(size, frame, margin, x, y) {
  *
  * @param {AnimationCurve} curve
  * @param {Vector2} [size]
- * @param {Vector2} [margin]
+ * @param {Vector2} [margin] How much space to leave empty around the plotted bounds
  * @returns {View}
  */
 export function build_curve_editor({
                                        curve,
-                                       size = new Vector2(600, 200),
-                                       margin = new Vector2(8, 36)
+                                       size = new Vector2(300, 300),
+                                       margin = new Vector2(36, 36)
                                    }) {
 
-    const vContainer = new EmptyView();
+    const vContainer = new EmptyView({
+        css: {
+            pointerEvents: "auto"
+        }
+    });
 
     const graph = new CanvasView();
     graph.size.copy(size);
@@ -109,6 +94,16 @@ export function build_curve_editor({
      */
     const active_keyframe = new ObservedValue(null);
 
+    const vCoordinate = new LabelView("", {
+        css: {
+            ...CSS_ABSOLUTE_POSITIONING,
+            zIndex: 1000,
+            background: `rgba(0, 0, 0, 0.4)`,
+            padding: '4px 6px',
+            color: 'white',
+            font: '12px Tahoma, monospaced'
+        }
+    });
 
     function handle_curve_update() {
         compute_curve_aabb(frame, curve);
@@ -125,13 +120,14 @@ export function build_curve_editor({
 
         sample_animation_curve_to_float_array(data, 0, curve, data.length);
 
-        plot_data({
+        canvas2d_plot_data_line({
             data,
             ctx: graph.context2d,
             width: width,
             height: graph.size.y,
             margin: margin,
-            range_y: [frame.y0, frame.y1]
+            range_y: [frame.y0, frame.y1],
+            range_x: [frame.x0, frame.x1],
         });
     }
 
@@ -218,11 +214,17 @@ export function build_curve_editor({
                     position.y
                 );
 
-                console.log(keyframe_coord);
+                // console.log(keyframe_coord);
 
                 keyframe.time = keyframe_coord.x;
                 keyframe.value = keyframe_coord.y;
 
+                vCoordinate.updateText(`${number_pretty_print(keyframe_coord.x)}, ${number_pretty_print(keyframe_coord.y)}`);
+                vCoordinate.position.set(
+                    position.x,
+                    position.y - 24
+                );
+
                 let keyframe_index = curve.keys.indexOf(keyframe);
 
                 if (keyframe_index < (curve.keys.length - 1) && keyframe.time > curve.keys[keyframe_index + 1].time) {
@@ -243,12 +245,15 @@ export function build_curve_editor({
                     keyframe_index = prev_index;
                 }
 
+                curve.alignTangents(keyframe_index);
                 curve.smoothTangents(keyframe_index, 1);
 
                 if (keyframe_index > 0) {
+                    curve.alignTangents(keyframe_index - 1);
                     curve.smoothTangents(keyframe_index - 1, 1);
                 }
                 if (keyframe_index < curve.keys.length - 1) {
+                    curve.alignTangents(keyframe_index + 1);
                     curve.smoothTangents(keyframe_index + 1, 1);
                 }
 
@@ -261,15 +266,33 @@ export function build_curve_editor({
                 previous.copy(position);
 
                 active_keyframe.set(keyframe);
+
+                vContainer.addChild(vCoordinate);
             },
             dragEnd() {
                 handle_curve_update();
+
+                vContainer.removeChild(vCoordinate);
             }
         });
 
-        draggable.getPointer().on.tap.add(() => {
-            active_keyframe.set(keyframe);
-        });
+        draggable.getPointer().on.tap.add(
+            /**
+             *
+             * @param position
+             * @param {MouseEvent} event
+             */
+            (position, event) => {
+                // make active
+                active_keyframe.set(keyframe);
+
+                if (event.ctrlKey) {
+                    // remove
+                    curve.remove(keyframe);
+                    remove_keyframe(keyframe);
+                    update_graph();
+                }
+            });
 
         marker.on.linked.add(draggable.start, draggable);
         marker.on.unlinked.add(draggable.stop, draggable);
@@ -307,6 +330,23 @@ export function build_curve_editor({
         curve.keys.forEach(remove_keyframe);
     });
 
+    vContainer.el.addEventListener(MouseEvents.DoubleClick, (e) => {
+
+        const mouse_position = new Vector2();
+
+        readPositionFromMouseEvent(mouse_position, e, vContainer.el);
+
+        const curve_position = position_canvas_to_curve(graph.size, frame, margin, mouse_position.x, mouse_position.y);
+
+        const key = Keyframe.from(curve_position.x, curve_position.y);
+        const key_index = curve.add(key);
+
+        curve.alignTangents(key_index);
+        curve.smoothTangents(key_index, 1);
+
+        add_keyframe(key);
+        update_graph();
+    });
 
     graph.on.linked.add(handle_curve_update);
 

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

@@ -3,8 +3,8 @@ import { CanvasView } from "../../../../view/elements/CanvasView.js";
 import Entity from "../../../ecs/Entity.js";
 import GUIElement from "../../../ecs/gui/GUIElement.js";
 import ViewportPosition from "../../../ecs/gui/position/ViewportPosition.js";
-import { draw_label } from "./draw_label.js";
-import { plot_data } from "./plot_data.js";
+import { canvas2d_draw_label } from "../../../graphics/canvas/canvas2d_draw_label.js";
+import { canvas2d_plot_data_line } from "../../../graphics/canvas/canvas2d_plot_data_line.js";
 
 /**
  *
@@ -35,13 +35,13 @@ export function build_plot_entity_from_array({
     });
     const ctx = canvasView.context2d;
 
-    plot_data({ ctx, data, width, height, margin });
+    canvas2d_plot_data_line({ ctx, data, width, height, margin });
 
     const text = `${data.length}`;
-    draw_label(ctx, text, margin.x, height - (20));
+    canvas2d_draw_label({ ctx: ctx, text: text, x: margin.x, y: height - (20) });
 
     if (typeof label === "string" && label.length > 0) {
-        draw_label(ctx, label, width - margin.x - 50 , 20)
+        canvas2d_draw_label({ ctx: ctx, text: label, x: width - margin.x - 50, y: 20 })
     }
 
     return new Entity()

package/src/engine/animation/curve/preset/CURVE_EASE_IN.js

@@ -0,0 +1,8 @@
+import { AnimationCurve } from "../AnimationCurve.js";
+import { Keyframe } from "../Keyframe.js";
+
+export const CURVE_EASE_IN =  Object.freeze(AnimationCurve.from([
+    Keyframe.from(0,0,0,0),
+    Keyframe.from(1,1,Math.PI,1),
+]))
+

package/src/engine/animation/curve/preset/CURVE_EASE_IN_OUT.js

@@ -0,0 +1,7 @@
+import { AnimationCurve } from "../AnimationCurve.js";
+import { Keyframe } from "../Keyframe.js";
+
+export const CURVE_EASE_IN_OUT = Object.freeze(AnimationCurve.from([
+    Keyframe.from(0, 0, 0, 0),
+    Keyframe.from(1, 1, 0, 0),
+]))

package/src/engine/animation/curve/preset/CURVE_EASE_OUT.js

@@ -0,0 +1,7 @@
+import { AnimationCurve } from "../AnimationCurve.js";
+import { Keyframe } from "../Keyframe.js";
+
+export const CURVE_EASE_OUT = Object.freeze(AnimationCurve.from([
+    Keyframe.from(0, 0, Math.PI, 1),
+    Keyframe.from(1, 1, 0, 0),
+]))

package/src/engine/asset/loaders/image/png/PNGReader.js

@@ -9,6 +9,25 @@ import { crc } from "./crc.js";
 import { PNG } from './PNG.js';
 import { PNG_HEADER_BYTES } from "./PNG_HEADER_BYTES.js";
 
+/**
+ *
+ * @param {Uint8Array} encoded_chunk
+ * @returns {ArrayBuffer}
+ */
+function inflate(encoded_chunk) {
+    const inflator = new zlib.Inflate();
+
+
+    inflator.push(encoded_chunk);
+
+    if (inflator.err) {
+        throw new Error(inflator.err);
+    }
+
+
+    return inflator.result.buffer;
+}
+
 /**
  *
  * @param {Uint8Array} buffer
@@ -162,8 +181,18 @@ PNGReader.prototype.decodeChunk = function () {
         case 'sRGB':
             this.decodesRGB(chunk);
             break;
+        case 'tIME':
+            this.decodetIME(chunk);
+            break;
+        case 'zTXt':
+            this.decodezTXt(chunk);
+            break;
+        case 'iTXt':
+            this.decodeiTXt(chunk);
+            break;
         default:
-            console.warn(`Unsupported block ${type}`);
+            // skip unknown block
+            // console.warn(`Unsupported block ${type}`);
             break;
     }
 
@@ -183,6 +212,95 @@ PNGReader.prototype.decodesRGB = function (chunk) {
     // TODO add metadata to the PNG representation
 }
 
+/**
+ * https://www.w3.org/TR/2003/REC-PNG-20031110/#11tIME
+ * @param {Uint8Array} chunk
+ */
+PNGReader.prototype.decodetIME = function (chunk) {
+    const year_high = readUInt8(chunk, 0);
+    const year_low = readUInt8(chunk, 1);
+
+    const year = (year_high << 8) | year_low;
+
+    const month = readUInt8(chunk, 2);
+    const day = readUInt8(chunk, 3);
+    const hour = readUInt8(chunk, 4);
+    const minute = readUInt8(chunk, 5);
+    const second = readUInt8(chunk, 6);
+}
+
+/**
+ * International textual data
+ * @see https://www.w3.org/TR/2003/REC-PNG-20031110/
+ * @param {Uint8Array} chunk
+ */
+PNGReader.prototype.decodeiTXt = function (chunk) {
+    const buffer = BinaryBuffer.fromArrayBuffer(chunk.buffer);
+    const keyword = buffer.readASCIICharacters(79, true);
+    const compression_flag = buffer.readUint8();
+    const compression_method = buffer.readUint8();
+
+    const language_tag = buffer.readASCIICharacters(Infinity, true);
+    const translated_keyword = buffer.readASCIICharacters(Infinity, true);
+
+    const remaining_bytes = buffer.data.length - buffer.position;
+
+    let text;
+
+    if (compression_flag === 0) {
+        text = buffer.readASCIICharacters(remaining_bytes);
+    } else if (compression_flag === 1) {
+        const decoded = inflate(new Uint8Array(buffer.data, buffer.position, remaining_bytes));
+
+        buffer.fromArrayBuffer(decoded);
+
+        text = buffer.readASCIICharacters(decoded.byteLength);
+    } else {
+        throw new Error(`Invalid compression flag value '${compression_flag}'`);
+    }
+
+    return {
+        keyword,
+        language_tag,
+        translated_keyword,
+        text
+    }
+}
+
+
+/**
+ * Compressed textual data
+ * @see https://www.w3.org/TR/2003/REC-PNG-20031110/#11zTXt
+ * @param {Uint8Array} chunk
+ */
+PNGReader.prototype.decodezTXt = function (chunk) {
+    const buffer = BinaryBuffer.fromArrayBuffer(chunk.buffer);
+
+    const keyword = buffer.readASCIICharacters(79, true);
+
+    const compression_method = buffer.readUint8();
+
+    let value;
+
+    if (compression_method === 0) {
+        // deflate method
+
+        const encoded_chunk = new Uint8Array(chunk.buffer, buffer.position);
+
+        const decompressed_data = inflate(encoded_chunk);
+
+        buffer.fromArrayBuffer(decompressed_data);
+
+        value = buffer.readASCIICharacters(decompressed_data.length);
+    } else {
+        throw new Error(`Unsupported compression method '${compression_method}'`);
+    }
+
+    return {
+        keyword: keyword,
+        text: value
+    }
+}
 
 /**
  * https://www.w3.org/TR/PNG/#11tEXt