SketchWave Arrow Class Reference

// swArrow.js
// SWArrow: A directed arrow class for SketchWaveJS
// Author: TechNoviceTools (TNT)
// Date: 2026-03-30
//
// Represents a directed arrow from a tail point (ptA) to a tip point (ptB).
// The shaft is a styled line; the arrowhead is a V formed by two barb lines.
// Supports breathing (length oscillation) and spinning (rotation) animations,
// consistent with the SWLine/SWDisk/SWWheel ecosystem.
//
// Constructor:
//   SWArrow(ptA, ptB, thickness, strokeColor, tipAngle, tipFactor)
//   - ptA        : SWPoint — tail (blunt end)
//   - ptB        : SWPoint — tip (arrowhead end)
//   - thickness  : number  — stroke weight in pixels (default 3)
//   - strokeColor: SWColor — stroke color (default undefined)
//   - tipAngle   : number  — half-angle of arrowhead barbs in degrees (default 25)
//   - tipFactor  : number  — barb length as fraction of total arrow length (default 0.3)
//
// Dependencies: SWColor, SWPoint, SWGrid, SWSinusoid, p5.js

console.log("[swArrow.js] SWArrow class loaded.");

class SWArrow {

    constructor(ptA, ptB, thickness = 3, strokeColor = undefined, tipAngle = 25, tipFactor = 0.3) {
        this.ptA = ptA;
        this.ptB = ptB;
        this.thickness = thickness;
        this.strokeColor = strokeColor;
        this.tipAngle = tipAngle;
        this.tipFactor = tipFactor;
        this.capStyle = 'ROUND';

        const dx0 = ptB.x - ptA.x;
        const dy0 = ptB.y - ptA.y;
        this.startAngleDeg = Math.atan2(dy0, dx0) * 180 / Math.PI;

        this.originalA = new SWPoint(ptA.x, ptA.y, ptA.z, ptA.strokeWeight, ptA.strokeColor);
        this.originalB = new SWPoint(ptB.x, ptB.y, ptB.z, ptB.strokeWeight, ptB.strokeColor);

        const midPtSize = Math.max(thickness * 2, 8);
        const midColor  = strokeColor
            ? new SWColor(strokeColor.h, strokeColor.s, Math.max(strokeColor.b - 20, 20), 100, "arrowMidColor")
            : new SWColor(0, 0, 40, 100, "arrowMidGray");
        this.midpoint = new SWPoint(0, 0, undefined, midPtSize, midColor);

        this._updateDerived();

        this.shouldShowTip       = true;
        this.shouldShowTailPoint = true;
        this.shouldShowMidpoint  = true;
    }//end constructor

    _updateDerived() {
        const dx = this.ptB.x - this.ptA.x;
        const dy = this.ptB.y - this.ptA.y;
        this.length = Math.sqrt(dx * dx + dy * dy);
        this.angle  = Math.atan2(dy, dx);
        const mx = (this.ptA.x + this.ptB.x) / 2;
        const my = (this.ptA.y + this.ptB.y) / 2;
        if (this.midpoint) {
            this.midpoint.x = mx;
            this.midpoint.y = my;
        }
    }//end _updateDerived

    _getBarbPoints() {
        const barbLen      = this.length * this.tipFactor;
        const shaftAngle   = Math.atan2(this.ptB.y - this.ptA.y, this.ptB.x - this.ptA.x);
        const tipAngleRad  = this.tipAngle * Math.PI / 180;
        const barb1Angle = shaftAngle + Math.PI - tipAngleRad;
        const barb2Angle = shaftAngle + Math.PI + tipAngleRad;
        return {
            barb1: {
                x: this.ptB.x + barbLen * Math.cos(barb1Angle),
                y: this.ptB.y + barbLen * Math.sin(barb1Angle)
            },
            barb2: {
                x: this.ptB.x + barbLen * Math.cos(barb2Angle),
                y: this.ptB.y + barbLen * Math.sin(barb2Angle)
            }
        };
    }//end _getBarbPoints

    draw() {
        if (this.strokeColor && this.strokeColor.col) {
            stroke(this.strokeColor.col);
        }
        strokeWeight(this.thickness);
        strokeCap(window[this.capStyle] ?? ROUND);

        line(this.ptA.x, this.ptA.y, this.ptB.x, this.ptB.y);

        if (this.shouldShowTip) {
            const barbs = this._getBarbPoints();
            line(this.ptB.x, this.ptB.y, barbs.barb1.x, barbs.barb1.y);
            line(this.ptB.x, this.ptB.y, barbs.barb2.x, barbs.barb2.y);
        }

        strokeCap(ROUND);
        noStroke();
        strokeWeight(1);

        if (this.shouldShowTailPoint) {
            this.ptA.draw();
        }
        if (this.shouldShowMidpoint && this.midpoint) {
            this.midpoint.draw();
        }
    }//end draw

