🚀 Enhanced Version: This demo features an advanced breathing system with four directional modes (Uniform, Horizontal Only, Vertical Only, and Independent X/Y), allowing independent control of horizontal and vertical scaling animations with separate parameters for each axis.
The SWRectangle class represents a styled rectangle with four corner vertices, center point, and powerful animation capabilities. This demo showcases a golden rectangle (aspect ratio φ ≈ 1.618), featuring breathing (scaling) and rotation effects that can be controlled independently or combined.
About the Golden Rectangle
A golden rectangle has an aspect ratio equal to the golden ratio φ = (1+√5)/2 ≈ 1.618 (landscape) or its reciprocal 1/φ ≈ 0.618 (portrait). This proportion appears throughout nature, art, and architecture. The demo dynamically detects and highlights golden rectangles in both orientations with gold coloring when the aspect ratio is within 2% of either value.
How to Use This Demo
- Dimension Controls: Use Width and Height sliders (range 2-20) to adjust rectangle proportions. The aspect ratio display above the Visibility section shows the current ratio and highlights in gold when you achieve a golden rectangle (landscape φ ≈ 1.618 or portrait 1/φ ≈ 0.618).
- Static Rotation: Use the Rotation slider (-180° to +180°) to orient the rectangle. Negative values rotate counter-clockwise, positive values clockwise. This is independent from the animated spinning feature.
- Breathing Animation: Click "Start Breathing" or press B to toggle breathing on/off. The Breathing section provides four distinct modes for controlling how the rectangle scales:
- Uniform - Scales uniformly in all directions simultaneously using a single sinusoid (classic breathing effect)
- Horizontal Only - Scales only along the X-axis, varying width while keeping height constant (horizontal "squeeze and stretch")
- Vertical Only - Scales only along the Y-axis, varying height while keeping width constant (vertical "squeeze and stretch")
- Independent X/Y - Uses separate sinusoids for X and Y axes, enabling completely independent horizontal and vertical breathing with different periods, min/max scales, creating complex wave-like animations
Each mode provides mode-specific controls. In Independent X/Y mode, you can create fascinating effects like pulsing horizontally at one speed while breathing vertically at another, or have opposite phase relationships for interesting geometric transformations.
- Rotation Animation: Click "Start Spinning" or press S to toggle rotation on/off. The rectangle rotates continuously about its center. Adjust rotation rate in the Spinning section.
- Pause/Resume: Both animations pause and resume seamlessly, continuing from where they left off.
- Drag Center: When animations are paused, drag the center point to reposition the rectangle anywhere on the canvas.
- Save Image: Click the "Save Image" button to export the current canvas as a PNG file with timestamp.
- Keyboard Shortcuts: B = breathe, S = spin, Q = quit all, R = reset to factory settings.
- Visibility Toggles: Show/hide vertices, center point, border segments, and grid.
- Appearance Controls: Adjust vertex size, background opacity, trail length, fill color, and fill opacity.
Key Features
- Independent Width and Height sliders for precise dimension control (2-20 units)
- Dynamic aspect ratio display with automatic golden ratio detection (both φ ≈ 1.618 and 1/φ ≈ 0.618)
- Static rotation slider (-180° to +180°) for orienting the rectangle
- Four breathing modes: Uniform, Horizontal Only, Vertical Only, and Independent X/Y
- Independent X and Y breathing parameters (period, min/max scales) for complex animations
- Draggable center point for repositioning (maintains rectangle shape)
- Continuous animated rotation about center (independent from static rotation)
- Combined breathing + rotation transforms with no interference
- Save canvas as PNG image with timestamp
- Pen trails for all vertices and center (optional, adjustable length)
- Real-time color and opacity controls for fill and border
- Comprehensive visibility toggles (vertices, center, segments, grid)
Animation Technical Details
- Dimension Control: Width and Height sliders recreate the rectangle with new proportions while preserving center position, colors, and all other settings.
- Static Rotation: Initial orientation controlled by Rotation slider. This base angle is preserved when adjusting dimensions and is independent from animated spinning.
- Breathing Modes Architecture:
- Uniform: breathe(sinusoidX, sinusoidX, t) - Same sinusoid for both axes
- Horizontal Only: breathe(sinusoidX, null, t) - Only X-axis scaling, Y remains constant
- Vertical Only: breathe(null, sinusoidY, t) - Only Y-axis scaling, X remains constant
- Independent X/Y: breathe(sinusoidX, sinusoidY, t) - Separate sinusoids, each with independent period/min/max
- Breathing Implementation: Each sinusoid uses phase shift -π/6 to start at original size (scale factor 1.0), grow to max scale, then shrink to min scale. Each vertex is scaled from the center: newPos = center + (originalPos - center) * [scaleX, scaleY]. Null sinusoid parameters result in scale factor 1.0 (no scaling on that axis).
- Animated Rotation: Continuous CCW rotation preserving center position. Negative rates rotate CW. Combines with static rotation angle.
- Transform Method: Combines independent X/Y breathing and animated rotation from original vertex positions for smooth, interference-free animation. Order of operations: (1) Scale each vertex from center using independent X/Y factors, (2) Rotate scaled vertices about center. This ensures breathing and rotation don't interfere with each other.
- Golden Ratio Detection: Compares current aspect ratio (width/height) against both φ ≈ 1.618 and 1/φ ≈ 0.618 with 2% tolerance to recognize golden rectangles in any orientation.
Learn More
For complete documentation of SWRectangle methods, properties, and usage examples, visit the SWRectangle Reference.