fix: fixed click handler, it wasn't working fine

fix: improved z index rates formulas
tsparticles · Aug 9, 2021 · fd9873b · fd9873b
1 parent 98e5b6d
commit fd9873b
Show file tree

Hide file tree

Showing 14 changed files with 117 additions and 35 deletions.
diff --git a/components/angular/yarn.lock b/components/angular/yarn.lock
@@ -6053,11 +6053,6 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-pathseg@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/pathseg/-/pathseg-1.2.0.tgz#22af051e28037671e7799e296fe96c5dcbe53acd"
-  integrity sha512-+pQS7lTaoVIXhaCW7R3Wd/165APzZHWzYVqe7dxzdupxQwebgpBaCmf0/XZwmoA/rkDq3qvzO0qv4d5oFVrBRw==
-
 performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
@@ -8017,13 +8012,6 @@ tslint@~6.1.3:
     tslib "^1.13.0"
     tsutils "^2.29.0"
 
-tsparticles@^1.33.2:
-  version "1.33.2"
-  resolved "https://registry.yarnpkg.com/tsparticles/-/tsparticles-1.33.2.tgz#956d7a08c026585a9d5cfe86b9834bbbdb82bf0c"
-  integrity sha512-/oLQWdwyaz9GXTl9j/xckdcIerVlbSlGVd6jT8h8QKPkkkMaqcLlVtVBMLF3542FaH2RUevceTIS7O2JncVdUA==
-  optionalDependencies:
-    pathseg "^1.2.0"
-
 tsutils@^2.29.0:
   version "2.29.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.29.0.tgz#32b488501467acbedd4b85498673a0812aca0b99"

diff --git a/demo/vanilla/app.js b/demo/vanilla/app.js
@@ -61,6 +61,10 @@ app.get('/themes', function (req, res) {
     res.render('themes');
 });
 
+app.get('/click', function (req, res) {
+    res.render('click');
+});
+
 app.get("/presets", function (req, res) {
     res.render("presets/index");
 });

