◐ SWTwoTonedDisk Reference

/*
File: swTwoTonedDisk.js
Date: 2026-03-29
Author: klp
App:  SketchWaveTNT2026-03-19-Stg7
Purpose: SWTwoTonedDisk class for SketchWaveJS

SWTwoTonedDisk represents a disk divided into two 180° half-circles sharing a
common diameter.  Each half is composed of:
  - An SWSector (filled, zero stroke weight — a border on the shared diameter
    would create an unwanted center line where the two halves meet)
  - An SWArc   (stroke only, butt caps) that outlines the curved circumference
    of its half, in the same color as the fill

Default orientation: the shared diameter lies along the +x axis (top half opens
into the upper half-plane, bottom half opens into the lower half-plane).
Use startAngle to pre-rotate this orientation.  Calls to rotate() accumulate
additional spin on top of startAngle.

Animations:
  - rotate(delta)      : spin both halves together about the center (CCW positive).
  - breathe(sin, t)    : oscillate BOTH radii with the same SWSinusoid.
                         Both halves reach equal radius during breathing.
                         Use setTopRadius / setBottomRadius for independent control.

Top radius and bottom radius can differ — set independently via setTopRadius /
setBottomRadius to create asymmetric "lune" shapes.

Color model:
  Each half has TWO independent colors:
    - Fill color  (topFillColor / bottomFillColor)  → sector interior only
    - Arc color   (topArcColor  / bottomArcColor)   → circumference arc only
  Arc colors default to matching the fill colors at construction.
  Use setTopArcColor / setBottomArcColor to change them independently.

Angle / rotation convention (same as SWSector and SWArc):
  User space:   CCW from +x axis, y increases upward.
  p5 / screen:  CW  from +x axis, y increases downward.
  Effective sub-object rotation = this.startAngle + this.rotation.

Dependencies: p5.js, SWColor, SWPoint, SWGrid, SWSinusoid, SWSector, SWArc.
*/

console.log("[swTwoTonedDisk.js] SWTwoTonedDisk class loaded.");

class SWTwoTonedDisk {

    /**
     * @param {SWPoint} center            - Center of the disk (SWPoint)
     * @param {number}  radius            - Initial radius for both halves (user units, > 0)
     * @param {number}  [startAngle=0]    - Static diameter orientation (degrees CCW from +x axis)
     * @param {SWColor} [topFillColor]    - Color for the top half sector fill
     * @param {SWColor} [bottomFillColor] - Color for the bottom half sector fill
     * @param {number}  [arcThickness=4]  - Stroke weight (pixels) for both circumference arcs
     */
    constructor(center, radius, startAngle = 0,
                topFillColor = undefined, bottomFillColor = undefined,
                arcThickness = 4) {

        this.center       = center;
        this.topRadius    = radius;
        this.bottomRadius = radius;
        this.startAngle   = startAngle;   // static orientation offset
        this.rotation     = 0;            // accumulated via rotate()
        this.arcThickness = arcThickness;

        // Always copy colors to avoid mutating shared SWColor objects
        this.topFillColor    = topFillColor    ? SWColor.copy(topFillColor)    : undefined;
        this.bottomFillColor = bottomFillColor ? SWColor.copy(bottomFillColor) : undefined;

        // Arc outline colors — default to matching the fill color.
        // Set independently with setTopArcColor / setBottomArcColor.
        this.topArcColor    = topFillColor    ? SWColor.copy(topFillColor)    : undefined;
        this.bottomArcColor = bottomFillColor ? SWColor.copy(bottomFillColor) : undefined;

        // Originals stored at construction — used by reset()
        this.originalTopRadius       = radius;
        this.originalBottomRadius    = radius;
        this.originalStartAngle      = startAngle;
        this.originalArcThickness    = arcThickness;
        this.originalTopFillColor    = topFillColor    ? SWColor.copy(topFillColor)    : undefined;
        this.originalBottomFillColor = bottomFillColor ? SWColor.copy(bottomFillColor) : undefined;
        this.originalTopArcColor     = topFillColor    ? SWColor.copy(topFillColor)    : undefined;
        this.originalBottomArcColor  = bottomFillColor ? SWColor.copy(bottomFillColor) : undefined;

        this.shouldShowCenter = true;

        this._buildSubObjects();
    }//end constructor

    // ─── Internal Construction ─────────────────────────────────────────────────

