SketchWave Rectangle Demo

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.