    drawOnGrid(grid) {
        const {x: x1, y: y1} = grid.userToScreen(this.ptA.x, this.ptA.y);
        const {x: x2, y: y2} = grid.userToScreen(this.ptB.x, this.ptB.y);

        if (this.strokeColor && this.strokeColor.col) {
            stroke(this.strokeColor.col);
        }
        strokeWeight(this.thickness);
        strokeCap(window[this.capStyle] ?? ROUND);

        line(x1, y1, x2, y2);

        if (this.shouldShowTip) {
            const barbs = this._getBarbPoints();
            const b1s = grid.userToScreen(barbs.barb1.x, barbs.barb1.y);
            const b2s = grid.userToScreen(barbs.barb2.x, barbs.barb2.y);
            line(x2, y2, b1s.x, b1s.y);
            line(x2, y2, b2s.x, b2s.y);
        }

        strokeCap(ROUND);
        noStroke();
        strokeWeight(1);

        if (this.shouldShowTailPoint) {
            this.ptA.drawOnGrid(grid);
        }
        if (this.shouldShowMidpoint && this.midpoint) {
            this.midpoint.drawOnGrid(grid);
        }
    }//end drawOnGrid

    breathe(sinusoid, t) {
        const midX = (this.ptA.x + this.ptB.x) / 2;
        const midY = (this.ptA.y + this.ptB.y) / 2;
        const dx   = this.ptB.x - this.ptA.x;
        const dy   = this.ptB.y - this.ptA.y;
        const len  = Math.sqrt(dx * dx + dy * dy);
        if (len === 0) return;
        const ux = dx / len;
        const uy = dy / len;
        const newHalfLen = sinusoid.getValue(t) / 2;
        this.ptA.x = midX - ux * newHalfLen;
        this.ptA.y = midY - uy * newHalfLen;
        this.ptB.x = midX + ux * newHalfLen;
        this.ptB.y = midY + uy * newHalfLen;
        this._updateDerived();
    }//end breathe

    rotateAboutMidPoint(degPerSec, t) {
        const angleRad = degPerSec * t * Math.PI / 180;
        const midX = (this.originalA.x + this.originalB.x) / 2;
        const midY = (this.originalA.y + this.originalB.y) / 2;
        const dxA  = this.originalA.x - midX;
        const dyA  = this.originalA.y - midY;
        const dxB  = this.originalB.x - midX;
        const dyB  = this.originalB.y - midY;
        this.ptA.x = midX + (dxA * Math.cos(angleRad) - dyA * Math.sin(angleRad));
        this.ptA.y = midY + (dxA * Math.sin(angleRad) + dyA * Math.cos(angleRad));
        this.ptB.x = midX + (dxB * Math.cos(angleRad) - dyB * Math.sin(angleRad));
        this.ptB.y = midY + (dxB * Math.sin(angleRad) + dyB * Math.cos(angleRad));
        this._updateDerived();
    }//end rotateAboutMidPoint

    rotateAbout(fixedPt, degPerSec, t) {
        const isA       = (fixedPt === this.ptA);
        const origFixed = isA ? this.originalA : this.originalB;
        const origMove  = isA ? this.originalB : this.originalA;
        const angleRad  = degPerSec * t * Math.PI / 180;
        const dx  = origMove.x - origFixed.x;
        const dy  = origMove.y - origFixed.y;
        const newX = origFixed.x + (dx * Math.cos(angleRad) - dy * Math.sin(angleRad));
        const newY = origFixed.y + (dx * Math.sin(angleRad) + dy * Math.cos(angleRad));
        if (isA) {
            this.ptA.x = origFixed.x;  this.ptA.y = origFixed.y;
            this.ptB.x = newX;         this.ptB.y = newY;
        } else {
            this.ptB.x = origFixed.x;  this.ptB.y = origFixed.y;
            this.ptA.x = newX;         this.ptA.y = newY;
        }
        this._updateDerived();
    }//end rotateAbout