    /**
     * Creates the four sub-objects that compose the disk.
     * Called once at construction; do not call again (use setters).
     */
    _buildSubObjects() {
        const cx = this.center.x, cy = this.center.y;

        // ── Top sector: 0° → 180° CCW (upper half), no stroke border ───────────
        this.topSector = new SWSector(
            new SWPoint(cx, cy), this.topRadius, 180, 0,
            0,                              // thickness = 0 → no border on diameter
            this.topFillColor, undefined    // no strokeColor
        );
        this.topSector.setShowVertex(false);

        // ── Bottom sector: 180° → 360° CCW (lower half), no stroke border ──────
        this.bottomSector = new SWSector(
            new SWPoint(cx, cy), this.bottomRadius, 180, 180,
            0,
            this.bottomFillColor, undefined
        );
        this.bottomSector.setShowVertex(false);

        // ── Top arc: curved circumference of the upper half, butt caps ──────────
        //    'butt' caps keep the arc endpoints flush with the diameter endpoints,
        //    preventing cap bumps from appearing at the diameter line.
        this.topArc = new SWArc(
            new SWPoint(cx, cy), this.topRadius, 180, 0,
            this.arcThickness, this.topArcColor, 'butt'
        );
        this.topArc.setShowCenter(false);
        this.topArc.pixelRadiusOffset = this.arcThickness / 2;

        // ── Bottom arc: curved circumference of the lower half ──────────────────
        this.bottomArc = new SWArc(
            new SWPoint(cx, cy), this.bottomRadius, 180, 180,
            this.arcThickness, this.bottomArcColor, 'butt'
        );
        this.bottomArc.setShowCenter(false);
        this.bottomArc.pixelRadiusOffset = this.arcThickness / 2;

        this._syncSubObjects();
    }//end _buildSubObjects

    /**
     * Pushes the current center position and total rotation into all four
     * sub-objects.  Must be called before every draw.
     */
    _syncSubObjects() {
        const cx = this.center.x, cy = this.center.y;
        const r  = this.startAngle + this.rotation;   // effective rotation for sub-objects

        // Sync center coordinates
        this.topSector.vertex.x    = cx;  this.topSector.vertex.y    = cy;
        this.bottomSector.vertex.x = cx;  this.bottomSector.vertex.y = cy;
        this.topArc.center.x       = cx;  this.topArc.center.y       = cy;
        this.bottomArc.center.x    = cx;  this.bottomArc.center.y    = cy;

        // Sync rotation — sub-objects keep their fixed startAngle (0 / 180)
        this.topSector.rotation    = r;
        this.bottomSector.rotation = r;
        this.topArc.rotation       = r;
        this.bottomArc.rotation    = r;
    }//end _syncSubObjects

    // ─── Drawing ───────────────────────────────────────────────────────────────

    /**
     * Draws the disk in screen (pixel) coordinates.
     * Use drawOnGrid() for user-coordinate rendering.
     */
    draw() {
        this._syncSubObjects();
        this.topSector.draw();
        this.bottomSector.draw();
        this.topArc.draw();
        this.bottomArc.draw();
        if (this.shouldShowCenter && this.center && this.center.draw) {
            this.center.draw();
        }
    }//end draw

    /**
     * Draws the disk mapped through the given SWGrid.
     * @param {SWGrid} grid
     */
    drawOnGrid(grid) {
        this._syncSubObjects();
        this.topSector.drawOnGrid(grid);
        this.bottomSector.drawOnGrid(grid);
        this.topArc.drawOnGrid(grid);
        this.bottomArc.drawOnGrid(grid);
        if (this.shouldShowCenter && this.center && this.center.drawOnGrid) {
            this.center.drawOnGrid(grid);
        }
    }//end drawOnGrid

    // ─── Rotation animation ────────────────────────────────────────────────────

    /**
     * Increments the disk's rotation by deltaAngle degrees (CCW positive, CW negative).
     * Call each frame before draw() to spin the disk about its center.
     * @param {number} deltaAngle
     */
    rotate(deltaAngle) {
        this.rotation += deltaAngle;
    }//end rotate

    // ─── Breathing animation ───────────────────────────────────────────────────

    /**
     * Modulates BOTH radii to the same sinusoid value, so both halves
     * grow and shrink in unison.  Minimum clamped to 0.01.
     * @param {SWSinusoid} sinusoid
     * @param {number} t - elapsed time in seconds
     */
    breathe(sinusoid, t) {
        const r = Math.max(0.01, sinusoid.getValue(t));
        this.topRadius    = r;
        this.bottomRadius = r;
        this.topSector.setRadius(r);
        this.bottomSector.setRadius(r);
        this.topArc.setRadius(r);
        this.bottomArc.setRadius(r);
    }//end breathe

