fix: Web Client — вернул оригинальную красивую анимацию canvas
Изменения: - 42 столбика как в оригинале - Синусоидальная анимация - Градиент cyan → blue - Сглаживание RMS (0.7 old + 0.3 new) - Случайные колебания для живости Теперь красиво как было, но с данными satellite RMS!
This commit is contained in:
+22
-12
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user