fix: Web Client — вернул оригинальную красивую анимацию canvas

Изменения:
- 42 столбика как в оригинале
- Синусоидальная анимация
- Градиент cyan → blue
- Сглаживание RMS (0.7 old + 0.3 new)
- Случайные колебания для живости

Теперь красиво как было, но с данными satellite RMS!
This commit is contained in:
2026-05-21 19:31:07 +03:00
parent 4a79874807
commit e9b6d7bb06
+22 -12
View File
@@ -583,8 +583,9 @@
}
}
// Визуализация на canvas — рисуем RMS от satellite
let satelliteRmsHistory = new Array(64).fill(0); // История RMS значений
// Визуализация на canvas — рисуем RMS от satellite с красивой анимацией
let satelliteRmsHistory = new Array(42).fill(0); // История RMS значений
let rmsSmoothed = 0; // Сглаженное значение
function drawSatelliteVisualization() {
if(!ctx) return;
@@ -600,26 +601,35 @@
return;
}
// Добавляем текущее RMS в историю
// Добавляем текущее RMS в историю (сглаживание)
rmsSmoothed = rmsSmoothed * 0.7 + currentRms * 0.3;
satelliteRmsHistory.shift();
satelliteRmsHistory.push(currentRms);
satelliteRmsHistory.push(rmsSmoothed);
// Рисуем
ctx.clearRect(0,0,canvas.width, canvas.height);
ctx.fillStyle = '#03151f';
ctx.fillRect(0,0,canvas.width, canvas.height);
const barWidth = (canvas.width / satelliteRmsHistory.length);
const barWidth = (canvas.width / 42);
for(let i=0; i<satelliteRmsHistory.length; i++) {
for(let i=0; i<42; i++) {
const rms = satelliteRmsHistory[i];
const barHeight = Math.min(rms * canvas.height * 1.5, canvas.height - 5);
const x = i * barWidth;
// Красивая анимация с синусом как в оригинале
let barHeight = (rms * canvas.height * 1.5 * (Math.sin(i * 0.5) + 1)/2 + 5) * (0.5 + (Math.random()*0.3));
// Градиент от зелёного к красному
const hue = 120 - (rms * 120); // 120 = зелёный, 0 = красный
ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;
ctx.fillRect(x, canvas.height - barHeight, barWidth - 1, barHeight);
// Увеличиваем высоту если громко
if(rms > 0.3) barHeight = rms * canvas.height * 1.8 * (Math.sin(i*0.3)+1.2);
barHeight = Math.min(barHeight, canvas.height-10);
const x = i * (barWidth+2);
// Градиент как в оригинале
const grad = ctx.createLinearGradient(x, canvas.height-barHeight, x, canvas.height);
grad.addColorStop(0, '#0ff');
grad.addColorStop(1, '#3f87ff');
ctx.fillStyle = grad;
ctx.fillRect(x, canvas.height-barHeight, barWidth, barHeight);
}
}