    // ─── Setters ───────────────────────────────────────────────────────────────

    /**
     * Sets the top-half radius and keeps the sub-objects in sync.
     * @param {number} r - user units
     */
    setTopRadius(r) {
        this.topRadius = r;
        if (this.topSector) this.topSector.setRadius(r);
        if (this.topArc)    this.topArc.setRadius(r);
    }//end setTopRadius

    /**
     * Sets the bottom-half radius and keeps the sub-objects in sync.
     * @param {number} r - user units
     */
    setBottomRadius(r) {
        this.bottomRadius = r;
        if (this.bottomSector) this.bottomSector.setRadius(r);
        if (this.bottomArc)    this.bottomArc.setRadius(r);
    }//end setBottomRadius

    /**
     * Sets the fill (sector) color for the top half only.
     * The arc outline is NOT changed — use setTopArcColor() separately.
     * @param {SWColor} swColor
     */
    setTopFillColor(swColor) {
        this.topFillColor = swColor ? SWColor.copy(swColor) : undefined;
        if (this.topSector) this.topSector.setFillColor(this.topFillColor);
    }//end setTopFillColor

    /**
     * Sets the fill (sector) color for the bottom half only.
     * @param {SWColor} swColor
     */
    setBottomFillColor(swColor) {
        this.bottomFillColor = swColor ? SWColor.copy(swColor) : undefined;
        if (this.bottomSector) this.bottomSector.setFillColor(this.bottomFillColor);
    }//end setBottomFillColor

    /**
     * Sets the arc outline color for the top half independently of the fill.
     * @param {SWColor} swColor
     */
    setTopArcColor(swColor) {
        this.topArcColor = swColor ? SWColor.copy(swColor) : undefined;
        if (this.topArc) this.topArc.setStrokeColor(this.topArcColor);
    }//end setTopArcColor

    /**
     * Sets the arc outline color for the bottom half independently of the fill.
     * @param {SWColor} swColor
     */
    setBottomArcColor(swColor) {
        this.bottomArcColor = swColor ? SWColor.copy(swColor) : undefined;
        if (this.bottomArc) this.bottomArc.setStrokeColor(this.bottomArcColor);
    }//end setBottomArcColor

    /**
     * Sets the alpha for the top half's fill color.  Clamped to [0, 100].
     * Rebuilds the p5 color object and propagates to the sector only.
     * @param {number} alpha
     */
    setTopAlpha(alpha) {
        if (!this.topFillColor) return;
        this.topFillColor.a = Math.max(0, Math.min(100, alpha));
        this.topFillColor.col = color(
            this.topFillColor.h, this.topFillColor.s,
            this.topFillColor.b, this.topFillColor.a
        );
        if (this.topSector) this.topSector.setFillColor(this.topFillColor);
    }//end setTopAlpha

    /**
     * Sets the alpha for the bottom half's fill color.  Clamped to [0, 100].
     * @param {number} alpha
     */
    setBottomAlpha(alpha) {
        if (!this.bottomFillColor) return;
        this.bottomFillColor.a = Math.max(0, Math.min(100, alpha));
        this.bottomFillColor.col = color(
            this.bottomFillColor.h, this.bottomFillColor.s,
            this.bottomFillColor.b, this.bottomFillColor.a
        );
        if (this.bottomSector) this.bottomSector.setFillColor(this.bottomFillColor);
    }//end setBottomAlpha

    /**
     * Sets the alpha for the top arc's outline color.  Clamped to [0, 100].
     * @param {number} alpha
     */
    setTopArcAlpha(alpha) {
        if (!this.topArcColor) return;
        this.topArcColor.a = Math.max(0, Math.min(100, alpha));
        this.topArcColor.col = color(
            this.topArcColor.h, this.topArcColor.s,
            this.topArcColor.b, this.topArcColor.a
        );
        if (this.topArc) this.topArc.setStrokeColor(this.topArcColor);
    }//end setTopArcAlpha

    /**
     * Sets the alpha for the bottom arc's outline color.  Clamped to [0, 100].
     * @param {number} alpha
     */
    setBottomArcAlpha(alpha) {
        if (!this.bottomArcColor) return;
        this.bottomArcColor.a = Math.max(0, Math.min(100, alpha));
        this.bottomArcColor.col = color(
            this.bottomArcColor.h, this.bottomArcColor.s,
            this.bottomArcColor.b, this.bottomArcColor.a
        );
        if (this.bottomArc) this.bottomArc.setStrokeColor(this.bottomArcColor);
    }//end setBottomArcAlpha