    transform({ sinusoid = null, t = 0, degPerSec = null } = {}) {
        const ax0 = this.originalA.x,  ay0 = this.originalA.y;
        const bx0 = this.originalB.x,  by0 = this.originalB.y;
        const midX = (ax0 + bx0) / 2;
        const midY = (ay0 + by0) / 2;
        let dax = ax0 - midX,  day = ay0 - midY;
        let dbx = bx0 - midX,  dby = by0 - midY;

        if (sinusoid) {
            const origLen = Math.sqrt((bx0 - ax0) ** 2 + (by0 - ay0) ** 2);
            const scale   = origLen === 0 ? 1 : sinusoid.getValue(t) / origLen;
            dax *= scale;  day *= scale;
            dbx *= scale;  dby *= scale;
        }

        if (degPerSec !== null) {
            const r = (degPerSec * t) * Math.PI / 180;
            const c = Math.cos(r),  s = Math.sin(r);
            const rotate = (dx, dy) => [dx * c - dy * s, dx * s + dy * c];
            [dax, day] = rotate(dax, day);
            [dbx, dby] = rotate(dbx, dby);
        }

        this.ptA.x = midX + dax;  this.ptA.y = midY + day;
        this.ptB.x = midX + dbx;  this.ptB.y = midY + dby;
        this._updateDerived();
    }//end transform

    transformAbout(fixedPt, { sinusoid = null, breatheTime = 0, degPerSec = null, rotateTime = 0 } = {}) {
        const isA       = (fixedPt === this.ptA);
        const origFixed = isA ? this.originalA : this.originalB;
        const origMove  = isA ? this.originalB : this.originalA;
        let dx = origMove.x - origFixed.x;
        let dy = origMove.y - origFixed.y;
        const origLen = Math.sqrt(dx * dx + dy * dy);
        if (origLen === 0) return;

        if (sinusoid) {
            const scale = sinusoid.getValue(breatheTime) / origLen;
            dx *= scale;  dy *= scale;
        }

        if (degPerSec !== null) {
            const r = (degPerSec * rotateTime) * Math.PI / 180;
            const c = Math.cos(r),  s = Math.sin(r);
            const newDx = dx * c - dy * s;
            const newDy = dx * s + dy * c;
            dx = newDx;  dy = newDy;
        }

        if (isA) {
            this.ptA.x = origFixed.x;       this.ptA.y = origFixed.y;
            this.ptB.x = origFixed.x + dx;  this.ptB.y = origFixed.y + dy;
        } else {
            this.ptB.x = origFixed.x;       this.ptB.y = origFixed.y;
            this.ptA.x = origFixed.x + dx;  this.ptA.y = origFixed.y + dy;
        }
        this._updateDerived();
    }//end transformAbout

    setThickness(w) {
        this.thickness = w;
    }//end setThickness

    setStrokeCap(cap) {
        this.capStyle = cap;
    }//end setStrokeCap

    setColor(swColor) {
        this.strokeColor = swColor;
    }//end setColor

    setStartAngle(deg) {
        this.startAngleDeg = deg;
        const rad     = deg * Math.PI / 180;
        const midX    = (this.originalA.x + this.originalB.x) / 2;
        const midY    = (this.originalA.y + this.originalB.y) / 2;
        const dxO     = this.originalB.x - this.originalA.x;
        const dyO     = this.originalB.y - this.originalA.y;
        const halfLen = Math.sqrt(dxO * dxO + dyO * dyO) / 2;
        const ux = Math.cos(rad);
        const uy = Math.sin(rad);
        this.originalA.x = midX - ux * halfLen;
        this.originalA.y = midY - uy * halfLen;
        this.originalB.x = midX + ux * halfLen;
        this.originalB.y = midY + uy * halfLen;
        this.ptA.x = this.originalA.x;  this.ptA.y = this.originalA.y;
        this.ptB.x = this.originalB.x;  this.ptB.y = this.originalB.y;
        this._updateDerived();
    }//end setStartAngle

    toString() {
        const angleDeg = (this.angle * 180 / Math.PI).toFixed(1);
        return `SWArrow(` +
            `ptA:(${this.ptA.x.toFixed(2)}, ${this.ptA.y.toFixed(2)}) → ` +
            `ptB:(${this.ptB.x.toFixed(2)}, ${this.ptB.y.toFixed(2)}), ` +
            `len:${this.length.toFixed(2)}, angle:${angleDeg}°, ` +
            `tipAngle:${this.tipAngle}°, tipFactor:${this.tipFactor})`;
    }//end toString

}//end SWArrow class