■□ SWTwoTonedSquare Reference

/*
File: swTwoTonedSquare.js
Date: 2026-03-29
Author: klp
App:  SketchWaveTNT2026-03-19-Stg7
Purpose: SWTwoTonedSquare class for SketchWaveJS
Comment(s):

SWTwoTonedSquare is a composite shape: a square visually divided into two
differently-colored regions.  The division type is selected by the integer
parameter n (1–4):

  n = 1  Horizontal split — base square (color1) + a rectangle covering
         the upper half (color2).

  n = 2  Diagonal split — base square (color1) + a right-isosceles triangle
         (color2) whose hypotenuse runs along the top-left → bottom-right
         diagonal.  The right angle sits at the top-right corner.

  n = 3  Opposite quadrant squares — base square (color1) + two smaller
         squares (color2, side = ½ main side) placed in the top-left and
         bottom-right quadrants.  Their inner corners touch the center.

  n = 4  Opposite triangles — base square (color1) + two triangles (color2)
         whose bases are the top and bottom sides of the square and whose
         apex meets at the center.

Animations (same conventions as the rest of the SketchWaveJS family):
  rotate(deltaAngle)   — spin the entire composite about its center (CCW +, deg)
  breathe(sinusoid, t) — oscillate the overall side length using an SWSinusoid

Color model:
  color1 — fills the base square
  color2 — fills the overlaid secondary shape(s)

Drawing model:
  All shapes are drawn with raw p5.js primitives (rect, beginShape/vertex/endShape)
  inside a single push/translate/rotate/pop block.  This is the right choice because
  all coordinates are defined in local space (origin = center, rotation applied), so
  raw primitives need no extra coordinate mapping.  No SWRectangle or SWTriangle
  sub-objects are used — adding them would require re-deriving sub-shape positions
  whenever size or rotation changes, with no benefit for this geometry.

Angle convention:
  User / math space: CCW positive, y increases upward.
  p5 / screen space: CW  positive, y increases downward.
  → rotate() negates the angle when calling p5's rotate() in _drawCore().

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

console.log("[swTwoTonedSquare.js] SWTwoTonedSquare class loaded.");

class SWTwoTonedSquare {

    /**
     * @param {SWPoint} center         - Center of the square (user coordinates)
     * @param {number}  size           - Side length in user units (> 0)
     * @param {number}  [n=1]          - Pattern selector: 1, 2, 3, or 4
     * @param {SWColor} [color1]       - Base (background) fill color
     * @param {SWColor} [color2]       - Secondary shape fill color
     * @param {number}  [startAngle=0] - Static orientation in degrees (CCW from +x)
     */
    constructor(center, size, n = 1,
                color1 = undefined, color2 = undefined,
                startAngle = 0) {

        this.center     = center;
        this.size       = Math.max(0.01, size);
        this.n          = Math.max(1, Math.min(4, Math.round(n)));
        this.startAngle = startAngle;
        this.rotation   = 0;               // accumulated spin (degrees)

        this.color1 = color1 ? SWColor.copy(color1) : undefined;
        this.color2 = color2 ? SWColor.copy(color2) : undefined;

        // Originals stored at construction time for reset()
        this.originalSize       = this.size;
        this.originalStartAngle = startAngle;
        this.originalColor1     = color1 ? SWColor.copy(color1) : undefined;
        this.originalColor2     = color2 ? SWColor.copy(color2) : undefined;

        this.shouldShowCenter = true;

    }//end constructor

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

    /**
     * Internal draw in local pixel coordinates.
     * push / translate(cx_s, cy_s) / rotate wraps all shape calls so the
     * entire composite spins as a unit.
     *
     * @param {number} cx_s  - Center x in screen pixels
     * @param {number} cy_s  - Center y in screen pixels
     * @param {number} halfS - Half the side length in screen pixels
     */
    _drawCore(cx_s, cy_s, halfS) {
        const totalAngle = this.startAngle + this.rotation;

        push();
        translate(cx_s, cy_s);
        // Negate: CCW user convention → visually CCW in p5's y-down space
        rotate(-radians(totalAngle));
        noStroke();

        // ── Base square ──────────────────────────────────────────────────────
        if (this.color1 && this.color1.col) {
            fill(this.color1.col);
        } else {
            noFill();
        }
        rectMode(CENTER);
        rect(0, 0, halfS * 2, halfS * 2);

        // ── Secondary shape(s) ───────────────────────────────────────────────
        if (this.color2 && this.color2.col) {
            fill(this.color2.col);
        } else {
            noFill();
        }

        if (this.n === 1) {
            // ── n=1: upper rectangle (top half of the square) ────────────────
            // p5 y-down: "upper" = negative y.  Top-half center is at y = -halfS/2.
            rectMode(CENTER);
            rect(0, -halfS / 2, halfS * 2, halfS);

        } else if (this.n === 2) {
            // ── n=2: right-isosceles triangle, hypotenuse = main diagonal ────
            // Diagonal runs top-left (-halfS,-halfS) to bottom-right (halfS,halfS).
            // Right angle sits at top-right (halfS, -halfS).
            beginShape();
            vertex(-halfS, -halfS);   // top-left   (45° angle)
            vertex( halfS, -halfS);   // top-right  (right angle vertex)
            vertex( halfS,  halfS);   // bottom-right (45° angle)
            endShape(CLOSE);

        } else if (this.n === 3) {
            // ── n=3: two quadrant squares in opposite corners ────────────────
            // Each sub-square has side = halfS; its inner corner touches (0,0).
            rectMode(CENTER);
            rect(-halfS / 2, -halfS / 2, halfS, halfS);   // top-left quadrant
            rect( halfS / 2,  halfS / 2, halfS, halfS);   // bottom-right quadrant

        } else if (this.n === 4) {
            // ── n=4: two triangles on top and bottom sides ───────────────────
            // Each triangle has its base on one full side; apex is the center (0,0).
            beginShape();
            vertex(-halfS, -halfS);   // top-left
            vertex( halfS, -halfS);   // top-right
            vertex(0, 0);             // center (apex)
            endShape(CLOSE);

            beginShape();
            vertex(-halfS,  halfS);   // bottom-left
            vertex( halfS,  halfS);   // bottom-right
            vertex(0, 0);             // center (apex)
            endShape(CLOSE);
        }

        pop();
    }//end _drawCore

    /**
     * Draws in screen (pixel) coordinates.
     * center.x / center.y are treated as screen pixels; size as screen pixels.
     */
    draw() {
        const halfS = this.size / 2;
        this._drawCore(this.center.x, this.center.y, halfS);
        if (this.shouldShowCenter && this.center && this.center.draw) {
            this.center.draw();
        }
    }//end draw

    /**
     * Draws mapped through an SWGrid (user → screen).
     * @param {SWGrid} grid
     */
    drawOnGrid(grid) {
        const { x: cx_s, y: cy_s } = grid.userToScreen(this.center.x, this.center.y);
        const scale = (grid.xScale + grid.yScale) / 2;
        const halfS = scale * (this.size / 2);
        this._drawCore(cx_s, cy_s, halfS);
        if (this.shouldShowCenter && this.center && this.center.drawOnGrid) {
            this.center.drawOnGrid(grid);
        }
    }//end drawOnGrid

    // ─── Spin animation ─────────────────────────────────────────────────────────

    /**
     * Increments the accumulated rotation by deltaAngle degrees (CCW positive).
     * Call once per frame before drawOnGrid() to spin the shape.
     * @param {number} deltaAngle
     */
    rotate(deltaAngle) {
        this.rotation += deltaAngle;
    }//end rotate

    // ─── Breathe animation ──────────────────────────────────────────────────────

    /**
     * Modulates the overall side length using a sinusoid.
     * @param {SWSinusoid} sinusoid
     * @param {number}     t  - Elapsed time in seconds
     */
    breathe(sinusoid, t) {
        this.size = Math.max(0.01, sinusoid.getValue(t));
    }//end breathe

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

    setSize(s) {
        this.size = Math.max(0.01, s);
    }//end setSize

    setN(n) {
        this.n = Math.max(1, Math.min(4, Math.round(n)));
    }//end setN

    setColor1(swColor) {
        this.color1 = swColor ? SWColor.copy(swColor) : undefined;
    }//end setColor1

    setColor2(swColor) {
        this.color2 = swColor ? SWColor.copy(swColor) : undefined;
    }//end setColor2

    /**
     * Updates color1 alpha without changing hue/sat/bri.
     * @param {number} alpha - 0–100
     */
    setColor1Alpha(alpha) {
        if (!this.color1) return;
        this.color1.a   = Math.max(0, Math.min(100, alpha));
        this.color1.col = color(this.color1.h, this.color1.s, this.color1.b, this.color1.a);
    }//end setColor1Alpha

    /**
     * Updates color2 alpha without changing hue/sat/bri.
     * @param {number} alpha - 0–100
     */
    setColor2Alpha(alpha) {
        if (!this.color2) return;
        this.color2.a   = Math.max(0, Math.min(100, alpha));
        this.color2.col = color(this.color2.h, this.color2.s, this.color2.b, this.color2.a);
    }//end setColor2Alpha

    setStartAngle(degrees) {
        this.startAngle = degrees;
    }//end setStartAngle

    setShowCenter(show = true) {
        this.shouldShowCenter = show;
    }//end setShowCenter

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

    /**
     * Resets all animated / slider-driven values to construction-time originals.
     * Does NOT move the center position.
     */
    reset() {
        this.rotation   = 0;
        this.startAngle = this.originalStartAngle;
        this.size       = this.originalSize;
        if (this.originalColor1) this.color1 = SWColor.copy(this.originalColor1);
        if (this.originalColor2) this.color2 = SWColor.copy(this.originalColor2);
    }//end reset

    // ─── Static copy ────────────────────────────────────────────────────────────

    /**
     * Returns a deep copy of the given SWTwoTonedSquare instance.
     * @param {SWTwoTonedSquare} other
     * @returns {SWTwoTonedSquare}
     */
    static copy(other) {
        if (!(other instanceof SWTwoTonedSquare)) {
            throw new Error('SWTwoTonedSquare.copy: argument must be an SWTwoTonedSquare instance');
        }
        const sq = new SWTwoTonedSquare(
            SWPoint.copy(other.center),
            other.originalSize,
            other.n,
            other.color1,
            other.color2,
            other.originalStartAngle
        );
        sq.size             = other.size;
        sq.startAngle       = other.startAngle;
        sq.rotation         = other.rotation;
        sq.shouldShowCenter = other.shouldShowCenter;
        return sq;
    }//end copy

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

    toString() {
        return `SWTwoTonedSquare(center: ${this.center.toString()}, ` +
               `size: ${this.size.toFixed(2)}, n: ${this.n}, ` +
               `startAngle: ${this.startAngle}°, rotation: ${this.rotation.toFixed(1)}°)`;
    }//end toString

}//end class SWTwoTonedSquare

// export default SWTwoTonedSquare;