Merge pull request #5 from yikuansun/fading

Fading
yikuansun · Apr 6, 2023 · fe23315 · fe23315
2 parents 6039469 + 948f750
commit fe23315
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/code.js b/code.js
@@ -19,6 +19,8 @@ var draw = function(
     snapinterval=1,
     gravityangle=0,
     gravityamount=0,
+    massVariance=1,
+    fading=0,
     ) {
     ctx.restore();
     ctx.save();
@@ -61,8 +63,9 @@ var draw = function(
         }
 
         // gravity
-        x_offset += Math.cos(gravityangle * Math.PI / 180) * (i * gravityamount);
-        y_offset += Math.sin(gravityangle * Math.PI / 180) * (i * gravityamount);
+        var pMass = 0.5 + massVariance * getRandom(rng);
+        x_offset += Math.cos(gravityangle * Math.PI / 180) * (pMass * gravityamount);
+        y_offset += Math.sin(gravityangle * Math.PI / 180) * (pMass * gravityamount);
 
         particle.x += x_offset; particle.y += y_offset;
         var scaling = getRandom(rng) * scalevariance;
@@ -73,6 +76,7 @@ var draw = function(
         particle.angle += rotation;
 
         particle.opacity = og_opacity + getRandom(rng) * opacityvariance;
+        particle.opacity -= fading * pMass;
         if (particle.opacity < 0) particle.opacity = 0;
 
         ctx.translate(particle.x, particle.y);

diff --git a/gui.js b/gui.js
@@ -77,7 +77,7 @@ var duplicatesInputs = ygui.buildGUIsection([
         label: "Seed",
         id: "seed",
         type: "number",
-        attr: { value: "12321" }
+        attr: { value: "12345" }
     }
 ], document.querySelector("#duplicates-section"));
 var forcesInputs = ygui.buildGUIsection([
@@ -91,14 +91,26 @@ var forcesInputs = ygui.buildGUIsection([
         label: "Gravity Direction",
         id: "gravityangle",
         type: "number",
-        attr: { min: 0, max: 360, value: 0 }
+        attr: { min: 0, max: 360, value: 90 }
     },
     {
         label: "Gravity Amount",
         id: "gravityamount",
         type: "number",
         attr: { min: 0, value: 0 }
     },
+    {
+        label: "Mass Variance",
+        id: "massVariance",
+        type: "number",
+        attr: { min: 0, max: 1, value: 0.5, step: 0.01 }
+    },
+    {
+        label: "Fading",
+        id: "fading",
+        type: "number",
+        attr: { min: 0, value: 0, step: 0.01 }
+    },
 ], document.querySelector("#forces-section"));
 
 var drawFromInputs = function() {
@@ -120,6 +132,8 @@ var drawFromInputs = function() {
         snapinterval=parseFloat(document.getElementById("snapinterval").value),
         gravityangle=parseFloat(document.getElementById("gravityangle").value),
         gravityamount=parseFloat(document.getElementById("gravityamount").value),
+        massVariance=parseFloat(document.getElementById("massVariance").value),
+        fading=parseFloat(document.getElementById("fading").value),
     );
 };