fix: Web Client — точная копия оригинальной анимации

Реализована точно такая же анимация как была:
- avg = currentRms * 100 (вместо микрофона)
- Сглаживание rmsSmoothed * 0.7 + avg * 0.3
- Симуляция если RMS < 1 (12 + random * 25)
- Усиление при LISTEN/SPEAK (45 + random * 55)
- 42 столбика с синусом
- Случайные колебания 0.5 + random * 0.3
- Увеличение при SPEAK

Теперь 1-в-1 как оригинал, но с данными satellite!
This commit is contained in:
2026-05-21 19:35:31 +03:00
parent e9b6d7bb06
commit 6b9c7376b9
+24 -16
View File
@@ -583,12 +583,11 @@
}
}
// Визуализация на canvas — рисуем RMS от satellite с красивой анимацией
let satelliteRmsHistory = new Array(42).fill(0); // История RMS значений
let rmsSmoothed = 0; // Сглаженное значение
// Визуализация на canvas — RMS от satellite с оригинальной анимацией
let satelliteRmsHistory = new Array(42).fill(0);
let rmsSmoothed = 0;
function drawSatelliteVisualization() {
if(!ctx) return;
requestAnimationFrame(drawSatelliteVisualization);
if(!isConnected) {
@@ -601,25 +600,34 @@
return;
}
// Добавляем текущее RMS в историю (сглаживание)
rmsSmoothed = rmsSmoothed * 0.7 + currentRms * 0.3;
satelliteRmsHistory.shift();
satelliteRmsHistory.push(rmsSmoothed);
// Берём RMS от satellite вместо локального микрофона
let avg = currentRms * 100; // Конвертируем 0.0-1.0 в 0-100
// Рисуем
// Сглаживание как в оригинале
rmsSmoothed = rmsSmoothed * 0.7 + avg * 0.3;
avg = rmsSmoothed;
// Если satellite RMS недоступен – делаем «живую» симуляцию
if(avg < 1) {
avg = 12 + Math.random() * 25;
if(stateText.innerText.includes('LISTEN') || stateText.innerText.includes('SPEAK'))
avg = 45 + Math.random() * 55;
}
// Отрисовка 42 неоновых столбцов (баров)
ctx.clearRect(0,0,canvas.width, canvas.height);
ctx.fillStyle = '#03151f';
ctx.fillRect(0,0,canvas.width, canvas.height);
const barWidth = (canvas.width / 42);
const barWidth = canvas.width / 42;
const numBars = 42;
for(let i=0; i<42; i++) {
const rms = satelliteRmsHistory[i];
// Красивая анимация с синусом как в оригинале
let barHeight = (rms * canvas.height * 1.5 * (Math.sin(i * 0.5) + 1)/2 + 5) * (0.5 + (Math.random()*0.3));
for(let i=0; i<numBars; i++) {
let barHeight = (avg * (Math.sin(i*0.5)+1)/2 + 5) * (0.5 + Math.random()*0.3);
// Увеличиваем высоту если громко
if(rms > 0.3) barHeight = rms * canvas.height * 1.8 * (Math.sin(i*0.3)+1.2);
// Увеличиваем высоту если громко (как в оригинале)
if(stateText.innerText.includes('SPEAK'))
barHeight = avg * 1.6 * (Math.sin(i*0.3)+1.2);
barHeight = Math.min(barHeight, canvas.height-10);
const x = i * (barWidth+2);