@woosh/meep-engine 2.36.0 → 2.36.4

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

@@ -0,0 +1,154 @@
+import { EngineHarness } from "../../../EngineHarness.js";
+import { AnimationCurve } from "../AnimationCurve.js";
+import { Keyframe } from "../Keyframe.js";
+import { EngineConfiguration } from "../../../EngineConfiguration.js";
+import GUIElementSystem from "../../../ecs/gui/GUIElementSystem.js";
+import ViewportPositionSystem from "../../../ecs/gui/position/ViewportPositionSystem.js";
+import { animation_curve_to_float_array } from "./animation_curve_to_float_array.js";
+import { downsample_float_array_curve_by_error } from "./downsample_float_array_curve_by_error.js";
+import { build_plot_entity_from_array } from "../draw/build_plot_entity_from_array.js";
+
+const eh = new EngineHarness();
+
+async function init() {
+
+    const config = new EngineConfiguration();
+
+    const engine = eh.engine;
+
+    config.addSystem(new GUIElementSystem(engine.gameView, engine));
+    config.addSystem(new ViewportPositionSystem(engine.gameView.size));
+
+    await config.apply(engine);
+
+    await eh.initialize();
+
+    main(engine);
+}
+
+function build_error_scale(ecd, curve) {
+    const curve_data = [];
+    animation_curve_to_float_array(curve_data, curve, 0, 256);
+
+
+    build_plot_entity_from_array({
+        data: curve_data,
+        x: 10, y: 0
+    }).build(ecd);
+
+    const compressed_01 = [];
+    downsample_float_array_curve_by_error(compressed_01, 0, curve_data, 0, curve_data.length, 0.01);
+
+    build_plot_entity_from_array({
+        data: compressed_01,
+        x: 10, y: 202,
+        label: '1%'
+    }).build(ecd);
+
+    const compressed_03 = [];
+    downsample_float_array_curve_by_error(compressed_03, 0, curve_data, 0, curve_data.length, 0.03);
+
+    build_plot_entity_from_array({
+        data: compressed_03,
+        x: 10, y: 404,
+        label: '3%'
+    }).build(ecd);
+
+    const compressed_05 = [];
+    downsample_float_array_curve_by_error(compressed_05, 0, curve_data, 0, curve_data.length, 0.05);
+
+    build_plot_entity_from_array({
+        data: compressed_05,
+        x: 10, y: 606,
+        label: '5%'
+    }).build(ecd);
+
+    const compressed_10 = [];
+    downsample_float_array_curve_by_error(compressed_10, 0, curve_data, 0, curve_data.length, 0.10);
+
+    build_plot_entity_from_array({
+        data: compressed_10,
+        x: 10, y: 808,
+        label: '10%'
+    }).build(ecd);
+}
+
+async function main(engine) {
+
+    // EngineHarness.buildBasics({ engine });
+    function sample_curve_0() {
+
+        const curve = new AnimationCurve();
+
+        curve.keys.push(Keyframe.from(0, 0));
+        curve.keys.push(Keyframe.from(1, 1));
+        curve.keys.push(Keyframe.from(2, 0.5));
+
+        return curve;
+    }
+
+    function sample_curve_1() {
+
+        const curve = new AnimationCurve();
+
+        curve.keys.push(Keyframe.from(0, 0));
+        curve.keys.push(Keyframe.from(0.1, 1));
+        curve.keys.push(Keyframe.from(2, 0.5));
+
+        return curve;
+    }
+
+    function sample_curve_2() {
+
+        const curve = new AnimationCurve();
+
+        curve.keys.push(Keyframe.from(0, 1));
+        curve.keys.push(Keyframe.from(1, 2));
+        curve.keys.push(Keyframe.from(2, 3));
+        curve.keys.push(Keyframe.from(3, 4));
+
+        return curve;
+    }
+
+    function sample_curve_3() {
+
+        const curve = new AnimationCurve();
+
+        curve.keys.push(Keyframe.from(0, 1));
+        curve.keys.push(Keyframe.from(1, 1));
+        curve.keys.push(Keyframe.from(2, 1));
+        curve.keys.push(Keyframe.from(3, 1));
+
+        return curve;
+    }
+
+    function sample_curve_4() {
+
+        const curve = new AnimationCurve();
+
+        curve.keys.push(Keyframe.from(0, 1, 0, 1));
+        // curve.keys.push(Keyframe.from(1, 2, 1, -1));
+        curve.keys.push(Keyframe.from(1, 2, -1, 1));
+        curve.keys.push(Keyframe.from(2, 1));
+
+        return curve;
+    }
+
+    const curve = sample_curve_2();
+
+    const ecd = engine.entityManager.dataset;
+
+    build_error_scale(ecd, 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);
+
+}
+
+init();

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

