@newkrok/three-particles 0.4.1 → 0.5.0

package/README.md

@@ -18,4 +18,4 @@ Install with npm
 `npm i @newkrok/three-particles`
 
 Add as a package.json dependency
-`"dependencies": { ... "@newkrok/three-particles": "0.4.0" ... }, `
+`"dependencies": { ... "@newkrok/three-particles": "0.5.0" ... }, `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newkrok/three-particles",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Particle system for ThreeJS",
   "main": "src/js/three-particles.js",
   "bin": {

package/src/js/effects/three-particles/three-particles-bezier.js

@@ -0,0 +1,36 @@
+const nCr = (n, k) => {
+  let z = 1;
+  for (let i = 1; i <= k; i++) z *= (n + 1 - i) / i;
+  return z;
+};
+
+export const createBezierCurveFunction = (bezierPoints) => (percentage) => {
+  if (percentage < 0) return bezierPoints[0];
+  if (percentage > 1) return bezierPoints[bezierPoints.length - 1];
+
+  let start = 0;
+  let stop = bezierPoints.length - 1;
+
+  bezierPoints.find((point, index) => {
+    const result = percentage < point.percentage;
+    if (result) stop = index;
+    else if (point.percentage !== undefined) start = index;
+    return result;
+  });
+
+  const n = stop - start;
+  const calculatedPercentage =
+    (percentage - bezierPoints[start].percentage) /
+    (bezierPoints[stop].percentage - bezierPoints[start].percentage);
+
+  let value = 0;
+  for (let i = 0; i <= n; i++) {
+    const p = bezierPoints[start + i];
+    const c =
+      nCr(n, i) *
+      Math.pow(1 - calculatedPercentage, n - i) *
+      Math.pow(calculatedPercentage, i);
+    value += c * p.y;
+  }
+  return value;
+};

package/src/js/effects/three-particles/three-particles-curves.js

@@ -1,6 +1,7 @@
 import Easing from "easing-functions";
 
 export const CurveFunction = {
+  BEZIER: "BEZIER",
   LINEAR: "LINEAR",
   QUADRATIC_IN: "QUADRATIC_IN",
   QUADRATIC_OUT: "QUADRATIC_OUT",

package/src/js/effects/three-particles/three-particles-modifiers.js

@@ -1,7 +1,6 @@
 import * as THREE from "three/build/three.module.js";
 
 import { getCurveFunction } from "./three-particles-curves.js";
-import { size } from "lodash";
 
 const noiseInput = new THREE.Vector3(0, 0, 0);
 

package/src/js/effects/three-particles/three-particles-utils.js

@@ -8,7 +8,12 @@ export const patchObject = (
   const result = {};
   Object.keys(objectA).forEach((key) => {
     if (!config.skippedProperties || !config.skippedProperties.includes(key)) {
-      if (typeof objectA[key] === "object" && objectA[key] && objectB[key]) {
+      if (
+        typeof objectA[key] === "object" &&
+        objectA[key] &&
+        objectB[key] &&
+        !Array.isArray(objectA[key])
+      ) {
         result[key] = patchObject(objectA[key], objectB[key], config);
       } else {
         result[key] =

package/src/js/effects/three-particles.js

@@ -13,6 +13,7 @@ import { FBM } from "three-noise/build/three-noise.module.js";
 import ParticleSystemFragmentShader from "./three-particles/shaders/particle-system-fragment-shader.glsl.js";
 import ParticleSystemVertexShader from "./three-particles/shaders/particle-system-vertex-shader.glsl.js";
 import { applyModifiers } from "./three-particles/three-particles-modifiers.js";
+import { createBezierCurveFunction } from "@newkrok/three-particles/src/js/effects/three-particles/three-particles-bezier";
 
 let createdParticleSystems = [];
 
@@ -115,7 +116,11 @@ const DEFAULT_PARTICLE_SYSTEM_CONFIG = {
   },
   sizeOverLifetime: {
     isActive: false,
-    curveFunction: CurveFunction.LINEAR,
+    curveFunction: CurveFunction.BEZIER,
+    bezierPoints: [
+      { x: 0, y: 0, percentage: 0 },
+      { x: 1, y: 1, percentage: 1 },
+    ],
   },
   /* colorOverLifetime: {
     isActive: false,
@@ -123,7 +128,11 @@ const DEFAULT_PARTICLE_SYSTEM_CONFIG = {
   }, */
   opacityOverLifetime: {
     isActive: false,
-    curveFunction: CurveFunction.LINEAR,
+    curveFunction: CurveFunction.BEZIER,
+    bezierPoints: [
+      { x: 0, y: 0, percentage: 0 },
+      { x: 1, y: 1, percentage: 1 },
+    ],
   },
   rotationOverLifetime: {
     isActive: false,
@@ -249,6 +258,22 @@ export const createParticleSystem = (
   };
 
   const normalizedConfig = patchObject(DEFAULT_PARTICLE_SYSTEM_CONFIG, config);
+
+  const bezierCompatibleProperties = [
+    "sizeOverLifetime",
+    "opacityOverLifetime",
+  ];
+  bezierCompatibleProperties.forEach((key) => {
+    if (
+      normalizedConfig[key].isActive &&
+      normalizedConfig[key].curveFunction === CurveFunction.BEZIER &&
+      normalizedConfig[key].bezierPoints
+    )
+      normalizedConfig[key].curveFunction = createBezierCurveFunction(
+        normalizedConfig[key].bezierPoints
+      );
+  });
+
   const {
     transform,
     duration,
@@ -600,12 +625,13 @@ export const updateParticleSystems = ({ now, delta, elapsed }) => {
     particleSystem.material.uniforms.elapsed.value = elapsed;
 
     particleSystem.getWorldPosition(currentWorldPosition);
-    if (lastWorldPosition.x !== -99999)
+    if (lastWorldPosition.x !== -99999) {
       worldPositionChange.set(
         currentWorldPosition.x - lastWorldPosition.x,
         currentWorldPosition.y - lastWorldPosition.y,
         currentWorldPosition.z - lastWorldPosition.z
       );
+    }
     generalData.distanceFromLastEmitByDistance += worldPositionChange.length();
     particleSystem.getWorldPosition(lastWorldPosition);
 
@@ -648,11 +674,15 @@ export const updateParticleSystems = ({ now, delta, elapsed }) => {
             gravity !== 0 ||
             velocity.x !== 0 ||
             velocity.y !== 0 ||
-            velocity.z !== 0
+            velocity.z !== 0 ||
+            worldPositionChange.x !== 0 ||
+            worldPositionChange.y !== 0 ||
+            worldPositionChange.z !== 0
           ) {
             const positionIndex = index * 3;
             const positionArr =
               particleSystem.geometry.attributes.position.array;
+
             if (simulationSpace === SimulationSpace.WORLD) {
               positionArr[positionIndex] -= worldPositionChange.x;
               positionArr[positionIndex + 1] -= worldPositionChange.y;