This small showcase implements various particle animations using mathematical equations. Each animation type is defined by a set of equations governing the movement of particles. Included are the mathematical expressions for each animation.
Note: The GIFs below illustrate the visual representation of particle animations--aliases for each are pseudorandom. The mathematical formulas are provided for each animation type, where:
- ( y' ): Updated value for the y-coordinate of a particle.
- ( x' ): Updated value for the x-coordinate of a particle.
- ( z' ): Updated value for the z-coordinate of a particle.
- ( t ): Time variable representing the animation's progression.
How to Implement Particle Animations
Note: Ensure you have a basic Three.js scene setup before proceeding.
import * as THREE from 'three'
// Particle geometry
const particlesGeo = new THREE.BufferGeometry()
const count = 3000;
const positions = new Float32Array(count * 3)
const colors = new Float32Array(count * 3)
const colorList = Object.values(THREE.Color.NAMES);
for (let i = 0; i < count * 3; i++) {
positions[i] = Math.random()
colors[i] = Math.random()
}
particlesGeo.setAttribute('position', new THREE.BufferAttribute(positions, 3))
particlesGeo.setAttribute('color', new THREE.BufferAttribute(colors, 3))
// Particle material
const particlesMaterial = new THREE.PointsMaterial({
size: 0.03,
sizeAttenuation: true,
transparent: true,
depthWrite: false,
blending: THREE.AdditiveBlending,
vertexColors: true,
})
// Particle system
const particles = new THREE.Points(particlesGeo, particlesMaterial)
scene.add(particles)
//Animation Example
const AnimationType = {
DimensionSteal: function () {
for(let i = 0; i < count; i++) {
const i3 = i * 3;
const x = particlesGeo.attributes.position.array[i3]
const y = particlesGeo.attributes.position.array[i3 + 1]
const z = particlesGeo.attributes.position.array[i3 + 2]
particlesGeo.attributes.position.array[i3 + 1] = Math.sin(clock.getElapsedTime() + x) * 1.3
particlesGeo.attributes.position.array[i3] = Math.cos(clock.getElapsedTime() + x * y * z) * 1.3
particlesGeo.attributes.position.array[i3 + 2] = Math.cos(clock.getElapsedTime() + x - y / z) * 1.3
}
particlesGeo.attributes.position.needsUpdate = true
}
}
// Animation loop
function runnable(){
AnimationType.DimensionSteal()
window.requestAnimationFrame(runnable)
}
// Start animation loop
runnable();-
DimensionSteal:
$y' = \sin(t + x) \cdot 1.3$ $x' = \cos(t + x \cdot y \cdot z) \cdot 1.3$ $z' = \cos(t + x - \frac{y}{z}) \cdot 1.3$
-
BreakawaySplitCollapse:
$y' = \sin(t + x) \cdot 1.3$ $z' = \cos(t + x) \cdot 1.3$
-
WaveRecursion:
$y' = \sin(t + x) \cdot 1.3$ $z' = \cos(t) \cdot 1.3$
-
FloatingWave:
$y' = \sin(t + x) \cdot 1.3$ $z' = \cos(t + x \cdot 2\pi) \cdot 1.3$
-
VariantWave:
$y' = \sin(t + x) \cdot 1.3$ $z' = \cos(t + x \cdot y) \cdot 1.3$
-
VariantWaveCollapse:
$y' = \sin(t + x) \cdot 1.3$ $z' = \cos(t + x / y) \cdot 1.3$
-
DoubleEndedWave:
$y' = \sin(t + x) \cdot 1.3$ $z' = \cos(t + x / y) \cdot 1.3 $
-
FakeStomachAcid:
$y' = \sin(t + x) \cdot 1.3$ $z' = \cos(t + x / y \cdot z) \cdot 1.3$
-
FakeCollapseCircle:
$y' = \sin(t + x) \cdot 1.3$ $z' = \cos(t + x \cdot y \cdot z) \cdot 1.3$
-
AttackingWorm:
$y' = \sin(t + x) \cdot 1.3$ $z' = \cos(t + x \cdot y \cdot z) \cdot 1.3$
-
TailwhipFlip:
$y' = \sin(t + x) \cdot 1.3$ $z' = \cos(t + x \cdot y \cdot z) \cdot 1.3$
-
DimensionTeleportCollapse:
$y' = \sin(t + x) \cdot 1.3$ $z' = \cos(t + x / y \cdot z) \cdot 1.3$
-
Desynchronization:
$y' = \sin(t + x) \cdot 1.3$ $z' = \cos(t + x / y / z) \cdot 1.3$
-
Teleportation:
$y' = \sin(t + x) \cdot 1.3$ $z' = \cos(t + x / y / z) \cdot 1.3$
-
Slipspace:
$y' = \sin(t + x) \cdot 1.3$ $z' = \cos(t + x \cdot y \cdot z) \cdot 1.3$ $y' = \cos(t + x / y / z) \cdot 1.3$
-
Opposispace:
$y' = \sin(t + x) \cdot 1.3$ $z' = \cos(t + x) \cdot 1.3$ $z' = \cos(t + x \cdot y \cdot z) \cdot 1.3$
-
ZigZag:
$x' = \sin(t \cdot x) \cdot 1.3$ $y' = \cos(t) \cdot 2$ $z' = \tan(t) \cdot 2$
-
Sinevis:
$x' = \cos(t) \cdot \sin(t \cdot x) \cdot \frac{1.3}{\pi}$ $y' = -\sin(t \cdot y) \cdot 1.3 - \frac{\cos(t)}{\pi}$ $z' = \cos(t \cdot z) \cdot 1.3$
