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.
To play with the various SWSinusoid parameters and see how they affect the wave, check out the SWSinusoid Wave Demo, which focuses on visualizing the wave itself rather than motion.