@@ -0,0 +1,316 @@
+import Vector2 from "../../../../core/geom/Vector2.d.ts";
+import EmptyView from "../../../../view/elements/EmptyView.js";
+import { CanvasView } from "../../../../view/elements/CanvasView.js";
+import AABB2 from "../../../../core/geom/AABB2.d.ts";
+import Signal from "../../../../core/events/signal/Signal.d.ts";
+import ObservedValue from "../../../../core/model/ObservedValue.js";
+import { animation_curve_to_float_array } from "../compression/animation_curve_to_float_array.js";
+import { plot_data } from "./plot_data.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);
+}
+
+/**
+ *
+ * @param {Vector2} size
+ * @param {AABB2} frame
+ * @param {Vector2} margin
+ * @param {number} x
+ * @param {number} y
+ * @return {Vector2}
+ */
+function position_curve_to_canvas(size, frame, margin, x, y) {
+    const width = size.x;
+    const height = size.y;
+
+    const curve_width = frame.getWidth();
+    const curve_width_multiplier = curve_width > 0 ? 1 / curve_width : 0;
+    const u = (x - frame.x0) * curve_width_multiplier;
+
+    const curve_height = frame.getHeight();
+    const curve_height_multiplier = curve_height > 0 ? 1 / curve_height : 0;
+    const v = 1 - (y - frame.y0) * curve_height_multiplier;
+
+    return new Vector2(margin.x + (u * (width - margin.x * 2)), margin.y + v * (height - margin.y * 2));
+}
+
+/**
+ *
+ * @param {Vector2} size
+ * @param {AABB2} frame
+ * @param {Vector2} margin
+ * @param {number} x
+ * @param {number} y
+ * @return {Vector2}
+ */
+function position_canvas_to_curve(size, frame, margin, x, y) {
+
+    const width = size.x;
+    const height = size.y;
+
+    const u = (x - margin.x) / (width - margin.x * 2);
+    const v = 1 - (y - margin.y) / (height - margin.y * 2);
+
+    return new Vector2(
+        u * frame.getWidth() + frame.x0,
+        v * frame.getHeight() + frame.y0
+    );
+}
+
+/**
+ *
+ * @param {AnimationCurve} curve
+ * @param {Vector2} [size]
+ * @param {Vector2} [margin]
+ * @returns {View}
+ */
+export function build_curve_editor({
+                                       curve,
+                                       size = new Vector2(600, 200),
+                                       margin = new Vector2(8, 36)
+                                   }) {
+
+    const vContainer = new EmptyView();
+
+    const graph = new CanvasView();
+    graph.size.copy(size);
+
+    const frame = new AABB2();
+
+    const frame_updated = new Signal();
+
+    /**
+     *
+     * @type {ObservedValue<Keyframe>}
+     */
+    const active_keyframe = new ObservedValue(null);
+
+
+    function handle_curve_update() {
+        compute_curve_aabb(frame, curve);
+
+        frame_updated.send0();
+
+        update_graph();
+    }
+
+
+    function update_graph() {
+        const width = graph.size.x;
+        const data = new Float32Array(width);
+
+        animation_curve_to_float_array(data, curve, 0, data.length);
+
+        plot_data({
+            data,
+            ctx: graph.context2d,
+            width: width,
+            height: graph.size.y,
+            margin: margin,
+            range_y: [frame.y0, frame.y1]
+        });
+    }
+
+    const keyframe_views = new Map();
+
+    function add_keyframe(keyframe) {
+        const vContainerMarker = new EmptyView({
+            css: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                pointerEvents: "none"
+            }
+        });
+
+        const marker_size = 8;
+        const marker = new EmptyView({
+            css: {
+                width: `${marker_size}px`,
+                height: `${marker_size}px`,
+                background: "#00ff00",
+                border: "none",
+                position: "absolute",
+                top: `-${marker_size / 2}px`,
+                left: `-${marker_size / 2}px`,
+                pointerEvents: "auto",
+                borderRadius: `${marker_size}px`
+            }
+        });
+
+        // add extra element for mouse event capture to make it easier to click on the marker
+        const marker_hit_pad_size = 24;
+        marker.addChild(new EmptyView({
+            css: {
+                opacity: 0,
+                width: `${marker_hit_pad_size}px`,
+                height: `${marker_hit_pad_size}px`,
+                borderRadius: `${marker_hit_pad_size}px`,
+                // background: 'rgba(255,0,0,0.2)',
+                position: "absolute",
+                top: `-${(marker_hit_pad_size - marker_size) / 2}px`,
+                left: `-${(marker_hit_pad_size - marker_size) / 2}px`
+            }
+        }))
+
+        function updatePosition() {
+            const canvas_coordinates = position_curve_to_canvas(
+                graph.size,
+                frame,
+                margin,
+                keyframe.time,
+                keyframe.value
+            );
+            vContainerMarker.position.copy(canvas_coordinates);
+        }
+
+        function updateActiveState() {
+            if (active_keyframe.get() === keyframe) {
+                marker.css({
+                    background: '#FFFFFF'
+                });
+            } else {
+                marker.css({
+                    background: '#00ff00'
+                });
+            }
+        }
+
+        updatePosition();
+
+        const marker_el = marker.el;
+
+        const previous = new Vector2();
+        const draggable = new DraggableAspect({
+            el: marker_el, drag(position) {
+                const delta = new Vector2();
+                delta.subVectors(position, previous);
+
+                const keyframe_coord = position_canvas_to_curve(
+                    graph.size,
+                    frame,
+                    margin,
+                    position.x,
+                    position.y
+                );
+
+                console.log(keyframe_coord);
+
+                keyframe.time = keyframe_coord.x;
+                keyframe.value = keyframe_coord.y;
+
+                let keyframe_index = curve.keys.indexOf(keyframe);
+
+                if (keyframe_index < (curve.keys.length - 1) && keyframe.time > curve.keys[keyframe_index + 1].time) {
+                    const next_index = keyframe_index + 1;
+                    const next = curve.keys[next_index];
+
+                    curve.keys[next_index] = keyframe;
+                    curve.keys[keyframe_index] = next;
+
+                    keyframe_index = next_index;
+                } else if (keyframe_index > 0 && keyframe.time < curve.keys[keyframe_index - 1].time) {
+                    const prev_index = keyframe_index - 1;
+                    const prev = curve.keys[prev_index];
+
+                    curve.keys[prev_index] = keyframe;
+                    curve.keys[keyframe_index] = prev;
+
+                    keyframe_index = prev_index;
+                }
+
+                curve.smoothTangents(keyframe_index, 1);
+
+                if (keyframe_index > 0) {
+                    curve.smoothTangents(keyframe_index - 1, 1);
+                }
+                if (keyframe_index < curve.keys.length - 1) {
+                    curve.smoothTangents(keyframe_index + 1, 1);
+                }
+
+                updatePosition();
+                update_graph();
+
+                previous.copy(position);
+            },
+            dragStart(position) {
+                previous.copy(position);
+
+                active_keyframe.set(keyframe);
+            },
+            dragEnd() {
+                handle_curve_update();
+            }
+        });
+
+        draggable.getPointer().on.tap.add(() => {
+            active_keyframe.set(keyframe);
+        });
+
+        marker.on.linked.add(draggable.start, draggable);
+        marker.on.unlinked.add(draggable.stop, draggable);
+
+        marker.bindSignal(frame_updated, updatePosition);
+        marker.bindSignal(active_keyframe.onChanged, updateActiveState);
+
+        // const vTangentEditor = build_tangent_editor({
+        //     keyframe: keyframe,
+        //     size: graph.size,
+        //     ctx: graph.context2d,
+        //     frame,
+        //     margin
+        // });
+        // vContainerMarker.addChild(vTangentEditor);
+
+        vContainerMarker.addChild(marker);
+
+        keyframe_views.set(keyframe, vContainerMarker);
+
+        vContainer.addChild(vContainerMarker);
+    }
+
+    function remove_keyframe(keyframe) {
+        const marker_view = keyframe_views.get(keyframe);
+
+        vContainer.removeChild(marker_view);
+    }
+
+    graph.on.linked.add(() => {
+        curve.keys.forEach(add_keyframe);
+    });
+
+    graph.on.unlinked.add(() => {
+        curve.keys.forEach(remove_keyframe);
+    });
+
+
+    graph.on.linked.add(handle_curve_update);
+
+    vContainer.addChild(graph);
+
+    return vContainer;
+}

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

