diff --git a/src/App.svelte b/src/App.svelte index 535a40a..614b8da 100644 --- a/src/App.svelte +++ b/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} diff --git a/src/lib/AudioVisualizer.svelte b/src/lib/AudioVisualizer.svelte index f34d168..cc7c5b9 100644 --- a/src/lib/AudioVisualizer.svelte +++ b/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) diff --git a/src/lib/Controls.svelte b/src/lib/Controls.svelte index 0c21da5..239975f 100644 --- a/src/lib/Controls.svelte +++ b/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} /> +
+ + +