〰️ SWLissajous Reference

/*
File: swLissajous.js
Date: 2026-04-27
Author: klp
App:  SketchWaveTNT2026-04-21-Stg8
Purpose: SWLissajous class for SketchWaveJS

SWLissajous draws a Lissajous figure defined by the parametric equations:

  x(t) = ampX · sin(freqX · t + phaseDeg_rad)
  y(t) = ampY · sin(freqY · t)

for t ∈ [0, 2π], scaled by 'scale' and offset by 'center':

  user_x = center.x + scale · ampX · sin(freqX · t + phaseDeg_rad)
  user_y = center.y + scale · ampY · sin(freqY · t)

Parameters:
  center   (SWPoint) -- origin in user (grid) coordinates
  freqX    (integer) -- horizontal frequency (1-10 typical)
  freqY    (integer) -- vertical frequency   (1-10 typical)
  ampX     (number)  -- horizontal amplitude (1 = unit scale)
  ampY     (number)  -- vertical amplitude   (1 = unit scale)
  phaseDeg (number)  -- phase offset for the x oscillation, in CCW degrees (0-360)
  scale    (number)  -- maps parametric units to grid units

Shape families at phaseDeg = 90 deg:
  freqX:freqY = 1:1  -- circle
  freqX:freqY = 1:2  -- figure-8 / parabola
  freqX:freqY = 2:3  -- classic three-lobe pretzel  (default)
  freqX:freqY = 3:4  -- complex four-loop figure
  Any integer ratio  -- closed curve when t in [0, 2pi]

Phase drift animation:
  Continuously incrementing phaseDeg (via driftPhase()) causes the figure
  to morph smoothly through all of its possible configurations for the
  current frequency ratio.

Rotation:
  rotationDeg -- static base rotation (CCW degrees), set by setRotation().
  rotation    -- accumulated rotation (degrees), incremented by rotate().
  Effective rotation = rotationDeg + rotation.

Dependencies: p5.js, SWColor, SWPoint, SWGrid.
*/

console.log("[swLissajous.js] SWLissajous class loaded.");

class SWLissajous {

    static SAMPLE_COUNT = 500;

    constructor(center, freqX = 3, freqY = 2, ampX = 1, ampY = 1, phaseDeg = 90,
                fillColor = undefined, strokeColor = undefined,
                thickness = 2, scale = 5, rotationDeg = 0) {

        this.center      = center;
        this.freqX       = freqX;
        this.freqY       = freqY;
        this.ampX        = ampX;
        this.ampY        = ampY;
        this.phaseDeg    = phaseDeg;
        this.fillColor   = fillColor   ? SWColor.copy(fillColor)   : undefined;
        this.strokeColor = strokeColor ? SWColor.copy(strokeColor) : undefined;
        this.thickness   = thickness;
        this.scale       = scale;
        this.rotationDeg = rotationDeg;
        this.rotation    = 0;

        this.originalFreqX       = freqX;
        this.originalFreqY       = freqY;
        this.originalAmpX        = ampX;
        this.originalAmpY        = ampY;
        this.originalPhaseDeg    = phaseDeg;
        this.originalFillColor   = fillColor   ? SWColor.copy(fillColor)   : undefined;
        this.originalStrokeColor = strokeColor ? SWColor.copy(strokeColor) : undefined;
        this.originalThickness   = thickness;
        this.originalScale       = scale;
        this.originalRotationDeg = rotationDeg;

    }//end constructor

    _totalRotDeg() { return this.rotationDeg + this.rotation; }

    _rotateLocal(lx, ly) {
        const rad  = this._totalRotDeg() * Math.PI / 180;
        const cosR = Math.cos(rad);
        const sinR = Math.sin(rad);
        return { x: lx * cosR - ly * sinR, y: lx * sinR + ly * cosR };
    }

    _buildUserPts() {
        const cx  = this.center.x;
        const cy  = this.center.y;
        const n   = SWLissajous.SAMPLE_COUNT;
        const phR = this.phaseDeg * Math.PI / 180;
        const pts = [];
        for (let i = 0; i < n; i++) {
            const t   = (i / n) * 2 * Math.PI;
            const lx  = this.scale * this.ampX * Math.sin(this.freqX * t + phR);
            const ly  = this.scale * this.ampY * Math.sin(this.freqY * t);
            const rot = this._rotateLocal(lx, ly);
            pts.push({ x: cx + rot.x, y: cy + rot.y });
        }
        return pts;
    }

    _buildScreenPtsGrid(grid) {
        return this._buildUserPts().map(p => grid.userToScreen(p.x, p.y));
    }