@@ -0,0 +1,47 @@
+import { CanvasView } from "../../../../view/elements/CanvasView.js";
+import { plot_data } from "./plot_data.js";
+import { draw_label } from "./draw_label.js";
+import EntityBuilder from "../../../ecs/EntityBuilder.js";
+import ViewportPosition from "../../../ecs/gui/position/ViewportPosition.js";
+import GUIElement from "../../../ecs/gui/GUIElement.js";
+import Vector2 from "../../../../core/geom/Vector2.js";
+
+/**
+ *
+ * @param {number[]} data
+ * @param {number} x
+ * @param {number} y
+ * @param {number} [width]
+ * @param {number} [height]
+ * @param {Vector2} [margin]
+ * @param {string} [label]
+ * @return {EntityBuilder}
+ */
+export function build_plot_entity_from_array({
+                                                 data,
+                                                 x, y,
+                                                 width = 600,
+                                                 height = 200,
+                                                 margin = new Vector2(10,10),
+                                                 label = ''
+                                             }) {
+
+    const canvasView = new CanvasView();
+    canvasView.size.set(width, height);
+    const ctx = canvasView.context2d;
+
+    plot_data({ ctx, data, width, height, margin });
+
+    const text = `${data.length}`;
+    draw_label(ctx, text, margin.x, height - (20));
+
+    if (typeof label === "string" && label.length > 0) {
+        draw_label(ctx, label, 0, 0)
+    }
+
+    return new EntityBuilder()
+        .add(ViewportPosition.fromJSON({
+            offset: { x, y }
+        }))
+        .add(GUIElement.fromView(canvasView));
+}

