@woosh/meep-engine/src/engine/animation/curve/editor/canvas2dPlotCurvePoints.js

Pure JavaScript game engine. Fully featured and production ready.

import {Vector2} from "three";

/**
 *
 * @param {CanvasRenderingContext2D} ctx
 * @param {AnimationCurve} curve
 * @param {Vector2} dimension
 * @param {Vector2} offset
 * @param {number[]} rangeX
 * @param {number[]} rangeY
 */
export function canvas2dPlotCurvePoints({
                                            ctx,
                                            curve,
                                            dimension,
                                            offset,
                                            rangeX= [0, 1],
                                            rangeY= [0, 1]
                                        }) {
    const keyframes = curve.keys;
    // No data
    if (keyframes.length === 0)
        return;

    const [minX, maxX] = rangeX;
    const [minY, maxY] = rangeY;

    const firstKeyTime = keyframes[0].time;
    const lastKeyTime = keyframes[keyframes.length - 1].time;

    const axisSize = new Vector2(
        dimension.x - offset.x * 2,
        dimension.y - offset.y * 2
    );

    const timeRange = maxX - minX
    const valueRange = maxY - minY

    const inverseTimeRange = timeRange !== 0 ? 1 / timeRange : 0;
    const inverseValueRange = valueRange !== 0 ? 1 / valueRange : 0;

    const pixelCountX = Math.max(axisSize.x - 1 , 1);
    const timeStep = timeRange * (1 / pixelCountX)

    ctx.beginPath();
    let started = false
    const offScreenMargin = 50
    for (let i = 0; i < dimension.x; i++) {
        const t = minX + (i * timeStep) - (offset.x * timeStep);
        if (t < firstKeyTime || t > lastKeyTime)
            continue;

        const value = curve.evaluate(t);

        const normY = (value - minY) * inverseValueRange
        const normX = (t - minX) * inverseTimeRange

        const y = (1 - normY) * axisSize.y + offset.y
        const x = normX * axisSize.x + offset.x

        if (x >= -offScreenMargin && !started) {
            ctx.moveTo(x, y);
            started = true
        }
        else
            ctx.lineTo(x,y);
    }
    ctx.stroke()
}