fix: fixed path rotation with noise setting, path rotation now ignore…

…s rotate animation
tsparticles · Jul 22, 2020 · 554fef1 · 554fef1
1 parent 8509f72
commit 554fef1
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 23 deletions.
diff --git a/core/main/src/Core/Interfaces/IParticle.ts b/core/main/src/Core/Interfaces/IParticle.ts
@@ -16,6 +16,7 @@ export interface IParticle {
     randomIndexData?: number;
 
     readonly angle: number;
+    readonly pathAngle: number;
     readonly bubble: IBubbleParticleData;
     readonly color: IHsl | undefined;
     readonly close: boolean;

diff --git a/core/main/src/Core/Particle.ts b/core/main/src/Core/Particle.ts
@@ -41,6 +41,7 @@ import { Mover } from "./Particle/Mover";
  */
 export class Particle implements IParticle {
     public angle: number;
+    public pathAngle: number;
     public destroyed: boolean;
     public rotateDirection: RotateDirection | keyof typeof RotateDirection | RotateDirectionAlt;
     public randomIndexData?: number;
@@ -187,12 +188,11 @@ export class Particle implements IParticle {
         };
 
         const rotateOptions = this.particlesOptions.rotate;
-        const initialAngle = rotateOptions.path
-            ? Math.atan2(this.initialVelocity.vertical, this.initialVelocity.horizontal)
-            : 0;
+
         const degAngle = rotateOptions.random ? Math.random() * 360 : rotateOptions.value;
 
-        this.angle = initialAngle + (degAngle * Math.PI) / 180;
+        this.angle = (degAngle * Math.PI) / 180;
+        this.pathAngle = Math.atan2(this.initialVelocity.vertical, this.initialVelocity.horizontal);
 
         this.rotateDirection = rotateOptions.direction;
 

diff --git a/core/main/src/Core/Particle/Updater.ts b/core/main/src/Core/Particle/Updater.ts
@@ -105,27 +105,32 @@ export class Updater {
 
     private updateAngle(delta: IDelta): void {
         const particle = this.particle;
-        const rotateAnimation = particle.particlesOptions.rotate.animation;
+        const rotate = particle.particlesOptions.rotate;
+        const rotateAnimation = rotate.animation;
         const speed = (rotateAnimation.speed / 360) * delta.factor;
         const max = 2 * Math.PI;
 
-        if (rotateAnimation.enable) {
-            switch (particle.rotateDirection) {
-                case RotateDirection.clockwise:
-                    particle.angle += speed;
-
-                    if (particle.angle > max) {
-                        particle.angle -= max;
-                    }
-                    break;
-                case RotateDirection.counterClockwise:
-                default:
-                    particle.angle -= speed;
-
-                    if (particle.angle < 0) {
-                        particle.angle += max;
-                    }
-                    break;
+        if (rotate.path) {
+            particle.pathAngle = Math.atan2(particle.velocity.vertical, particle.velocity.horizontal);
+        } else {
+            if (rotateAnimation.enable) {
+                switch (particle.rotateDirection) {
+                    case RotateDirection.clockwise:
+                        particle.angle += speed;
+
+                        if (particle.angle > max) {
+                            particle.angle -= max;
+                        }
+                        break;
+                    case RotateDirection.counterClockwise:
+                    default:
+                        particle.angle -= speed;
+
+                        if (particle.angle < 0) {
+                            particle.angle += max;
+                        }
+                        break;
+                }
             }
         }
     }

diff --git a/core/main/src/Utils/CanvasUtils.ts b/core/main/src/Utils/CanvasUtils.ts
@@ -230,7 +230,11 @@ export class CanvasUtils {
         context.beginPath();
 
         if (particle.angle !== 0) {
-            context.rotate(particle.angle);
+            if (particle.particlesOptions.rotate.path) {
+                context.rotate(particle.angle + particle.pathAngle);
+            } else {
+                context.rotate(particle.angle);
+            }
         }
 
         if (backgroundMask) {