package/engine/animation/curve/draw/build_tangent_editor.js

@@ -0,0 +1,115 @@
+import EmptyView from "../../../../view/elements/EmptyView.js";
+
+/**
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {Keyframe} keyframe
+ * @param {Vector2} size
+ * @param {AABB2} frame
+ * @param {Vector2} margin
+ */
+export function build_tangent_editor({
+                                  ctx,
+                                  keyframe,
+                                  size,
+                                  frame,
+                                  margin
+                              }) {
+
+    const scale = 36;
+
+
+    function build_handle() {
+
+        const marker_size = 4;
+        const marker = new EmptyView({
+            css: {
+                width: `${marker_size}px`,
+                height: `${marker_size}px`,
+                background: "#00ff00",
+                border: "none",
+                position: "absolute",
+                top: `-${marker_size / 2}px`,
+                left: `-${marker_size / 2}px`,
+                pointerEvents: "auto"
+            }
+        });
+
+        // add extra element for mouse event capture to make it easier to click on the marker
+        const marker_hit_pad_size = 24;
+        marker.addChild(new EmptyView({
+            css: {
+                opacity: 0,
+                width: `${marker_hit_pad_size}px`,
+                height: `${marker_hit_pad_size}px`,
+                borderRadius: `${marker_hit_pad_size}px`,
+                // background: 'rgba(255,0,0,0.2)',
+                position: "absolute",
+                top: `-${(marker_hit_pad_size - marker_size) / 2}px`,
+                left: `-${(marker_hit_pad_size - marker_size) / 2}px`
+            }
+        }))
+
+        return marker;
+    }
+
+    function build_tangent() {
+        const view = new EmptyView({
+            css: {
+                position: "absolute",
+                left: "0",
+                top: "0",
+                background: 'red'
+            }
+        });
+        view.position.set(-0.5, -0.5);
+        view.transformOrigin.set(0, 0.5);
+
+        return view;
+    }
+
+
+    const handle_in = build_handle();
+    const handle_out = build_handle();
+
+    const tangent_in = build_tangent();
+
+    const tangent_out = build_tangent();
+
+
+    function update_positions() {
+        tangent_in.size.set(scale, 1);
+        const angle_in = Math.PI - Math.atan2(keyframe.inTangent, 1);
+        tangent_in.rotation.set(angle_in);
+
+        tangent_out.size.set(scale, 1);
+        const angle_out = -Math.atan2(keyframe.outTangent, 1);
+        tangent_out.rotation.set(angle_out);
+
+        handle_in.position.set(
+            Math.cos(angle_in) * scale, Math.sin(angle_in) * scale
+        );
+
+        handle_out.position.set(
+            Math.cos(angle_out) * scale, Math.sin(angle_out) * scale
+        );
+    }
+
+    const vContainer = new EmptyView({
+        css: {
+            position: 'absolute',
+            left: 0,
+            top: 0
+        }
+    });
+
+    vContainer.addChild(handle_in);
+    vContainer.addChild(handle_out);
+
+    vContainer.addChild(tangent_in);
+    vContainer.addChild(tangent_out);
+
+    vContainer.on.linked.add(update_positions);
+
+    return vContainer;
+}

