🌹 SWRose Reference

Overview

The SWRose class draws a polar rose as a closed polygon. The curve is defined in polar coordinates as:

r = a · cos(n · θ)    (cosine form, default)
r = a · sin(n · θ)    (sine form; rotates the rose by 90/n degrees)

Negative Radius Semantics

The polar rose naturally produces negative r values (when cos or sin is negative). SWRose handles these correctly using the standard Cartesian conversion:

When r < 0, the formula plots the point in the direction opposite to θ, which produces the petal shapes on the other side of the origin. No special handling is required; the math works out automatically.

Cosine vs Sine Form

The cosine form aligns petals symmetrically to the horizontal axis (for odd n, one petal points right). The sine form is a rotation of the cosine form by 90/n degrees. For n=4, the cosine form gives petals at 0°, 90°, 180°, 270° while the sine form rotates the entire rose 22.5°. Both produce the same rose shape.

Rotation

SWRose supports two layers of rotation, both applied about the center point:

• rotationDeg — Static base rotation set by setRotation(). Persists across frames; survives reset().
• rotation — Accumulated rotation incremented by rotate(). Starts at 0; cleared by reset().

Effective rotation = rotationDeg + rotation. All angles are CCW positive (user-space convention).

Key Capabilities

• Polar Rose Curves: Both r=a·cos(nθ) and r=a·sin(nθ) with a single boolean toggle
• Integer Petal Control: Slide n from 1 to 12+ to explore 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24 petal configurations
• Spin Animation: Rotate continuously about the center using rotate()
• Bloom Animation: Oscillate the amplitude (a) sinusoidally using setA() from the sketch layer
• Fill & Stroke Colors: Independent color pickers and alpha channels
• Draggable Center: Move the entire rose by repositioning the center SWPoint
• Dual Coordinate Systems: draw() (screen pixels) or drawOnGrid() (grid user coordinates)

Constructor

// 8-petal rose (n=4, even → 2n petals), red stroke, pink fill
const stroke = new SWColor(0, 80, 80, 100, "roseStroke");
const fill   = new SWColor(0, 40, 100, 60, "roseFill");
let rose = new SWRose(new SWPoint(0, 0), 8, 4, stroke, fill, 3);

// 3-petal rose (n=3, odd → n petals), blue, no fill
const blueStroke = new SWColor(220, 80, 80, 100, "blueStroke");
let tri = new SWRose(new SWPoint(0, 0), 6, 3, blueStroke, undefined, 2);

// 5-petal rose, sine form
const gold = new SWColor(40, 90, 90, 100, "gold");
let penta = new SWRose(new SWPoint(0, 0), 7, 5, gold, undefined, 2, false);

// 12-petal rose (n=6, even → 12 petals), pre-rotated 15°
let twelve = new SWRose(new SWPoint(0, 0), 8, 6, stroke, fill, 2, true, 15);

// Stroke-only, single petal (n=1 with cos: traces a circle — useful curiosity)
const dark = new SWColor(0, 0, 20, 100, "dark");
let single = new SWRose(new SWPoint(0, 0), 5, 1, dark);

Properties

Methods

Drawing Methods

function draw() {
    background(220);
    rose.draw();
}

function draw() {
    background(220);
    grid.draw();
    rose.drawOnGrid(grid);
    grid.updateScreenBounds();
}

Rotation Animation

const SPIN_SPEED = 45; // degrees per second
let prevT = 0;

function draw() {
    const t      = millis() / 1000;
    const deltaT = prevT > 0 ? t - prevT : 0;
    prevT = t;

    background(240);
    grid.draw();
    rose.rotate(SPIN_SPEED * deltaT);  // spin BEFORE drawing
    rose.drawOnGrid(grid);
    grid.updateScreenBounds();
}

Bloom Animation

const BLOOM_SPEED = 0.5; // Hz
const BLOOM_DEPTH = 2.0; // Δa (grid units)
let baseA = 8;

function draw() {
    const t       = millis() / 1000;
    const bloomedA = baseA + BLOOM_DEPTH * sin(TWO_PI * BLOOM_SPEED * t);
    rose.setA(max(0.1, bloomedA));
    rose.drawOnGrid(grid);
}

Setter Methods

Reset & Utility Methods

Code Examples

Minimal sketch (rose on a grid)

