├── LICENSE ├── README.md └── animations ├── .gitkeep ├── AttackingWorm.gif ├── BreakawaySplitCollapse.gif ├── Desyncrhonization.gif ├── DimensionSteal.gif ├── DimensionTeleportCollapse.gif ├── DoubleEndedWave.gif ├── FakeCollapseCircle.gif ├── FakeStomachAcid.gif ├── FloatingWave.gif ├── Opposispace.gif ├── Sinevis.gif ├── Slipspace.gif ├── TailwhipFlip.gif ├── Teleportation.gif ├── VariantWave.gif ├── VariantWaveCollapse.gif ├── WaveRecursion.gif └── ZigZag.gif /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Luke 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # Particle Animations Example 3 | 4 | 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. 5 |
6 | 7 | **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: 8 | - \( y' \): Updated value for the y-coordinate of a particle. 9 | - \( x' \): Updated value for the x-coordinate of a particle. 10 | - \( z' \): Updated value for the z-coordinate of a particle. 11 | - \( t \): Time variable representing the animation's progression. 12 |
13 |
14 | How to Implement Particle Animations 15 |
16 |

Note: Ensure you have a basic Three.js scene setup before proceeding.

17 |

18 | 19 | ```javascript 20 | import * as THREE from 'three' 21 | 22 | // Particle geometry 23 | const particlesGeo = new THREE.BufferGeometry() 24 | const count = 3000; 25 | 26 | const positions = new Float32Array(count * 3) 27 | const colors = new Float32Array(count * 3) 28 | 29 | const colorList = Object.values(THREE.Color.NAMES); 30 | 31 | for (let i = 0; i < count * 3; i++) { 32 | positions[i] = Math.random() 33 | colors[i] = Math.random() 34 | } 35 | 36 | particlesGeo.setAttribute('position', new THREE.BufferAttribute(positions, 3)) 37 | particlesGeo.setAttribute('color', new THREE.BufferAttribute(colors, 3)) 38 | 39 | // Particle material 40 | const particlesMaterial = new THREE.PointsMaterial({ 41 | size: 0.03, 42 | sizeAttenuation: true, 43 | transparent: true, 44 | depthWrite: false, 45 | blending: THREE.AdditiveBlending, 46 | vertexColors: true, 47 | }) 48 | 49 | // Particle system 50 | const particles = new THREE.Points(particlesGeo, particlesMaterial) 51 | scene.add(particles) 52 | 53 | //Animation Example 54 | const AnimationType = { 55 | DimensionSteal: function () { 56 | for(let i = 0; i < count; i++) { 57 | const i3 = i * 3; 58 | const x = particlesGeo.attributes.position.array[i3] 59 | const y = particlesGeo.attributes.position.array[i3 + 1] 60 | const z = particlesGeo.attributes.position.array[i3 + 2] 61 | 62 | particlesGeo.attributes.position.array[i3 + 1] = Math.sin(clock.getElapsedTime() + x) * 1.3 63 | particlesGeo.attributes.position.array[i3] = Math.cos(clock.getElapsedTime() + x * y * z) * 1.3 64 | particlesGeo.attributes.position.array[i3 + 2] = Math.cos(clock.getElapsedTime() + x - y / z) * 1.3 65 | } 66 | 67 | particlesGeo.attributes.position.needsUpdate = true 68 | 69 | } 70 | } 71 | 72 | // Animation loop 73 | function runnable(){ 74 | AnimationType.DimensionSteal() 75 | window.requestAnimationFrame(runnable) 76 | } 77 | 78 | // Start animation loop 79 | runnable(); 80 | 81 | ``` 82 |

83 |
84 |
85 | 86 | 87 | 1. **DimensionSteal:** 88 | - $y' = \sin(t + x) \cdot 1.3$ 89 | - $x' = \cos(t + x \cdot y \cdot z) \cdot 1.3$ 90 | - $z' = \cos(t + x - \frac{y}{z}) \cdot 1.3$ 91 | 92 | ![animations/DimensionSteal.gif](https://github.com/rewindbytes/ParticleAnimations/blob/main/animations/DimensionSteal.gif) 93 | 94 | 2. **BreakawaySplitCollapse:** 95 | - $y' = \sin(t + x) \cdot 1.3$ 96 | - $z' = \cos(t + x) \cdot 1.3$ 97 | 98 | ![animations/BreakawaySplitCollapse.gif](https://github.com/rewindbytes/ParticleAnimations/blob/main/animations/BreakawaySplitCollapse.gif) 99 | 100 | 3. **WaveRecursion:** 101 | - $y' = \sin(t + x) \cdot 1.3$ 102 | - $z' = \cos(t) \cdot 1.3$ 103 | 104 | ![animations/WaveRecursion.gif](https://github.com/rewindbytes/ParticleAnimations/blob/main/animations/WaveRecursion.gif) 105 | 106 | 4. **FloatingWave:** 107 | - $y' = \sin(t + x) \cdot 1.3$ 108 | - $z' = \cos(t + x \cdot 2\pi) \cdot 1.3$ 109 | 110 | ![animations/FloatingWave.gif](https://github.com/rewindbytes/ParticleAnimations/blob/main/animations/FloatingWave.gif) 111 | 112 | 5. **VariantWave:** 113 | - $y' = \sin(t + x) \cdot 1.3$ 114 | - $z' = \cos(t + x \cdot y) \cdot 1.3$ 115 | 116 | ![animations/VariantWave.gif](https://github.com/rewindbytes/ParticleAnimations/blob/main/animations/VariantWave.gif) 117 | 118 | 6. **VariantWaveCollapse:** 119 | - $y' = \sin(t + x) \cdot 1.3$ 120 | - $z' = \cos(t + x / y) \cdot 1.3$ 121 | 122 | ![animations/VariantWaveCollapse.gif](https://github.com/rewindbytes/ParticleAnimations/blob/main/animations/VariantWaveCollapse.gif) 123 | 124 | 7. **DoubleEndedWave:** 125 | - $y' = \sin(t + x) \cdot 1.3$ 126 | - $z' = \cos(t + x / y) \cdot 1.3 $ 127 | 128 | ![animations/DoubleEndedWave.gif](https://github.com/rewindbytes/ParticleAnimations/blob/main/animations/DoubleEndedWave.gif) 129 | 130 | 8. **FakeStomachAcid:** 131 | - $y' = \sin(t + x) \cdot 1.3$ 132 | - $z' = \cos(t + x / y \cdot z) \cdot 1.3$ 133 | 134 | ![animations/FakeStomachAcid.gif](https://github.com/rewindbytes/ParticleAnimations/blob/main/animations/FakeStomachAcid.gif) 135 | 136 | 9. **FakeCollapseCircle:** 137 | - $y' = \sin(t + x) \cdot 1.3$ 138 | - $z' = \cos(t + x \cdot y \cdot z) \cdot 1.3$ 139 | 140 | ![animations/FakeCollapseCircle.gif](https://github.com/rewindbytes/ParticleAnimations/blob/main/animations/FakeCollapseCircle.gif) 141 | 142 | 10. **AttackingWorm:** 143 | - $y' = \sin(t + x) \cdot 1.3$ 144 | - $z' = \cos(t + x \cdot y \cdot z) \cdot 1.3$ 145 | 146 | ![animations/AttackingWorm.gif](https://github.com/rewindbytes/ParticleAnimations/blob/main/animations/AttackingWorm.gif) 147 | 148 | 11. **TailwhipFlip:** 149 | - $y' = \sin(t + x) \cdot 1.3$ 150 | - $z' = \cos(t + x \cdot y \cdot z) \cdot 1.3$ 151 | 152 | ![animations/TailWhipFlip.gif](https://github.com/rewindbytes/ParticleAnimations/blob/main/animations/TailwhipFlip.gif) 153 | 154 | 12. **DimensionTeleportCollapse:** 155 | - $y' = \sin(t + x) \cdot 1.3$ 156 | - $z' = \cos(t + x / y \cdot z) \cdot 1.3$ 157 | 158 | ![animations/DimensionTeleportCollapse.gif](https://github.com/rewindbytes/ParticleAnimations/blob/main/animations/DimensionTeleportCollapse.gif) 159 | 160 | 13. **Desynchronization:** 161 | - $y' = \sin(t + x) \cdot 1.3$ 162 | - $z' = \cos(t + x / y / z) \cdot 1.3$ 163 | 164 | ![animations/Desyncrhonization.gif](https://github.com/rewindbytes/ParticleAnimations/blob/main/animations/Desyncrhonization.gif) 165 | 166 | 14. **Teleportation:** 167 | - $y' = \sin(t + x) \cdot 1.3$ 168 | - $z' = \cos(t + x / y / z) \cdot 1.3$ 169 | 170 | ![animations/Teleportation.gif](https://github.com/rewindbytes/ParticleAnimations/blob/main/animations/Teleportation.gif) 171 | 172 | 15. **Slipspace:** 173 | - $y' = \sin(t + x) \cdot 1.3$ 174 | - $z' = \cos(t + x \cdot y \cdot z) \cdot 1.3$ 175 | - $y' = \cos(t + x / y / z) \cdot 1.3$ 176 | 177 | ![animations/Slipspace.gif](https://github.com/rewindbytes/ParticleAnimations/blob/main/animations/Slipspace.gif) 178 | 179 | 16. **Opposispace:** 180 | - $y' = \sin(t + x) \cdot 1.3$ 181 | - $z' = \cos(t + x) \cdot 1.3$ 182 | - $z' = \cos(t + x \cdot y \cdot z) \cdot 1.3$ 183 | 184 | ![animations/Opposispace.gif](https://github.com/rewindbytes/ParticleAnimations/blob/main/animations/Opposispace.gif) 185 | 186 | 17. **ZigZag:** 187 | - $x' = \sin(t \cdot x) \cdot 1.3$ 188 | - $y' = \cos(t) \cdot 2$ 189 | - $z' = \tan(t) \cdot 2$ 190 | 191 | ![animations/ZigZag.gif](https://github.com/rewindbytes/ParticleAnimations/blob/main/animations/ZigZag.gif) 192 | 193 | 18. **Sinevis:** 194 | - $x' = \cos(t) \cdot \sin(t \cdot x) \cdot \frac{1.3}{\pi}$ 195 | - $y' = -\sin(t \cdot y) \cdot 1.3 - \frac{\cos(t)}{\pi}$ 196 | - $z' = \cos(t \cdot z) \cdot 1.3$ 197 | 198 | ![animations/Sinevis.gif](https://github.com/rewindbytes/ParticleAnimations/blob/main/animations/Sinevis.gif) 199 | -------------------------------------------------------------------------------- /animations/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /animations/AttackingWorm.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qbb84/ThreeJS-Particle-Animations-Demo/20223beec49155c0da30a584e2b2d1e2c553ccc2/animations/AttackingWorm.gif -------------------------------------------------------------------------------- /animations/BreakawaySplitCollapse.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qbb84/ThreeJS-Particle-Animations-Demo/20223beec49155c0da30a584e2b2d1e2c553ccc2/animations/BreakawaySplitCollapse.gif -------------------------------------------------------------------------------- /animations/Desyncrhonization.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qbb84/ThreeJS-Particle-Animations-Demo/20223beec49155c0da30a584e2b2d1e2c553ccc2/animations/Desyncrhonization.gif -------------------------------------------------------------------------------- /animations/DimensionSteal.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qbb84/ThreeJS-Particle-Animations-Demo/20223beec49155c0da30a584e2b2d1e2c553ccc2/animations/DimensionSteal.gif -------------------------------------------------------------------------------- /animations/DimensionTeleportCollapse.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qbb84/ThreeJS-Particle-Animations-Demo/20223beec49155c0da30a584e2b2d1e2c553ccc2/animations/DimensionTeleportCollapse.gif -------------------------------------------------------------------------------- /animations/DoubleEndedWave.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qbb84/ThreeJS-Particle-Animations-Demo/20223beec49155c0da30a584e2b2d1e2c553ccc2/animations/DoubleEndedWave.gif -------------------------------------------------------------------------------- /animations/FakeCollapseCircle.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qbb84/ThreeJS-Particle-Animations-Demo/20223beec49155c0da30a584e2b2d1e2c553ccc2/animations/FakeCollapseCircle.gif -------------------------------------------------------------------------------- /animations/FakeStomachAcid.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qbb84/ThreeJS-Particle-Animations-Demo/20223beec49155c0da30a584e2b2d1e2c553ccc2/animations/FakeStomachAcid.gif -------------------------------------------------------------------------------- /animations/FloatingWave.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qbb84/ThreeJS-Particle-Animations-Demo/20223beec49155c0da30a584e2b2d1e2c553ccc2/animations/FloatingWave.gif -------------------------------------------------------------------------------- /animations/Opposispace.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qbb84/ThreeJS-Particle-Animations-Demo/20223beec49155c0da30a584e2b2d1e2c553ccc2/animations/Opposispace.gif -------------------------------------------------------------------------------- /animations/Sinevis.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qbb84/ThreeJS-Particle-Animations-Demo/20223beec49155c0da30a584e2b2d1e2c553ccc2/animations/Sinevis.gif -------------------------------------------------------------------------------- /animations/Slipspace.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qbb84/ThreeJS-Particle-Animations-Demo/20223beec49155c0da30a584e2b2d1e2c553ccc2/animations/Slipspace.gif -------------------------------------------------------------------------------- /animations/TailwhipFlip.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qbb84/ThreeJS-Particle-Animations-Demo/20223beec49155c0da30a584e2b2d1e2c553ccc2/animations/TailwhipFlip.gif -------------------------------------------------------------------------------- /animations/Teleportation.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qbb84/ThreeJS-Particle-Animations-Demo/20223beec49155c0da30a584e2b2d1e2c553ccc2/animations/Teleportation.gif -------------------------------------------------------------------------------- /animations/VariantWave.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qbb84/ThreeJS-Particle-Animations-Demo/20223beec49155c0da30a584e2b2d1e2c553ccc2/animations/VariantWave.gif -------------------------------------------------------------------------------- /animations/VariantWaveCollapse.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qbb84/ThreeJS-Particle-Animations-Demo/20223beec49155c0da30a584e2b2d1e2c553ccc2/animations/VariantWaveCollapse.gif -------------------------------------------------------------------------------- /animations/WaveRecursion.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qbb84/ThreeJS-Particle-Animations-Demo/20223beec49155c0da30a584e2b2d1e2c553ccc2/animations/WaveRecursion.gif -------------------------------------------------------------------------------- /animations/ZigZag.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qbb84/ThreeJS-Particle-Animations-Demo/20223beec49155c0da30a584e2b2d1e2c553ccc2/animations/ZigZag.gif --------------------------------------------------------------------------------