    _buildScreenPtsDirect() {
        const cx  = this.center.x;
        const cy  = this.center.y;
        const n   = SWLissajous.SAMPLE_COUNT;
        const phR = this.phaseDeg * Math.PI / 180;
        const pts = [];
        for (let i = 0; i < n; i++) {
            const t   = (i / n) * 2 * Math.PI;
            const lx  = this.scale * this.ampX * Math.sin(this.freqX * t + phR);
            const ly  = this.scale * this.ampY * Math.sin(this.freqY * t);
            const rot = this._rotateLocal(lx, ly);
            pts.push({ x: cx + rot.x, y: cy - rot.y });
        }
        return pts;
    }

    _drawShape(screenPts) {
        if (screenPts.length < 2) return;
        if (this.fillColor && this.fillColor.col) {
            fill(this.fillColor.col);
            noStroke();
            beginShape();
            for (const sp of screenPts) vertex(sp.x, sp.y);
            endShape(CLOSE);
        }
        if (this.strokeColor && this.strokeColor.col) {
            noFill();
            stroke(this.strokeColor.col);
            strokeWeight(this.thickness);
            beginShape();
            for (const sp of screenPts) vertex(sp.x, sp.y);
            endShape(CLOSE);
        }
        noStroke(); noFill(); strokeWeight(1);
    }

    draw() {
        const screenPts = this._buildScreenPtsDirect();
        this._drawShape(screenPts);
        if (this.center && this.center.draw) this.center.draw(this.strokeColor);
    }

    drawOnGrid(grid) {
        const screenPts = this._buildScreenPtsGrid(grid);
        this._drawShape(screenPts);
        if (this.center && this.center.drawOnGrid) this.center.drawOnGrid(grid, this.strokeColor);
    }

    rotate(deltaAngle)   { this.rotation += deltaAngle; }
    driftPhase(deltaDeg) { this.phaseDeg += deltaDeg; }

    setFreqX(fx) { this.freqX = Math.max(1, Math.round(fx)); }
    setFreqY(fy) { this.freqY = Math.max(1, Math.round(fy)); }
    setAmpX(ax)  { this.ampX  = Math.max(0.01, ax); }
    setAmpY(ay)  { this.ampY  = Math.max(0.01, ay); }
    setPhase(deg)      { this.phaseDeg    = deg; }
    setScale(s)        { this.scale       = Math.max(0.01, s); }
    setRotation(deg)   { this.rotationDeg = deg; }
    setFillColor(fc)   { this.fillColor   = fc ? SWColor.copy(fc) : undefined; }
    setStrokeColor(sc) { this.strokeColor = sc ? SWColor.copy(sc) : undefined; }
    setStrokeWeight(w) { this.thickness   = w; }

    setFillAlpha(alpha) {
        if (this.fillColor) {
            this.fillColor.a   = Math.max(0, Math.min(100, alpha));
            this.fillColor.col = color(this.fillColor.h, this.fillColor.s,
                                       this.fillColor.b, this.fillColor.a);
        }
    }

    setStrokeAlpha(alpha) {
        if (this.strokeColor) {
            this.strokeColor.a   = Math.max(0, Math.min(100, alpha));
            this.strokeColor.col = color(this.strokeColor.h, this.strokeColor.s,
                                         this.strokeColor.b, this.strokeColor.a);
        }
    }

    reset() {
        this.freqX       = this.originalFreqX;
        this.freqY       = this.originalFreqY;
        this.ampX        = this.originalAmpX;
        this.ampY        = this.originalAmpY;
        this.phaseDeg    = this.originalPhaseDeg;
        this.scale       = this.originalScale;
        this.rotationDeg = this.originalRotationDeg;
        this.rotation    = 0;
        this.thickness   = this.originalThickness;
        this.fillColor   = this.originalFillColor
            ? SWColor.copy(this.originalFillColor) : undefined;
        this.strokeColor = this.originalStrokeColor
            ? SWColor.copy(this.originalStrokeColor) : undefined;
    }

    static copy(other) {
        const c = new SWLissajous(
            SWPoint.copy(other.center),
            other.originalFreqX, other.originalFreqY,
            other.originalAmpX,  other.originalAmpY,
            other.originalPhaseDeg,
            other.originalFillColor, other.originalStrokeColor,
            other.originalThickness, other.originalScale,
            other.originalRotationDeg
        );
        c.freqX = other.freqX;   c.freqY = other.freqY;
        c.ampX  = other.ampX;    c.ampY  = other.ampY;
        c.phaseDeg    = other.phaseDeg;
        c.scale       = other.scale;
        c.rotationDeg = other.rotationDeg;
        c.rotation    = other.rotation;
        return c;
    }

    toString() {
        return 'SWLissajous(center=' + this.center +
               ', freqX=' + this.freqX + ', freqY=' + this.freqY +
               ', ampX='  + this.ampX.toFixed(2) +
               ', ampY='  + this.ampY.toFixed(2) +
               ', phaseDeg=' + this.phaseDeg.toFixed(1) +
               ', scale=' + this.scale.toFixed(2) +
               ', rotationDeg=' + this.rotationDeg.toFixed(1) +
               ', rotation=' + this.rotation.toFixed(1) + ')';
    }

}//end SWLissajous class