@woosh/meep-engine/src/engine/graphics/canvas/canvas2d_draw_linear_scale.js

Pure JavaScript game engine. Fully featured and production ready.

import { v2_length } from "../../../core/geom/vec2/v2_length.js";
import { lerp } from "../../../core/math/lerp.js";
import { number_pretty_print } from "../../../core/primitives/numbers/number_pretty_print.js";
import { canvas2d_draw_label } from "./canvas2d_draw_label.js";

/**
 *
 * @param {CanvasRenderingContext2D} ctx
 * @param {number} position_x0
 * @param {number} position_y0
 * @param {number} position_x1
 * @param {number} position_y1
 * @param {number} spacing
 * @param {number} value_0
 * @param {number} value_1
 * @param {string} [align] which side of the point should the text appear on
 */
export function canvas2d_draw_linear_scale({
                                               ctx,
                                               position_x0, position_y0,
                                               position_x1, position_y1,
                                               spacing = 10,
                                               value_0, value_1,
                                               align
                                           }) {

    if (spacing <= 0) {
        throw new Error(`Spacing must be greater than 0`);
    }

    // figure out direction vector
    const delta_x = position_x1 - position_x0;
    const delta_y = position_y1 - position_y0;

    const distance = v2_length(delta_x, delta_y);

    if (distance === 0) {
        throw new Error(`Distance must be greater than 0`);
    }

    const direction_x = delta_x / distance;
    const direction_y = delta_y / distance;

    const mark_count = Math.ceil(distance / spacing);

    for (let i = 0; i <= mark_count; i++) {

        const offset = spacing * i;

        const f = offset / distance;

        const point_x = position_x0 + direction_x * offset;
        const point_y = position_y0 + direction_y * spacing * i;

        const value = lerp(value_0, value_1, f);

        canvas2d_draw_label({
            ctx,
            text: number_pretty_print(value),
            x: point_x,
            y: point_y
        });
    }

}