    /**
     * Sets the stroke weight (pixels) for both circumference arcs.
     * Also updates pixelRadiusOffset so arcs remain flush outside the sectors.
     * @param {number} w
     */
    setArcThickness(w) {
        this.arcThickness = w;
        if (this.topArc) {
            this.topArc.setStrokeWeight(w);
            this.topArc.pixelRadiusOffset    = w / 2;
        }
        if (this.bottomArc) {
            this.bottomArc.setStrokeWeight(w);
            this.bottomArc.pixelRadiusOffset = w / 2;
        }
    }//end setArcThickness

    /**
     * Sets the static orientation of the shared diameter (CCW from +x axis).
     * Does not affect the accumulated rotation from rotate().
     * @param {number} degrees
     */
    setStartAngle(degrees) {
        this.startAngle = degrees;
    }//end setStartAngle

    /**
     * Toggles the center-point marker.
     * @param {boolean} [show=true]
     */
    setShowCenter(show = true) {
        this.shouldShowCenter = show;
    }//end setShowCenter

    // ─── Reset ─────────────────────────────────────────────────────────────────

    /**
     * Resets all animated / slider-driven values to the originals stored at
     * construction time.  Does NOT move the center position.
     */
    reset() {
        this.rotation   = 0;
        this.startAngle = this.originalStartAngle;

        this.setTopRadius(this.originalTopRadius);
        this.setBottomRadius(this.originalBottomRadius);

        this.arcThickness = this.originalArcThickness;
        if (this.topArc)    this.topArc.setStrokeWeight(this.originalArcThickness);
        if (this.bottomArc) this.bottomArc.setStrokeWeight(this.originalArcThickness);

        if (this.originalTopFillColor) {
            this.topFillColor = SWColor.copy(this.originalTopFillColor);
            this.setTopFillColor(this.topFillColor);
        }
        if (this.originalBottomFillColor) {
            this.bottomFillColor = SWColor.copy(this.originalBottomFillColor);
            this.setBottomFillColor(this.bottomFillColor);
        }
        if (this.originalTopArcColor) {
            this.topArcColor = SWColor.copy(this.originalTopArcColor);
            this.setTopArcColor(this.topArcColor);
        }
        if (this.originalBottomArcColor) {
            this.bottomArcColor = SWColor.copy(this.originalBottomArcColor);
            this.setBottomArcColor(this.bottomArcColor);
        }
    }//end reset

    /**
     * Resets only the top half's fill color to the original.
     */
    resetTopColor() {
        if (this.originalTopFillColor) {
            this.topFillColor = SWColor.copy(this.originalTopFillColor);
            this.setTopFillColor(this.topFillColor);
        }
    }//end resetTopColor

    /**
     * Resets only the bottom half's fill color to the original.
     */
    resetBottomColor() {
        if (this.originalBottomFillColor) {
            this.bottomFillColor = SWColor.copy(this.originalBottomFillColor);
            this.setBottomFillColor(this.bottomFillColor);
        }
    }//end resetBottomColor

    // ─── Copy ──────────────────────────────────────────────────────────────────

    /**
     * Returns a deep copy of the given SWTwoTonedDisk.
     * @param {SWTwoTonedDisk} other
     * @returns {SWTwoTonedDisk}
     */
    static copy(other) {
        if (!(other instanceof SWTwoTonedDisk)) {
            throw new Error('Argument to SWTwoTonedDisk.copy must be an SWTwoTonedDisk instance');
        }
        const d = new SWTwoTonedDisk(
            SWPoint.copy(other.center),
            other.originalTopRadius,
            other.originalStartAngle,
            other.topFillColor,
            other.bottomFillColor,
            other.originalArcThickness
        );
        d.topRadius    = other.topRadius;
        d.bottomRadius = other.bottomRadius;
        d.startAngle   = other.startAngle;
        d.rotation     = other.rotation;
        d.setTopRadius(d.topRadius);
        d.setBottomRadius(d.bottomRadius);
        d.shouldShowCenter = other.shouldShowCenter;
        return d;
    }//end copy

    // ─── toString ──────────────────────────────────────────────────────────────

    toString() {
        return `SWTwoTonedDisk(center: ${this.center.toString()}, ` +
               `topRadius: ${this.topRadius.toFixed(2)}, bottomRadius: ${this.bottomRadius.toFixed(2)}, ` +
               `startAngle: ${this.startAngle}°, rotation: ${this.rotation.toFixed(1)}°, ` +
               `arcThickness: ${this.arcThickness})`;
    }//end toString

}//end SWTwoTonedDisk class