RANDOM ROTATION TO PARTICLES

src/App.svelte

@@ -33,6 +33,7 @@
     logoSpinSpeed: 5,
     particleImage: "",
     particleSize: 1.0,
+    particleRotation: 0,
     titlePosition: "top",
   };
 
@@ -75,6 +76,7 @@
   let logoSpinSpeed = saved.logoSpinSpeed;
   let particleImage = saved.particleImage;
   let particleSize = saved.particleSize;
+  let particleRotation = saved.particleRotation;
   let titlePosition = saved.titlePosition;
   let visualizerComponent;
   let toggleHidden = false;
@@ -132,6 +134,7 @@
       logoSpinSpeed,
       particleImage,
       particleSize,
+      particleRotation,
       titlePosition,
     };
     try {
@@ -191,6 +194,7 @@
     logoSpinSpeed = defaults.logoSpinSpeed;
     particleImage = defaults.particleImage;
     particleSize = defaults.particleSize;
+    particleRotation = defaults.particleRotation;
     titlePosition = defaults.titlePosition;
   }
 
@@ -321,6 +325,7 @@
       {logoSpinSpeed}
       {particleImage}
       {particleSize}
+      {particleRotation}
       bind:isListening
       bind:fileCurrentTime
       bind:fileDuration
@@ -393,6 +398,7 @@
       bind:logoSpinSpeed
       bind:particleImage
       bind:particleSize
+      bind:particleRotation
       bind:titlePosition
       {isListening}
       {colorPresets}

src/lib/AudioVisualizer.svelte

@@ -21,6 +21,7 @@
   export let logoSpinSpeed = 5;
   export let particleImage = "";
   export let particleSize = 1.0;
+  export let particleRotation = 0;
 
   const DEFAULT_SIZE = 250;
   const LINE_LIFT = 8;
@@ -181,6 +182,8 @@
           break;
         }
       }
+      p.angle = Math.random() * Math.PI * 2;
+      p.spin = (Math.random() - 0.5) * 2;
       particles.push(p);
     }
   }
@@ -199,6 +202,7 @@
         p.vx *= 0.995;
         p.vy *= 0.995;
       }
+      p.angle += p.spin * particleRotation * 0.1;
       p.life -= p.decay;
       if (p.life <= 0) {
         particles[i] = particles[particles.length - 1];
@@ -208,7 +212,11 @@
       if (pImg && pImg.complete) {
         const sz = p.radius * p.life * 3;
         ctx.globalAlpha = p.life;
-        ctx.drawImage(pImg, p.x - sz / 2, p.y - sz / 2, sz, sz);
+        ctx.save();
+        ctx.translate(p.x, p.y);
+        ctx.rotate(p.angle);
+        ctx.drawImage(pImg, -sz / 2, -sz / 2, sz, sz);
+        ctx.restore();
         ctx.globalAlpha = 1;
       } else {
         const alpha = Math.floor(p.life * 200)

src/lib/Controls.svelte

@@ -58,6 +58,7 @@
   export let logoSpinSpeed = 5;
   export let particleImage = "";
   export let particleSize = 1.0;
+  export let particleRotation = 0;
   export let titlePosition = "top";
 
   const dispatch = createEventDispatcher();
@@ -575,6 +576,20 @@
           bind:value={particleSize}
         />
       </div>
+      <div class="slider-row">
+        <label for="slider-protation"
+          >Rotation <span class="slider-val">{particleRotation.toFixed(1)}</span
+          ></label
+        >
+        <input
+          id="slider-protation"
+          type="range"
+          min="0"
+          max="10"
+          step="0.5"
+          bind:value={particleRotation}
+        />
+      </div>
       <div class="inline-row" style="margin-top: 0.5rem; gap: 0.4rem">
         <input
           type="file"