feat: fft ripple modes

src/backend/pattern/fftMirrorRipple.ts

@@ -0,0 +1,84 @@
+import { IColorGetter, IColorMapper } from 'src/typings'
+import { callIndexedGetter } from './mappers'
+import { pixelsCount, hueToColor } from '../shared'
+import { settings } from 'src/settings'
+import { audioState } from '../wsAudio'
+
+interface Ripple {
+	pos: number
+	radius: number
+	brightness: number
+	hue: number
+}
+
+let ripples: Ripple[] = []
+let lastTime = Date.now()
+let averages: number[] = []
+let cooldowns: number[] = []
+let hueShift = 0
+const attenuation = 0.9
+const speed = 60
+const spawnCooldown = 200
+
+function spawnRipple(bin: number, mag: number, avg: number) {
+	const hue = (bin / audioState.bins.length) * 360 + hueShift
+	const brightness = Math.min(1, Math.max(0, (mag - avg) / avg))
+	const pos = (bin / audioState.bins.length) * pixelsCount
+	ripples.push({ pos, radius: 1, brightness, hue })
+	ripples.push({ pos: pixelsCount - pos, radius: 1, brightness, hue })
+}
+
+function update(time: number) {
+	const dt = (time - lastTime) * settings.effectSpeed
+	lastTime = time
+	hueShift = (hueShift + dt * 0.05) % 360
+	const bins = audioState.bins
+	if (bins && bins.length) {
+		if (averages.length !== bins.length) {
+			averages = bins.slice()
+			cooldowns = new Array(bins.length).fill(0)
+		}
+		for (let i = 0; i < bins.length; i++) {
+			const m = bins[i]
+			averages[i] = averages[i] * 0.9 + m * 0.1
+			cooldowns[i] -= dt
+			if (m > averages[i] * 1.5 && cooldowns[i] <= 0) {
+				spawnRipple(i, m, averages[i])
+				cooldowns[i] = spawnCooldown
+			}
+		}
+	}
+	ripples.forEach(r => {
+		r.radius += (speed * dt) / 1000
+		r.brightness *= Math.pow(attenuation, dt / 16)
+	})
+	ripples = ripples.filter(r => r.brightness > 0.05)
+}
+
+export const getFftMirrorColor: IColorGetter = (index, time) => {
+	if (index === 0) update(time)
+	let r = 0
+	let g = 0
+	let b = 0
+	for (const ripple of ripples) {
+		const dist = Math.abs(index - ripple.pos)
+		if (dist <= ripple.radius) {
+			const intensity = (ripple.brightness * (1 - dist / ripple.radius)) / ripple.radius
+			const { r: rr, g: gg, b: bb } = hueToColor(ripple.hue).rgb()
+			r = Math.max(r, rr * intensity)
+			g = Math.max(g, gg * intensity)
+			b = Math.max(b, bb * intensity)
+		}
+	}
+	return [Math.min(255, Math.round(r)), Math.min(255, Math.round(g)), Math.min(255, Math.round(b))]
+}
+
+export function resetFftMirror() {
+	ripples = []
+	lastTime = 0
+	averages = []
+	cooldowns = []
+	hueShift = 0
+}
+
+export const fftMirrorMapper: IColorMapper = () => callIndexedGetter(getFftMirrorColor)

src/backend/pattern/fftRandomRipple.ts

