SketchWave Triangle Demo 2

The SWTriangle class represents a styled triangle with three SWPoint vertices. This demo showcases the SWTriangle's powerful animation capabilities, featuring breathing (scaling) and rotation effects that can be controlled independently or combined. The demo loads with an equilateral triangle that you can animate, reshape by dragging vertices, and customize with various visual controls.

About This Demo

This demo loads with a pre-configured equilateral triangle (side length 10) centered at the origin. You can apply smooth breathing and rotation animations, drag vertices to reshape the triangle in real-time, and control various visual properties including colors, opacity, trails, and visibility. Both animations pause and resume seamlessly, picking up exactly where they left off.

How to Use This App

• Breathing Animation: Click the "Breathing" button or press B to toggle breathing on/off. The triangle smoothly scales from 80% to 160% of its original size and back. Adjust the period (speed) and min/max scale ranges using the sliders in the Breathing section.
• Rotation Animation: Click the "Spinning" button or press S to toggle rotation on/off. The triangle rotates continuously about its centroid. Adjust the rotation rate (degrees per second) using the slider in the Spinning section.
• Pause/Resume: Toggle breathing or spinning off to pause the animation—it will freeze in place. Toggle it back on to resume from exactly where it paused, ensuring smooth continuity.
• Combined Animations: Turn on both breathing and spinning to see the triangle grow/shrink while rotating simultaneously for mesmerizing effects.
• Drag Vertices: Click and drag any of the three colored vertices (A, B, C) to reshape the triangle. The animations will continue with the new shape.
• Drag Centroid: When the centroid is visible, click and drag it to move the entire triangle while preserving its shape.
• Visibility Controls: Use the four toggle buttons to show/hide vertices, centroid, perimeter segments, and the coordinate grid.
• Vertex Size: Adjust the size of the vertex points (4-30 pixels) for better visibility or aesthetic preference.
• Background Opacity: Control the opacity of the background to create phantom trails when set below 100%. Lower values create longer-lasting trails.
• Trail Length: Enable point trails (0-50) to visualize the path each vertex and the centroid take during animation.
• Fill Color & Opacity: Use the color picker to change the triangle's fill color. The border automatically adjusts to be darker. Adjust fill opacity (10-100%) independently.
• Keyboard Shortcuts: Press B (breathe), S (spin), R (reset to factory), or Q (quit all actions).
• Factory Reset: Click "Reset" or press R to restore all settings and the triangle to their original state.
• Save Image: Click the "Save Image" button to download the current canvas as a PNG file with a timestamp.

Key Features Demonstrated

• breathe() Method: Demonstrates SWTriangle's breathe(sinusoid, t) method for smooth scaling animations using a sinusoid function to control the scale factor over time.
• rotateAboutCentroid() Method: Shows rotateAboutCentroid(degPerSec, t) for continuous rotation around the triangle's center point.
• transform() Method: Combines breathing and rotation seamlessly using transform({sinusoid, degPerSec, t}) for complex animations.
• Pause/Resume State Management: Animations preserve their state when paused, allowing seamless continuation without jumping or resetting.
• Real-time Vertex Manipulation: Drag vertices during animation to dynamically reshape the triangle while effects continue.
• SWSinusoid Integration: Uses the SWSinusoid class to create smooth, customizable periodic breathing effects with adjustable amplitude, frequency, and phase.
• Visibility Toggles: Fine-grained control over what elements are visible (vertices, centroid, segments, grid).
• Pen Trails: Optional visual trails show the path of each point during animation using the SWPoint pen system.
• Automatic Border Color: Border color automatically generated to be 30% darker than the fill color for optimal contrast.
• Grid Coordinate System: Works with SWGrid for mathematical coordinate display and precise positioning.
• Factory Settings Pattern: Complete state management with one-click reset to default configuration.

Animation Technical Details

• Breathing: Scale range 0.8-1.6 (80%-160%), period 2.0 seconds, starts at original size (1.0), grows to max, shrinks to min.
• Rotation: Rate of 30°/second (configurable -180° to +180°/sec), accumulates angle continuously for smooth rotation.
• Phase Shift: Breathing uses phase shift of -π/6 to start at scale 1.0 and immediately begin growing.
• Original State Preservation: Triangle maintains reference to original vertices for accurate animation calculations.

Learn More

For complete documentation including all methods, properties, and advanced features of the SWTriangle class, see the Full SWTriangle Reference Guide.