let grid, rose;

function setup() {
    createCanvas(400, 400);
    colorMode(HSB, 360, 100, 100, 100);
    initializeSWColors();

    grid = new SWGrid({ UL: new SWPoint(-10, 10), LR: new SWPoint(10, -10) });
    const stroke = new SWColor(0, 80, 70, 100, "s");
    const fill   = new SWColor(0, 40, 100, 60, "f");
    rose = new SWRose(new SWPoint(0, 0), 8, 4, stroke, fill, 3);
}

function draw() {
    background(240);
    grid.draw();
    rose.drawOnGrid(grid);
    grid.updateScreenBounds();
}

Spinning rose

let prevT = 0;
const SPIN_SPEED = 60; // degrees per second

function setup() { /* ... create grid and rose ... */ }

function draw() {
    const t      = millis() / 1000;
    const deltaT = prevT > 0 ? t - prevT : 0;
    prevT = t;

    background(240);
    grid.draw();
    rose.rotate(SPIN_SPEED * deltaT);   // spin BEFORE drawing
    rose.drawOnGrid(grid);
    grid.updateScreenBounds();
}

Exploring n values at runtime

function keyPressed() {
    if (key === 'ArrowUp')   { rose.setN(rose.n + 1); }
    if (key === 'ArrowDown') { rose.setN(Math.max(1, rose.n - 1)); }
    if (key === 'c')         { rose.setUseCosine(!rose.useCosine); }
    if (key === 'r')         { rose.reset(); }
}

Bloom (pulsing petals)

const BLOOM_SPEED = 0.5; // Hz
const BLOOM_DEPTH = 2.0; // Δa
let baseA = 8;

function draw() {
    const t = millis() / 1000;
    const bloomedA = baseA + BLOOM_DEPTH * sin(TWO_PI * BLOOM_SPEED * t);
    rose.setA(max(0.1, bloomedA));
    rose.drawOnGrid(grid);
}

Using a color picker with SWColor.fromHex()

const picker = document.getElementById('strokePicker');
const alpha  = document.getElementById('alphaSlider');

picker.addEventListener('input', () => {
    const col = SWColor.fromHex(picker.value, Number(alpha.value), 'roseStroke');
    rose.setStrokeColor(col);
});

alpha.addEventListener('input', () => {
    const col = SWColor.fromHex(picker.value, Number(alpha.value), 'roseStroke');
    rose.setStrokeColor(col);
});

Required script tags (in dependency order)

<script src="https://cdn.jsdelivr.net/npm/p5@1.6.0/lib/p5.js"></script>

<!-- SketchWaveJS classes in dependency order -->
<script src="../shapeClasses/swColor.js"></script>
<script src="../shapeClasses/swPoint.js"></script>
<script src="../shapeClasses/swGrid.js"></script>
<script src="../shapeClasses/swRose.js"></script>

<!-- Your sketch -->
<script src="../sketches/yourSketch.js"></script>

Design Notes

• Petal count doubles for even n: Because r = a·cos(nθ) for even n is negative over half the [0, 2π] range, those negative-r segments fold back through the origin and produce petals interleaved with the positive-r petals, doubling the count to 2n.
• n=1 (cosine) is a circle, not a petal: r = a·cos(θ) in Cartesian is the circle x² + y² = ax, a circle of radius a/2 centered at (a/2, 0). n=1 with sine gives the same circle shifted vertically. Both are valid but not the typical "rose" shape.
• SAMPLE_COUNT = 360 is per full sweep, not per petal: For n=12 (24 petals), each petal gets ~15 samples — smooth at normal canvas sizes. Increase to 720 for very fine detail or large canvas renders.
• Fill with semi-transparency reveals petal overlaps: When multiple petals overlap near the center (especially for large n), a semi-transparent fill shows the layering beautifully.
• reset() does not move the center: This allows dragging and repositioning without losing position on reset, consistent with SWSpiral and other SketchWaveJS polar classes.
• Fractional n produces multi-loop "rhodonea" curves: For example, n=3/2 (enter 1.5) traces a 3-petal figure over a larger theta range. For non-integer n, the curve will not close within [0, 2π]; increase SAMPLE_COUNT or extend the sweep externally for best results.

Source Code

The complete SWRose class implementation:

// Loading source code...