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

Pure JavaScript game engine. Fully featured and production ready.

import Vector2 from "../../../../core/geom/Vector2.js";
import {canvas2dPlotCurvePoints} from "./canvas2dPlotCurvePoints.js";
import {canvas2dDrawWorldAxisLabels} from "./canvas2dDrawWorldAxisLabels.js";
import {canvas2dDrawWorldGrid} from "./canvas2dDrawWorldGrid.js";

/**
 *
 * @param {CanvasRenderingContext2D} ctx
 * @param {AnimationCurve} curve
 * @param {Vector2} [margin]
 * @param {number} width
 * @param {number} height
 * @param {number[]} [range_y]
 * @param {number[]} range_x
 * @param {number} spacing
 */
export function canvas2dPlotCurveLine({
                                            ctx,
                                            curve,
                                            margin = Vector2.zero,
                                            width,
                                            height,
                                            range_y,
                                            range_x,
                                            spacing= 32
                                        }) {

    ctx.fillStyle = '#222222';
    ctx.fillRect(0, 0, width, height);

    const dataX0 = range_x[0];
    const dataX1 = range_x[1];
    const dataY0 = range_y[0];
    const dataY1 = range_y[1];

    canvas2dDrawWorldGrid({
        ctx,
        width,
        height,
        color: '#262626',
        spacingX: spacing * 0.25,
        spacingY: spacing * 0.25,
        offsetX: margin.x,
        offsetY: margin.y,
        valueRangeX: range_x,
        valueRangeY: range_y
    })
    canvas2dDrawWorldGrid({
        ctx,
        width,
        height,
        color: '#303030',
        spacingX: spacing,
        spacingY: spacing,
        offsetX: margin.x,
        offsetY: margin.y,
        valueRangeX: range_x,
        valueRangeY: range_y
    })

    const plotWidth = width - margin.x * 2;

    const xPixelPerUnit = plotWidth / (dataX1 - dataX0);
    const xStepPerGrid = spacing / xPixelPerUnit; // convert pixel spacing → world spacing

    const xLabelSkip = 2; // draw every 2nd grid line
    const xStepPerLabel = xStepPerGrid * xLabelSkip;

    const xFirstLabel = Math.ceil(dataX0 / xStepPerLabel) * xStepPerLabel;
    const xFirstLabelPixel = (xFirstLabel - dataX0) * xPixelPerUnit;
    canvas2dDrawWorldAxisLabels({
        ctx,
        position_x0: margin.x + xFirstLabelPixel,
        position_x1: width - margin.x,
        position_y0: height - 4,
        position_y1: height - 4,
        spacing: spacing * xLabelSkip,  // pixels between labels
        value_0: xFirstLabel,           // world value for first label
        value_1: dataX1,
        valueStep: xStepPerLabel,       // world units per label
    });

    const plotHeight = height - margin.y * 2;

    const yPixelPerUnit = plotHeight / (dataY1 - dataY0);
    const yStepPerGrid = spacing / yPixelPerUnit; // convert pixel spacing → world spacing

    const yLabelSkip = 2; // draw every 2nd grid line
    const yStepPerLabel = yStepPerGrid * yLabelSkip;

    const yFirstLabel = Math.ceil(dataY0 / yStepPerLabel) * yStepPerLabel;
    const yFirstLabelPixel = (dataY1 - yFirstLabel) * yPixelPerUnit;
    canvas2dDrawWorldAxisLabels({
        ctx,
        position_x0: 4,
        position_x1: 4,
        position_y0: margin.y + yFirstLabelPixel,
        position_y1: margin.y,
        spacing: spacing * yLabelSkip,  // pixels between labels
        value_0: yFirstLabel,           // world value for first label
        value_1: dataY1,
        valueStep: yStepPerLabel,       // world units per label
    });

    ctx.fillStyle = 'none';
    ctx.strokeStyle = '#00ff00';
    ctx.lineWidth = 1;
    canvas2dPlotCurvePoints({
        ctx,
        curve,
        dimension: new Vector2(width, height),
        offset: new Vector2(margin.x, margin.y),
        rangeX: range_x,
        rangeY: range_y
    });
}