@@ -0,0 +1,87 @@
+import { IColorGetter, IColorMapper } from 'src/typings'
+import { callIndexedGetter } from './mappers'
+import { pixelsCount, hueToColor } from '../shared'
+import { settings } from 'src/settings'
+import { audioState } from '../wsAudio'
+
+interface Ripple {
+	pos: number
+	radius: number
+	brightness: number
+	hue: number
+}
+
+let ripples: Ripple[] = []
+let lastTime = Date.now()
+let averages: number[] = []
+let cooldowns: number[] = []
+let hueShift = 0
+const attenuation = 0.9
+const speed = 60
+const spawnCooldown = 200
+
+function spawnRipple(bin: number, mag: number, avg: number) {
+	const hue = (bin / audioState.bins.length) * 360 + hueShift
+	const brightness = Math.min(1, Math.max(0, (mag - avg) / avg))
+	ripples.push({
+		pos: Math.random() * pixelsCount,
+		radius: 1,
+		brightness,
+		hue,
+	})
+}
+
+function update(time: number) {
+	const dt = (time - lastTime) * settings.effectSpeed
+	lastTime = time
+	hueShift = (hueShift + dt * 0.05) % 360
+	const bins = audioState.bins
+	if (bins && bins.length) {
+		if (averages.length !== bins.length) {
+			averages = bins.slice()
+			cooldowns = new Array(bins.length).fill(0)
+		}
+		for (let i = 0; i < bins.length; i++) {
+			const m = bins[i]
+			averages[i] = averages[i] * 0.9 + m * 0.1
+			cooldowns[i] -= dt
+			if (m > averages[i] * 1.5 && cooldowns[i] <= 0) {
+				spawnRipple(i, m, averages[i])
+				cooldowns[i] = spawnCooldown
+			}
+		}
+	}
+	ripples.forEach(r => {
+		r.radius += (speed * dt) / 1000
+		r.brightness *= Math.pow(attenuation, dt / 16)
+	})
+	ripples = ripples.filter(r => r.brightness > 0.05)
+}
+
+export const getFftRandomColor: IColorGetter = (index, time) => {
+	if (index === 0) update(time)
+	let r = 0
+	let g = 0
+	let b = 0
+	for (const ripple of ripples) {
+		const dist = Math.abs(index - ripple.pos)
+		if (dist <= ripple.radius) {
+			const intensity = (ripple.brightness * (1 - dist / ripple.radius)) / ripple.radius
+			const { r: rr, g: gg, b: bb } = hueToColor(ripple.hue).rgb()
+			r = Math.max(r, rr * intensity)
+			g = Math.max(g, gg * intensity)
+			b = Math.max(b, bb * intensity)
+		}
+	}
+	return [Math.min(255, Math.round(r)), Math.min(255, Math.round(g)), Math.min(255, Math.round(b))]
+}
+
+export function resetFftRandom() {
+	ripples = []
+	lastTime = 0
+	averages = []
+	cooldowns = []
+	hueShift = 0
+}
+
+export const fftRandomMapper: IColorMapper = () => callIndexedGetter(getFftRandomColor)

src/backend/pattern/fftRipple.ts