diff --git a/demo/vanilla/views/click.pug b/demo/vanilla/views/click.pug
@@ -0,0 +1,91 @@
+doctype html
+html(lang="en")
+    head
+        meta(charset="utf-8")
+        meta(name="description", content= "tsParticles")
+        meta(name="author", content= "Matteo Bruni")
+        meta(name="apple-mobile-web-app-capable" content="yes")
+        meta(name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no")
+
+        meta(name="twitter:card" content="summary_large_image")
+        meta(name="twitter:creator" content="@HollowMatt_ITA")
+        meta(name="twitter:image:src" content="https://cdn.matteobruni.it/images/particles/demo.png")
+        meta(property="og:title" content="tsParticles - A lightweight TypeScript library for creating particles")
+        meta(property="og:site_name" content="tsParticles")
+        meta(property="og:url" content="https://particles.js.org/")
+        meta(property="og:description" content="A lightweight TypeScript library for creating particles.")
+        meta(property="og:image" content="https://cdn.matteobruni.it/images/particles/demo.png")
+
+        title tsParticles
+        link(href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css")
+        link(href="/fontawesome/css/all.css" rel="stylesheet" type="text/css")
+        link(href="/jsoneditor/jsoneditor.css" rel="stylesheet" type="text/css")
+
+        style.
+            /* ---- reset ---- */
+            body {
+                margin: 0;
+                font: normal 75% Arial, Helvetica, sans-serif;
+            }
+
+            canvas {
+                display: block;
+                vertical-align: bottom;
+            }
+    body
+        #tsparticles
+
+        script(src="/jquery/jquery.slim.min.js")
+        script(src="/popper.js/umd/popper.min.js")
+        script(src="/bootstrap/js/bootstrap.min.js")
+        script(src="/tsparticles/tsparticles.min.js")
+        script.
+            tsParticles
+                .load("tsparticles", {
+                    background: {
+                        color: "#000"
+                    },
+                    fullScreen: {
+                        enable: true,
+                        zIndex: 0
+                    },
+                    particles: {
+                        number: {
+                            value: 300
+                        },
+                        size: {
+                            value: 5
+                        },
+                        move: {
+                            enable: true
+                        }
+                    }
+                }).then(container => {
+                container.addClickHandler((event, particles) => {
+                    for (const particle of particles) {
+                        if (particle.customClicked) {
+                            continue;
+                        }
+
+                        particle.customClicked = true;
+
+                        const oldColor = {
+                            h: particle.color.h.value,
+                            s: particle.color.s.value,
+                            l: particle.color.l.value,
+                        };
+
+                        particle.color.h.value = 0;
+                        particle.color.s.value = 100;
+                        particle.color.l.value = 50;
+
+                        setTimeout(() => {
+                            particle.color.h.value = oldColor.h;
+                            particle.color.s.value = oldColor.s;
+                            particle.color.l.value = oldColor.l;
+
+                            delete particle.customClicked;
+                        }, 1000);
+                    }
+                });
+            });
diff --git a/engine/src/Core/Canvas.ts b/engine/src/Core/Canvas.ts
@@ -253,7 +253,7 @@ export class Canvas {
 
         const options = this.container.actualOptions;
         const zIndexOptions = particle.options.zIndex;
-        const zOpacityFactor = 1 - zIndexOptions.opacityRate * particle.zIndexFactor;
+        const zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate;
         const radius = particle.getRadius();
         const opacity = twinkling ? twinkle.opacity : particle.bubble.opacity ?? particle.opacity.value;
         const strokeOpacity = particle.stroke.opacity ?? opacity;
@@ -267,7 +267,7 @@ export class Canvas {
         const orbitOptions = particle.options.orbit;
 
         this.draw((ctx) => {
-            const zSizeFactor = 1 - zIndexOptions.sizeRate * particle.zIndexFactor;
+            const zSizeFactor = (1 - particle.zIndexFactor) ** zIndexOptions.sizeRate;
 
             const zStrokeOpacity = strokeOpacity * zOpacityFactor;
             const strokeColorValue = sColor ? getStyleFromHsl(sColor, zStrokeOpacity) : fillColorValue;

diff --git a/engine/src/Core/Container.ts b/engine/src/Core/Container.ts
@@ -461,13 +461,12 @@ export class Container {
                 return;
             }
 
-            const pxRatio = this.retina.pixelRatio;
-            const posRetina = {
-                x: pos.x * pxRatio,
-                y: pos.y * pxRatio,
-            };
-
-            const particles = this.particles.quadTree.queryCircle(posRetina, this.retina.sizeValue);
+            const pxRatio = this.retina.pixelRatio,
+                posRetina = {
+                    x: pos.x * pxRatio,
+                    y: pos.y * pxRatio,
+                },
+                particles = this.particles.quadTree.queryCircle(posRetina, pxRatio);
 
             callback(e, particles);
         };

diff --git a/engine/src/Core/Particle.ts b/engine/src/Core/Particle.ts
@@ -401,7 +401,7 @@ export class Particle implements IParticle {
         particles.needsSort = particles.needsSort || particles.lastZIndex < this.position.z;
         particles.lastZIndex = this.position.z;
 
-        // Scale z-index factor to be between 0 and 2
+        // Scale z-index factor
         this.zIndexFactor = this.position.z / container.zLayers;
 
         /* opacity */

diff --git a/engine/src/Core/Particle/Mover.ts b/engine/src/Core/Particle/Mover.ts
@@ -117,7 +117,7 @@ export class Mover {
         }
 
         const zIndexOptions = particle.options.zIndex,
-            zVelocityFactor = 1 - zIndexOptions.velocityRate * particle.zIndexFactor;
+            zVelocityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.velocityRate;
 
         if (moveOptions.spin.enable) {
             this.spin(particle, moveSpeed);

diff --git a/engine/src/Core/Particle/Vector.ts b/engine/src/Core/Particle/Vector.ts
@@ -1,4 +1,4 @@
-import type { ICoordinates } from "../Interfaces/ICoordinates";
+import type { ICoordinates } from "../Interfaces";
 
 export class Vector implements ICoordinates {
     static clone(source: Vector): Vector {

diff --git a/engine/src/Core/Retina.ts b/engine/src/Core/Retina.ts
@@ -18,7 +18,6 @@ export class Retina {
     slowModeRadius!: number;
     linksDistance!: number;
     linksWidth!: number;
-    sizeValue!: number;
     sizeAnimationSpeed!: number;
     pixelRatio!: number;
     bounceModeDistance!: number;

diff --git a/engine/src/Utils/Circle.ts b/engine/src/Utils/Circle.ts
@@ -1,6 +1,7 @@
 import { Range } from "./Range";
-import type { ICoordinates } from "../Core/Interfaces/ICoordinates";
+import type { ICoordinates } from "../Core/Interfaces";
 import { Rectangle } from "./Rectangle";
+import { getDistance } from "./NumberUtils";
 
 /**
  * @category Utils
@@ -11,9 +12,7 @@ export class Circle extends Range {
     }
 
     contains(point: ICoordinates): boolean {
-        const d = Math.pow(point.x - this.position.x, 2) + Math.pow(point.y - this.position.y, 2);
-
-        return d <= this.radius * this.radius;
+        return getDistance(point, this.position) <= this.radius;
     }
 
     intersects(range: Range): boolean {

diff --git a/engine/src/Utils/Point.ts b/engine/src/Utils/Point.ts
@@ -1,4 +1,4 @@
-import type { ICoordinates } from "../Core/Interfaces/ICoordinates";
+import type { ICoordinates } from "../Core/Interfaces";
 import type { Particle } from "../Core/Particle";
 
 /**

diff --git a/engine/src/Utils/QuadTree.ts b/engine/src/Utils/QuadTree.ts
@@ -3,10 +3,10 @@ import type { Range } from "./Range";
 import type { Point } from "./Point";
 import { Rectangle } from "./Rectangle";
 import { Circle } from "./Circle";
-import type { ICoordinates } from "../Core/Interfaces/ICoordinates";
+import type { ICoordinates, IDimension } from "../Core/Interfaces";
 import { CircleWarp } from "./CircleWarp";
 import type { Container } from "../Core/Container";
-import type { IDimension } from "../Core/Interfaces/IDimension";
+import { getDistance } from "./NumberUtils";
 
 /**
  * @category Utils
@@ -93,7 +93,7 @@ export class QuadTree {
             return [];
         } else {
             for (const p of this.points) {
-                if (!range.contains(p.position)) {
+                if (!range.contains(p.position) && getDistance(range.position, p.position) > p.particle.getRadius()) {
                     continue;
                 }
 

diff --git a/engine/src/Utils/Range.ts b/engine/src/Utils/Range.ts
@@ -1,4 +1,4 @@
-import type { ICoordinates } from "../Core/Interfaces/ICoordinates";
+import type { ICoordinates } from "../Core/Interfaces";
 
 /**
  * @category Utils

diff --git a/engine/tests/Fixture/TestParticle.ts b/engine/tests/Fixture/TestParticle.ts
@@ -1,6 +1,7 @@
 import { Container } from "../../src";
 import type { ICoordinates, ICoordinates3d } from "../../src/Core/Interfaces";
 import { Particle } from "../../src/Core/Particle";
+import { getRangeValue } from "../../src/Utils";
 
 export class TestParticle {
     private container: Container;
@@ -26,7 +27,8 @@ export class TestParticle {
         if (container === undefined) {
             container = this.container;
         }
-        const sizeValue = container.retina.sizeValue;
+
+        const sizeValue = getRangeValue(container.actualOptions.particles.size.value) * container.retina.pixelRatio;
         const width = container.canvas.size.width;
         const height = container.canvas.size.height;
         let x = width * Math.random();