SWSinusoid is a SketchWaveJS class that represents sinusoidal (wave) functions.
It encapsulates the mathematical equation y = A·sin(B(x - D)) + C, where A is the amplitude,
B determines the period (2Ï€/B), D is the phase shift, and C is the vertical shift.
SWSinusoid makes it easy to create, manipulate, and animate wave-based motion in your sketches.
About This Demo
This demonstration shows a purple ball oscillating vertically following a sinusoidal path.
The ball bounces between y-coordinates of -9 and 4, illustrating how SWSinusoid can be used to create smooth, periodic motion.
Real-time displays show the wave's equation and the ball's current position (t, y), helping you visualize the relationship
between time and the sinusoidal function.
How to Use This App
- Start/Pause Button: Click to begin animation or pause it. Animation starts paused. The button changes color (green when paused, red when running).
- Reset Button: Returns everything to initial state - ball position, time, period (2.0s), background opacity (100%), and clears any motion trails. Only available when paused.
- Period Slider: Adjust from 0.5 to 5.0 seconds to control oscillation speed. The frequency (in Hz) updates automatically. When paused, changes the period without moving the ball.
- Background Opacity Slider: Adjust from 0% to 100%. Lower values create motion trails by letting previous frames remain partially visible, creating a visual history of the ball's path.
- Click Canvas: Toggle grid visibility on/off to see the coordinate system or have a cleaner view.
- Save Image: Capture the current canvas as a PNG file with timestamp.
- Equation Display: Shows the current sinusoidal equation with actual parameter values, updating when you change the period.
- Position Display: Shows the ball's current position as (t, y) coordinates, updating in real-time during animation.
Key Concepts Demonstrated
- Sinusoidal Motion: How sine waves create smooth, periodic oscillations perfect for natural-looking movement
- Period vs Frequency: The relationship between period (time per cycle) and frequency (cycles per second)
- Live Equation Visualization: See how changing parameters affects the mathematical equation in real-time
- Motion Trails: Use background opacity to visualize the path of motion over time
- Animation Control: Pause/resume without position jumps, demonstrating proper animation timing
- Coordinate Mapping: Integration with SWGrid to display motion in a mathematical coordinate system
Learn More
For complete documentation including all methods, properties, and advanced features of the SWSinusoid class,
see the Full SWSinusoid Reference Guide.