@@ -14,29 +14,41 @@ interface Ripple {
 let ripples: Ripple[] = []
 let lastTime = Date.now()
 let averages: number[] = []
+let cooldowns: number[] = []
+let hueShift = 0
 const attenuation = 0.9
 const speed = 60
+const spawnCooldown = 200
 
-function spawnRipple(bin: number, mag: number) {
-	const hue = (bin / audioState.bins.length) * 270
+function spawnRipple(bin: number, mag: number, avg: number) {
+	const hue = (bin / audioState.bins.length) * 360 + hueShift
+	const brightness = Math.min(1, Math.max(0, (mag - avg) / avg))
 	ripples.push({
 		pos: (bin / audioState.bins.length) * pixelsCount,
 		radius: 1,
-		brightness: Math.min(1, mag),
+		brightness,
 		hue,
 	})
 }
 
 function update(time: number) {
 	const dt = (time - lastTime) * settings.effectSpeed
 	lastTime = time
+	hueShift = (hueShift + dt * 0.05) % 360
 	const bins = audioState.bins
 	if (bins && bins.length) {
-		if (averages.length !== bins.length) averages = bins.slice()
+		if (averages.length !== bins.length) {
+			averages = bins.slice()
+			cooldowns = new Array(bins.length).fill(0)
+		}
 		for (let i = 0; i < bins.length; i++) {
 			const m = bins[i]
 			averages[i] = averages[i] * 0.9 + m * 0.1
-			if (m > averages[i] * 1.5) spawnRipple(i, m)
+			cooldowns[i] -= dt
+			if (m > averages[i] * 1.5 && cooldowns[i] <= 0) {
+				spawnRipple(i, m, averages[i])
+				cooldowns[i] = spawnCooldown
+			}
 		}
 	}
 	ripples.forEach(r => {
@@ -54,20 +66,22 @@ export const getFftRippleColor: IColorGetter = (index, time) => {
 	for (const ripple of ripples) {
 		const dist = Math.abs(index - ripple.pos)
 		if (dist <= ripple.radius) {
-			const intensity = ripple.brightness * (1 - dist / ripple.radius)
+			const intensity = (ripple.brightness * (1 - dist / ripple.radius)) / ripple.radius
 			const { r: rr, g: gg, b: bb } = hueToColor(ripple.hue).rgb()
-			r += rr * intensity
-			g += gg * intensity
-			b += bb * intensity
+			r = Math.max(r, rr * intensity)
+			g = Math.max(g, gg * intensity)
+			b = Math.max(b, bb * intensity)
 		}
 	}
 	return [Math.min(255, Math.round(r)), Math.min(255, Math.round(g)), Math.min(255, Math.round(b))]
 }
 
 export function resetFftRipples() {
 	ripples = []
-	lastTime = Date.now()
+	lastTime = 0
 	averages = []
+	cooldowns = []
+	hueShift = 0
 }
 
 export const fftRippleMapper: IColorMapper = () => callIndexedGetter(getFftRippleColor)

src/backend/pattern/index.ts

@@ -9,8 +9,9 @@ import { getBreatheColor } from './breathe'
 import { getWaveColor } from './wave'
 import { getHeartbeatColor, getStrobeColor, getPulseColor, getGradientPulseColor, getMultiPulseColor } from './extra'
 import { rippleMapper } from './ripple'
-import { musicRippleMapper } from './musicRipple'
 import { fftRippleMapper } from './fftRipple'
+import { fftRandomMapper } from './fftRandomRipple'
+import { fftMirrorMapper } from './fftMirrorRipple'
 import { createIndexedMapper, createFlatMapper } from './mappers'
 
 const transitionDuration = 250
@@ -39,8 +40,9 @@ const mappers: Record<IMode, IColorMapper> = {
 	[IMode.GradientPulse]: createIndexedMapper(getGradientPulseColor),
 	[IMode.MultiPulse]: createIndexedMapper(getMultiPulseColor),
 	[IMode.Ripple]: rippleMapper,
-	[IMode.MusicRipple]: musicRippleMapper,
 	[IMode.FftRipple]: fftRippleMapper,
+	[IMode.FftRandomRipple]: fftRandomMapper,
+	[IMode.FftMirrorRipple]: fftMirrorMapper,
 }
 
 export function getPixels(mode: IMode): IArrColor[][] {

src/backend/telegram/settings.ts

@@ -43,7 +43,9 @@ export function selectMode(menuTemplate: MenuTemplate<Context>) {
 			[IMode.GradientPulse]: '🎇',
 			[IMode.MultiPulse]: '🎆',
 			[IMode.Ripple]: '💧',
-			[IMode.MusicRipple]: '🎶',
+			[IMode.FftRipple]: '🎶',
+			[IMode.FftRandomRipple]: '💿',
+			[IMode.FftMirrorRipple]: '🎵',
 		},
 		{
 			formatState,

src/typings.ts

@@ -26,8 +26,9 @@ export enum IMode {
 	GradientPulse,
 	MultiPulse,
 	Ripple,
-	MusicRipple,
 	FftRipple,
+	FftRandomRipple,
+	FftMirrorRipple,
 }
 
 export interface ISettings {

tests/fftMirrorRipple.test.ts

@@ -0,0 +1,17 @@
+import { getFftMirrorColor, resetFftMirror } from '../src/backend/pattern/fftMirrorRipple'
+import { audioState } from '../src/backend/wsAudio'
+
+beforeEach(() => {
+  resetFftMirror()
+  audioState.bins = Array(8).fill(0)
+})
+
+describe('fft mirror ripple', () => {
+  test('spawns ripple on spike', () => {
+    audioState.bins[0] = 2
+    ;(getFftMirrorColor as any)(0, 0)
+    audioState.bins[0] = 10
+    const color = (getFftMirrorColor as any)(0, 16)
+    expect(color).not.toEqual([0, 0, 0])
+  })
+})

tests/fftRandomRipple.test.ts

@@ -0,0 +1,20 @@
+import { getFftRandomColor, resetFftRandom } from '../src/backend/pattern/fftRandomRipple'
+import { audioState } from '../src/backend/wsAudio'
+
+beforeEach(() => {
+  resetFftRandom()
+  audioState.bins = Array(8).fill(0)
+})
+
+describe('fft random ripple', () => {
+  test('spawns ripple on spike', () => {
+    const orig = Math.random
+    ;(Math as any).random = () => 0
+    audioState.bins[0] = 2
+    ;(getFftRandomColor as any)(0, 0)
+    audioState.bins[0] = 10
+    const color = (getFftRandomColor as any)(0, 16)
+    expect(color).not.toEqual([0, 0, 0])
+    Math.random = orig
+  })
+})