feat ✨: Improved visualization by adding logarithmic scaling to the x-axis labels and updating the y-axis scale based on the maximum value of the frequency spectrum.
- Updated the `y-axis scale` based on the maximum value of the frequency spectrum, added logarithmic scaling to the x-axis labels, and improved interpolation logic for better display.
This commit is contained in:
@@ -61,18 +61,36 @@
|
||||
label: note
|
||||
}));
|
||||
|
||||
// Keep track of recent maximum values
|
||||
const maxValueHistory = [];
|
||||
const MAX_HISTORY_LENGTH = 5;
|
||||
|
||||
function updateYAxisScale(newValue) {
|
||||
maxValueHistory.push(newValue);
|
||||
if (maxValueHistory.length > MAX_HISTORY_LENGTH) {
|
||||
maxValueHistory.shift();
|
||||
}
|
||||
return Math.max(...maxValueHistory) * 1.1; // Add 10% margin
|
||||
}
|
||||
|
||||
const ctx = document.getElementById('spectrumChart').getContext('2d');
|
||||
const chart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: Array.from({length: 134}, (_, i) => (i + 8) * (8000 / 1024)),
|
||||
// Generate logarithmically spaced frequencies for labels
|
||||
labels: Array.from({length: 134}, (_, i) => {
|
||||
const minFreq = 60;
|
||||
const maxFreq = 1100;
|
||||
return Math.pow(10, Math.log10(minFreq) + (Math.log10(maxFreq) - Math.log10(minFreq)) * i / 133);
|
||||
}),
|
||||
datasets: [{
|
||||
label: 'Frequency Spectrum',
|
||||
data: Array(134).fill(0),
|
||||
borderColor: 'rgb(75, 192, 192)',
|
||||
tension: 0.1,
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(75, 192, 192, 0.2)'
|
||||
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
||||
pointRadius: 0 // Hide points for better performance
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
@@ -81,10 +99,19 @@
|
||||
animation: {
|
||||
duration: 0
|
||||
},
|
||||
parsing: {
|
||||
xAxisKey: 'x',
|
||||
yAxisKey: 'y'
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
max: 5000,
|
||||
adapters: {
|
||||
update: function(maxValue) {
|
||||
return updateYAxisScale(maxValue);
|
||||
}
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Magnitude'
|
||||
@@ -92,6 +119,7 @@
|
||||
},
|
||||
x: {
|
||||
type: 'logarithmic',
|
||||
position: 'bottom',
|
||||
min: 60,
|
||||
max: 1100,
|
||||
title: {
|
||||
@@ -99,20 +127,21 @@
|
||||
text: 'Frequency (Hz)'
|
||||
},
|
||||
ticks: {
|
||||
callback: function(value, index, values) {
|
||||
// Find the closest note
|
||||
const closestNote = Object.entries(noteFrequencies)
|
||||
.reduce((closest, [note, freq]) => {
|
||||
return Math.abs(freq - value) < Math.abs(freq - closest.freq)
|
||||
? { note, freq }
|
||||
: closest;
|
||||
}, { note: '', freq: Infinity });
|
||||
callback: function(value) {
|
||||
// Show C notes and F# notes
|
||||
const entries = Object.entries(noteFrequencies);
|
||||
const closest = entries.reduce((prev, curr) => {
|
||||
return Math.abs(curr[1] - value) < Math.abs(prev[1] - value) ? curr : prev;
|
||||
});
|
||||
|
||||
if (Math.abs(value - closestNote.freq) < 1) {
|
||||
return closestNote.note;
|
||||
if ((closest[0].includes('C') || closest[0].includes('F#')) &&
|
||||
Math.abs(closest[1] - value) < 1) {
|
||||
return closest[0];
|
||||
}
|
||||
return '';
|
||||
}
|
||||
},
|
||||
sampleSize: 20,
|
||||
autoSkip: false
|
||||
},
|
||||
grid: {
|
||||
color: (ctx) => {
|
||||
@@ -175,21 +204,32 @@
|
||||
const ws = new WebSocket(wsUrl);
|
||||
|
||||
function interpolateSpectrum(spectrum) {
|
||||
// Convert the linear frequency bins to logarithmic scale
|
||||
const result = new Array(spectrum.length).fill(0);
|
||||
const result = [];
|
||||
const minFreq = 60;
|
||||
const maxFreq = 1100;
|
||||
const binWidth = 8000 / 1024; // Hz per bin
|
||||
|
||||
for (let i = 0; i < spectrum.length; i++) {
|
||||
const freq = (i + 8) * binWidth;
|
||||
const logFreq = Math.log10(freq);
|
||||
// Generate logarithmically spaced frequencies
|
||||
for (let i = 0; i < 134; i++) {
|
||||
const targetFreq = Math.pow(10, Math.log10(minFreq) + (Math.log10(maxFreq) - Math.log10(minFreq)) * i / 133);
|
||||
|
||||
// Find the two closest bins and interpolate
|
||||
const bin1 = Math.floor((logFreq - Math.log10(60)) / (Math.log10(1100) - Math.log10(60)) * spectrum.length);
|
||||
const bin2 = bin1 + 1;
|
||||
// Find the corresponding linear bin
|
||||
const bin = Math.floor(targetFreq / binWidth);
|
||||
|
||||
if (bin1 >= 0 && bin2 < spectrum.length) {
|
||||
const t = (logFreq - Math.log10(60)) / (Math.log10(1100) - Math.log10(60)) * spectrum.length - bin1;
|
||||
result[i] = spectrum[bin1] * (1 - t) + spectrum[bin2] * t;
|
||||
if (bin >= 8 && bin < 141) {
|
||||
// Linear interpolation between bins
|
||||
const binFraction = (targetFreq / binWidth) - bin;
|
||||
const value = spectrum[bin - 8] * (1 - binFraction) +
|
||||
(bin - 7 < spectrum.length ? spectrum[bin - 7] : 0) * binFraction;
|
||||
result.push({
|
||||
x: targetFreq,
|
||||
y: value
|
||||
});
|
||||
} else {
|
||||
result.push({
|
||||
x: targetFreq,
|
||||
y: 0
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -198,8 +238,14 @@
|
||||
|
||||
ws.onmessage = function(event) {
|
||||
const spectrum = JSON.parse(event.data);
|
||||
// Interpolate the spectrum data for logarithmic display
|
||||
chart.data.datasets[0].data = interpolateSpectrum(spectrum);
|
||||
const interpolatedData = interpolateSpectrum(spectrum);
|
||||
|
||||
// Update y-axis scale based on new maximum value
|
||||
const maxValue = Math.max(...interpolatedData.map(d => d.y));
|
||||
chart.options.scales.y.max = updateYAxisScale(maxValue);
|
||||
|
||||
// Update chart data
|
||||
chart.data.datasets[0].data = interpolatedData;
|
||||
chart.update('none'); // Use 'none' mode for maximum performance
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user