Path points to path segments

by Konstantin Cryman

HTML

width: <input type="range" min="5" max="50" value="20" id="segment_width"><br>
length: <input type="range" min="50" max="500" value="20" id="segment_length" hidden="true"><br>
<canvas id="TEST_CAN" style="border: 1px solid #333333"></canvas>

JavaScript

// define Canvas
const can = document.getElementById( 'TEST_CAN' );
can.width = 512;
can.height = 512;
const ctx = can.getContext( '2d' );

//define buttons
const button_segment_width = document.getElementById( 'segment_width' );
const button_segment_length = document.getElementById( 'segment_length' );

const math_lerpV2lerpV2 = (v1, v2, alpha) => ({
    x: v1.x + (v2.x - v1.x) * alpha,
    y: v1.y + (v2.y - v1.y) * alpha,
});

const math_getDistanceV2 = ( v1, v2 ) => {
    var a = v1.x - v2.x;
    var b = v1.y - v2.y;
    return Math.sqrt( a*a + b*b );
};

const math_getAngleBetweenTwoPoints = ( p1, p2 ) => {
    return Math.atan2(p2.y - p1.y, p2.x - p1.x);
};
  
const math_getPointRelativeCenterByAngle = ( angle, radius, center ) => {
    const distalX =  radius * Math.cos( angle );
    const distalY =  radius * Math.sin( angle );
    return {
        x: distalX + center.x,
        y: distalY + center.y
    };
};

// drawing state
let CURSOR_POSITION = { x: 0, y: 0 };
let DRAWING = true;

class LinePath {
    
    constructor( globalPoints = [], SEGMENT_POINTS_LENGTH = 70, SEGMENT_POINTS_WIDTH = 30 ){

        this.PATH_POINTS = globalPoints;
        this.PATH_GLOBAL_SEGMENTS = [];
        this.PATH_SEGMENTS = [];
        this.PATH_POLYGONS = [];

        this.SEGMENT_POINTS_LENGTH = SEGMENT_POINTS_LENGTH;
        this.SEGMENT_POINTS_WIDTH = SEGMENT_POINTS_WIDTH;

    }

    clear(){
        this.PATH_POINTS = [];
    }

    addPoint( { x, y } ){
        this.PATH_POINTS.push( { x, y } );
        this.extract_PATH_SEGMENTS_from_PATH_POINTS();
    }

    extract_PATH_SEGMENTS_from_PATH_POINTS(){
        
        this.PATH_SEGMENTS = [];
        if( this.PATH_POINTS.length < 2 ){
            return null;
        }
        this.PATH_GLOBAL_SEGMENTS = [];
    
        // segments factory
    
        // compute global segments
        for( let i = 1; i < this.PATH_POINTS.length; i++ ){
            const nextGlobalSegment = new LineSegment( this.PATH_POINTS[ i-1 ],...