Particles Wave
A customisable animating wave goverened by mathematical expressions and some creativity!
Imports
Usage
Basic Usage
Only the startColor, endColor, and the particlesCount props are used.
Using the wave Function props
There are a bunch of tailor made wave functions that are available in Zephyr3D.
One such is used here - circularMotionXZ. More functions can be found here
Custom Wave Function
Custom wave functions can be added as well. The function's arguments and return type should be consistent with the waveFunction prop's type (Mentioned in the props section).
The custom wave function showcased in the example is a diamond sine wave.
Props
| Prop | Description | Type | Default |
|---|---|---|---|
particlesCount | Number of particles in the wave | number | 500 |
xLength | Length of the wave in the X direction | number | 14 |
yLength | Length of the wave in the Y direction | number | 14 |
zLength | Length of the wave in the Z direction | number | 4 |
duration | In milliseconds - governs the speed of the wave | number | 1000 |
startColor | The start color in the `lerp` function while calculating the color of each particle | string | #7439e2 |
endColor | The end color in the `lerp` function while calculating the color of each particle | string | #ce9082 |
geometry | Geometry defines the shape of the particle | BufferGeometry | new SphereGeometry(0.02, 4, 4) |
material | Material of the particle in the wave | Material | new MeshStandardMaterial({ color: startColor }) |
waveFunction | Mathematical expression governing the shape of the wave | sineWaveXZ | Mathematical expression governing the shape of the wave |