feat: changed loadJSON with multiple configs and an optional index to…

… select one of them
tsparticles · Sep 26, 2020 · bdba2ef · bdba2ef
1 parent c455db2
commit bdba2ef
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 101 deletions.
diff --git a/core/main/src/Core/Loader.ts b/core/main/src/Core/Loader.ts
@@ -172,7 +172,11 @@ export class Loader {
      * @param index the index of the paths array, if a single path is passed this value is ignored
      * @returns A Promise with the [[Container]] object created
      */
-    public static async loadJSON(tagId: string, jsonUrl: SingleOrMultiple<string>, index?: number): Promise<Container | undefined> {
+    public static async loadJSON(
+        tagId: string,
+        jsonUrl: SingleOrMultiple<string>,
+        index?: number
+    ): Promise<Container | undefined> {
         const url = jsonUrl instanceof Array ? Utils.itemFromArray(jsonUrl, index) : jsonUrl;
 
         /* load json config */

diff --git a/core/main/src/Core/Particle.ts b/core/main/src/Core/Particle.ts
@@ -265,11 +265,6 @@ export class Particle implements IParticle {
             y: 0,
         };
 
-        /* check position - avoid overlap */
-        if (this.particlesOptions.collisions.enable && !this.checkOverlap(position)) {
-            throw new Error();
-        }
-
         /* opacity */
         const opacityOptions = this.particlesOptions.opacity;
         const randomOpacity = opacityOptions.random;
@@ -430,30 +425,6 @@ export class Particle implements IParticle {
         this.links = [];
     }
 
-    private checkOverlap(position?: ICoordinates, iterations = 0): boolean {
-        const container = this.container;
-
-        if (!container.particles.count) {
-            return true;
-        }
-
-        if (iterations >= container.particles.count) {
-            // too many particles
-            return false;
-        }
-
-        const overlapping = this.isOverlapping();
-
-        if (overlapping) {
-            this.position.x = position ? position.x : Math.random() * container.canvas.size.width;
-            this.position.y = position ? position.y : Math.random() * container.canvas.size.height;
-
-            return this.checkOverlap(undefined, iterations + 1);
-        }
-
-        return true;
-    }
-
     private calcPosition(container: Container, position?: ICoordinates): ICoordinates {
         for (const [, plugin] of container.plugins) {
             const pluginPos =

diff --git a/core/main/src/main.slim.ts b/core/main/src/main.slim.ts
@@ -110,7 +110,11 @@ export class MainSlim {
      * @param index the index of the paths array, if a single path is passed this value is ignored
      * @returns A Promise with the [[Container]] object created
      */
-    public loadJSON(tagId: string, pathConfigJson: SingleOrMultiple<string>, index?: number): Promise<Container | undefined> {
+    public loadJSON(
+        tagId: string,
+        pathConfigJson: SingleOrMultiple<string>,
+        index?: number
+    ): Promise<Container | undefined> {
         return Loader.loadJSON(tagId, pathConfigJson, index);
     }
 

diff --git a/demo/main/public/presets/test.json b/demo/main/public/presets/test.json
@@ -1,104 +1,56 @@
 {
   "fpsLimit": 60,
   "particles": {
-    "number": {
-      "value": 150,
-      "density": {
-        "enable": true,
-        "area": 800
+    "bounce": {
+      "horizontal": {
+        "value": 0.8
+      },
+      "vertical": {
+        "value": 0.8
       }
     },
+    "number": {
+      "value": 0
+    },
     "color": {
-      "value": {
-        "h": 0,
-        "s": 100,
-        "v": 100
-      },
-      "animation": {
-        "enable": false,
-        "speed": 20,
-        "sync": true
-      }
+      "value": "#ffffff"
+    },
+    "collisions": {
+      "enable": true
     },
     "shape": {
       "type": "circle"
     },
     "opacity": {
-      "value": 1,
-      "random": false,
-      "animation": {
-        "enable": false,
-        "speed": 3,
-        "minimumValue": 0.1,
-        "sync": false
-      }
+      "value": 0.4
     },
     "size": {
-      "value": 15,
-      "random": true,
-      "animation": {
-        "enable": false,
-        "speed": 5,
-        "minimumValue": 1,
-        "sync": false
-      }
-    },
-    "links": {
-      "enable": true,
-      "distance": 100,
-      "color": "#ffffff",
-      "opacity": 0.4,
-      "width": 1
+      "value": 15
     },
     "move": {
       "enable": true,
-      "speed": 6,
-      "direction": "right",
+      "gravity": {
+        "enable": true
+      },
+      "speed": 1,
+      "direction": "none",
       "random": false,
       "straight": false,
-      "size": true,
-      "outMode": "out",
-      "attract": {
-        "enable": false,
-        "rotateX": 600,
-        "rotateY": 1200
-      }
+      "outMode": "bounce"
     }
   },
   "interactivity": {
     "detectsOn": "canvas",
     "events": {
-      "onHover": {
-        "enable": true,
-        "mode": "repulse"
-      },
       "onClick": {
         "enable": true,
         "mode": "push"
       },
       "resize": true
     },
     "modes": {
-      "grab": {
-        "distance": 400,
-        "links": {
-          "opacity": 1
-        }
-      },
-      "bubble": {
-        "distance": 400,
-        "size": 40,
-        "duration": 2,
-        "opacity": 0.8
-      },
-      "repulse": {
-        "distance": 200
-      },
       "push": {
-        "particles_nb": 4
-      },
-      "remove": {
-        "particles_nb": 2
+        "quantity": 1
       }
     }
   },