package/engine/animation/curve/draw/draw_grid.js

@@ -0,0 +1,27 @@
+/**
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {number} width
+ * @param {number} height
+ * @param {string} color
+ * @param {number} spacing
+ * @param {number} [offset_x]
+ * @param {number} [offset_y]
+ */
+export function draw_grid({ ctx, width, height, color = 'red', spacing = 10, offset_x = 0, offset_y = 0 }) {
+    ctx.fillStyle = 'none';
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = color;
+
+
+    ctx.beginPath();
+    for (let x = offset_x; x < width; x += spacing) {
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, height);
+    }
+    for (let y = offset_y; y < width; y += spacing) {
+        ctx.moveTo(0, y);
+        ctx.lineTo(width, y);
+    }
+    ctx.stroke();
+}

package/engine/animation/curve/draw/draw_label.js

@@ -0,0 +1,17 @@
+/**
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {string} text
+ * @param {number} x
+ * @param {number} y
+ */
+export function draw_label(ctx, text, x, y) {
+
+    ctx.fillStyle = 'white';
+    ctx.font = '10px Tahoma';
+
+    ctx.strokeStyle = `rgba(0, 0, 0, 0.5)`;
+    ctx.lineWidth = 2;
+    ctx.strokeText(text, x, y);
+    ctx.fillText(text, x, y);
+}