html5+css3實現傅里葉變換的動態展示效果(僅供參考)

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>傅里葉變換的動態展示效果</title><style>body {font-family: 'Microsoft YaHei', Arial, sans-serif;margin: 0;padding: 0;background: #f8f9fa;color: #333;}.container {max-width: 1200px;margin: 0 auto;padding: 20px;}h1 {text-align: center;color: #2c3e50;margin-bottom: 30px;}.controls {display: flex;flex-wrap: wrap;gap: 20px;justify-content: center;margin-bottom: 30px;background: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}.control-group {display: flex;flex-direction: column;min-width: 200px;}label {margin-bottom: 5px;font-weight: bold;}input[type="range"], select {width: 100%;padding: 8px;border: 1px solid #ddd;border-radius: 4px;}button {background: #3498db;color: white;border: none;padding: 10px 20px;border-radius: 4px;cursor: pointer;font-size: 16px;transition: background-color 0.3s;}button:hover {background: #2980b9;}.visualization {display: flex;flex-wrap: wrap;gap: 20px;justify-content: center;}.canvas-container {background: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);flex: 1;min-width: 300px;}canvas {width: 100%;height: 300px;background: #f1f1f1;border-radius: 4px;}.explanation {margin-top: 30px;background: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}.formula {font-family: 'Cambria Math', serif;text-align: center;margin: 20px 0;font-size: 18px;}.loading {display: none;text-align: center;margin: 20px 0;}.loading img {width: 50px;height: 50px;}@media (max-width: 768px) {.canvas-container {min-width: 100%;}}</style>
</head>
<body><div class="container"><h1>傅里葉變換的動態展示效果</h1><div class="controls"><div class="control-group"><label for="waveType">波形類型</label><select id="waveType"><option value="sine">正弦波</option><option value="square">方波</option><option value="sawtooth">鋸齒波</option><option value="triangle">三角波</option><option value="custom">自定義波形</option></select></div><div class="control-group"><label for="frequency">頻率 (Hz)</label><input type="range" id="frequency" min="1" max="20" value="5" step="1"><span id="frequencyValue">5 Hz</span></div><div class="control-group"><label for="amplitude">振幅</label><input type="range" id="amplitude" min="0.1" max="1" value="0.5" step="0.1"><span id="amplitudeValue">0.5</span></div><div class="control-group"><label for="harmonics">諧波數量</label><input type="range" id="harmonics" min="1" max="20" value="5" step="1"><span id="harmonicsValue">5</span></div><button id="updateBtn">更新波形</button><button id="computeBtn">計算傅里葉變換</button></div><div class="loading" id="loading"><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMzgiIHZpZXdCb3g9IjAgMCAzOCAzOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiMzNDk4ZGIiPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxIDEpIiBzdHJva2Utd2lkdGg9IjIiPgogICAgICAgICAgICA8Y2lyY2xlIHN0cm9rZS1vcGFjaXR5PSIuNSIgY3g9IjE4IiBjeT0iMTgiIHI9IjE4Ii8+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNiAxOGMwLTkuOTQtOC4wNi0xOC0xOC0xOCI+CiAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybQogICAgICAgICAgICAgICAgICAgIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIKICAgICAgICAgICAgICAgICAgICB0eXBlPSJyb3RhdGUiCiAgICAgICAgICAgICAgICAgICAgZnJvbT0iMCAxOCAxOCIKICAgICAgICAgICAgICAgICAgICB0bz0iMzYwIDE4IDE4IgogICAgICAgICAgICAgICAgICAgIGR1cj0iMXMiCiAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICAgICAgICAgICAgPC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" alt="加載中..."><p>計算中...</p></div><div class="visualization"><div class="canvas-container"><h3>原始波形</h3><canvas id="originalWave"></canvas></div><div class="canvas-container"><h3>傅里葉變換頻譜</h3><canvas id="fourierSpectrum"></canvas></div></div><div class="visualization"><div class="canvas-container"><h3>傅里葉級數合成波形</h3><canvas id="synthesizedWave"></canvas></div><div class="canvas-container"><h3>相位譜</h3><canvas id="phaseSpectrum"></canvas></div></div><div class="explanation"><h2>傅里葉變換原理</h2><p>傅里葉變換是一種將時域信號轉換為頻域表示的數學工具。它可以將任何周期性的函數分解為簡單正弦波的疊加。</p><div class="formula"><p>離散傅里葉變換 (DFT)：</p><p>X(k) = Σ[n=0 to N-1] x(n) · e<sup>-j2πkn/N</sup></p><p>傅里葉級數：</p><p>f(t) = a<sub>0</sub>/2 + Σ[n=1 to ∞] [a<sub>n</sub>cos(nωt) + b<sub>n</sub>sin(nωt)]</p></div><p>在這個演示中，您可以通過控制面板選擇不同的波形，并觀察其傅里葉變換結果。傅里葉變換讓我們能夠看到波形中包含的各種頻率成分及其振幅和相位。</p></div></div><script>// DOM 元素const waveTypeSelect = document.getElementById('waveType');const frequencySlider = document.getElementById('frequency');const frequencyValue = document.getElementById('frequencyValue');const amplitudeSlider = document.getElementById('amplitude');const amplitudeValue = document.getElementById('amplitudeValue');const harmonicsSlider = document.getElementById('harmonics');const harmonicsValue = document.getElementById('harmonicsValue');const updateBtn = document.getElementById('updateBtn');const computeBtn = document.getElementById('computeBtn');const loading = document.getElementById('loading');const originalCanvas = document.getElementById('originalWave');const fourierCanvas = document.getElementById('fourierSpectrum');const synthesizedCanvas = document.getElementById('synthesizedWave');const phaseCanvas = document.getElementById('phaseSpectrum');// 設置畫布大小function setupCanvas(canvas) {canvas.width = canvas.offsetWidth;canvas.height = canvas.offsetHeight;return canvas.getContext('2d');}const originalCtx = setupCanvas(originalCanvas);const fourierCtx = setupCanvas(fourierCanvas);const synthesizedCtx = setupCanvas(synthesizedCanvas);const phaseCtx = setupCanvas(phaseCanvas);// 更新UI顯示值frequencySlider.addEventListener('input', () => {frequencyValue.textContent = `${frequencySlider.value} Hz`;});amplitudeSlider.addEventListener('input', () => {amplitudeValue.textContent = amplitudeSlider.value;});harmonicsSlider.addEventListener('input', () => {harmonicsValue.textContent = harmonicsSlider.value;});// 窗口調整大小時重新設置畫布window.addEventListener('resize', () => {setupCanvas(originalCanvas);setupCanvas(fourierCanvas);setupCanvas(synthesizedCanvas);setupCanvas(phaseCanvas);drawWave();});// 生成不同類型的波形數據function generateWaveData(type, frequency, amplitude, sampleCount) {const data = new Array(sampleCount);const period = sampleCount / frequency;for (let i = 0; i < sampleCount; i++) {const t = i / sampleCount;const x = 2 * Math.PI * frequency * t;switch (type) {case 'sine':data[i] = amplitude * Math.sin(x);break;case 'square':data[i] = amplitude * (Math.sin(x) >= 0 ? 1 : -1);break;case 'sawtooth':data[i] = amplitude * (2 * (x / (2 * Math.PI) - Math.floor(0.5 + x / (2 * Math.PI))));break;case 'triangle':data[i] = amplitude * (2 * Math.abs(2 * (x / (2 * Math.PI) - Math.floor(0.5 + x / (2 * Math.PI)))) - 1);break;case 'custom':// 自定義波形：基本正弦波加上一些諧波data[i] = amplitude * (Math.sin(x) + 0.5 * Math.sin(3 * x) + 0.3 * Math.sin(5 * x)) / 1.8; // 歸一化break;default:data[i] = amplitude * Math.sin(x);}}return data;}// 繪制波形function drawWaveform(ctx, data, color = '#3498db') {const width = ctx.canvas.width;const height = ctx.canvas.height;ctx.clearRect(0, 0, width, height);ctx.beginPath();ctx.strokeStyle = color;ctx.lineWidth = 2;const stepSize = width / (data.length - 1);const centerY = height / 2;const scale = height / 2 * 0.9;for (let i = 0; i < data.length; i++) {const x = i * stepSize;const y = centerY - data[i] * scale;if (i === 0) ctx.moveTo(x, y);else ctx.lineTo(x, y);}ctx.stroke();// 繪制x軸和y軸ctx.beginPath();ctx.strokeStyle = '#aaa';ctx.lineWidth = 1;ctx.moveTo(0, centerY);ctx.lineTo(width, centerY);ctx.stroke();}// 繪制頻譜function drawSpectrum(ctx, magnitudes, maxFreq = 20) {const width = ctx.canvas.width;const height = ctx.canvas.height;ctx.clearRect(0, 0, width, height);// 找出最大振幅以便歸一化const maxMagnitude = Math.max(...magnitudes.slice(1)); // 忽略直流分量const barWidth = width / maxFreq;const scale = height * 0.9;// 繪制頻譜柱狀圖ctx.fillStyle = '#3498db';for (let i = 0; i < Math.min(maxFreq, magnitudes.length); i++) {const magnitude = i === 0 ? 0 : magnitudes[i] / maxMagnitude; // 忽略直流分量const barHeight = magnitude * scale;const x = i * barWidth;const y = height - barHeight;ctx.fillRect(x, y, barWidth * 0.8, barHeight);}// 繪制x軸ctx.beginPath();ctx.strokeStyle = '#aaa';ctx.lineWidth = 1;ctx.moveTo(0, height);ctx.lineTo(width, height);ctx.stroke();// 繪制頻率刻度ctx.fillStyle = '#666';ctx.font = '10px Arial';ctx.textAlign = 'center';for (let i = 0; i < maxFreq; i += 5) {const x = i * barWidth + barWidth / 2;ctx.fillText(`${i} Hz`, x, height - 5);}}// 繪制相位譜function drawPhaseSpectrum(ctx, phases, maxFreq = 20) {const width = ctx.canvas.width;const height = ctx.canvas.height;ctx.clearRect(0, 0, width, height);const barWidth = width / maxFreq;const centerY = height / 2;const scale = height / 2 * 0.8;// 繪制相位點和連線ctx.beginPath();ctx.strokeStyle = '#e74c3c';ctx.lineWidth = 2;for (let i = 1; i < Math.min(maxFreq, phases.length); i++) {const x = i * barWidth + barWidth / 2;const y = centerY - phases[i] / Math.PI * scale;if (i === 1) ctx.moveTo(x, y);else ctx.lineTo(x, y);// 繪制圓點ctx.fillStyle = '#e74c3c';ctx.beginPath();ctx.arc(x, y, 3, 0, 2 * Math.PI);ctx.fill();}ctx.stroke();// 繪制x軸和y軸ctx.beginPath();ctx.strokeStyle = '#aaa';ctx.lineWidth = 1;ctx.moveTo(0, centerY);ctx.lineTo(width, centerY);ctx.moveTo(0, centerY - scale);ctx.lineTo(width, centerY - scale);ctx.fillText('π', 10, centerY - scale);ctx.moveTo(0, centerY + scale);ctx.lineTo(width, centerY + scale);ctx.fillText('-π', 10, centerY + scale);ctx.stroke();}// FFT算法實現 (Cooley-Tukey)function fft(x) {const N = x.length;if (N <= 1) {return x;}// 確保N是2的冪if (N & (N - 1)) {throw new Error("FFT長度必須是2的冪");}// 分治法：分別計算偶數和奇數索引const even = new Array(N / 2);const odd = new Array(N / 2);for (let i = 0; i < N / 2; i++) {even[i] = x[i * 2];odd[i] = x[i * 2 + 1];}// 遞歸計算const evenResult = fft(even);const oddResult = fft(odd);// 合并結果const result = new Array(N).fill().map(() => new Complex(0, 0));for (let k = 0; k < N / 2; k++) {const twiddle = Complex.fromPolar(1, -2 * Math.PI * k / N);const oddTerm = Complex.multiply(twiddle, oddResult[k]);result[k] = Complex.add(evenResult[k], oddTerm);result[k + N / 2] = Complex.subtract(evenResult[k], oddTerm);}return result;}// 復數類class Complex {constructor(re, im) {this.re = re;this.im = im;}static add(a, b) {return new Complex(a.re + b.re, a.im + b.im);}static subtract(a, b) {return new Complex(a.re - b.re, a.im - b.im);}static multiply(a, b) {return new Complex(a.re * b.re - a.im * b.im,a.re * b.im + a.im * b.re);}static fromPolar(r, theta) {return new Complex(r * Math.cos(theta),r * Math.sin(theta));}magnitude() {return Math.sqrt(this.re * this.re + this.im * this.im);}phase() {return Math.atan2(this.im, this.re);}}// 計算傅里葉變換function computeFourier(data) {// 確保數據長度是2的冪const nextPow2 = Math.pow(2, Math.ceil(Math.log2(data.length)));const paddedData = new Array(nextPow2).fill(0);for (let i = 0; i < data.length; i++) {paddedData[i] = new Complex(data[i], 0);}for (let i = data.length; i < nextPow2; i++) {paddedData[i] = new Complex(0, 0);}// 計算FFTconst result = fft(paddedData);// 提取幅度和相位const magnitudes = result.map(c => c.magnitude() / Math.sqrt(nextPow2));const phases = result.map(c => c.phase());return { magnitudes, phases, result };}// 使用傅里葉級數合成波形function synthesizeWave(fourierResult, harmonics, sampleCount) {const synthesized = new Array(sampleCount).fill(0);const { magnitudes, phases, result } = fourierResult;// 使用指定數量的諧波合成for (let t = 0; t < sampleCount; t++) {let sum = magnitudes[0] / 2; // 直流分量for (let n = 1; n <= harmonics; n++) {if (n < magnitudes.length) {const amplitude = magnitudes[n];const phase = phases[n];const angle = 2 * Math.PI * n * t / sampleCount;sum += amplitude * Math.cos(angle + phase);}}synthesized[t] = sum;}return synthesized;}// 主波形繪制函數function drawWave() {const waveType = waveTypeSelect.value;const frequency = parseInt(frequencySlider.value);const amplitude = parseFloat(amplitudeSlider.value);const harmonics = parseInt(harmonicsSlider.value);const sampleCount = 1024;// 生成原始波形const waveData = generateWaveData(waveType, frequency, amplitude, sampleCount);drawWaveform(originalCtx, waveData);return { waveType, frequency, amplitude, harmonics, sampleCount, waveData };}// 計算并繪制傅里葉變換相關圖像function computeAndDrawFourier() {loading.style.display = 'block';setTimeout(() => {const { waveType, frequency, amplitude, harmonics, sampleCount, waveData } = drawWave();// 計算傅里葉變換const fourierResult = computeFourier(waveData);const { magnitudes, phases } = fourierResult;// 繪制頻譜drawSpectrum(fourierCtx, magnitudes);// 繪制相位譜drawPhaseSpectrum(phaseCtx, phases);// 合成波形const synthesized = synthesizeWave(fourierResult, harmonics, sampleCount);drawWaveform(synthesizedCtx, synthesized, '#27ae60');loading.style.display = 'none';}, 100);}// 事件監聽updateBtn.addEventListener('click', drawWave);computeBtn.addEventListener('click', computeAndDrawFourier);// 初始繪制drawWave();computeAndDrawFourier();// AJAX功能 - 可以加載預設波形function loadPresetWaveform(presetName) {// 模擬AJAX請求loading.style.display = 'block';// 使用setTimeout模擬網絡延遲setTimeout(() => {let presetConfig = {};// 預設配置switch (presetName) {case 'speech':presetConfig = {waveType: 'custom',frequency: 8,amplitude: 0.8,harmonics: 15};break;case 'music':presetConfig = {waveType: 'sine',frequency: 12,amplitude: 0.7,harmonics: 10};break;case 'noise':presetConfig = {waveType: 'sawtooth',frequency: 3,amplitude: 0.9,harmonics: 20};break;default:presetConfig = {waveType: 'sine',frequency: 5,amplitude: 0.5,harmonics: 5};}// 更新UIwaveTypeSelect.value = presetConfig.waveType;frequencySlider.value = presetConfig.frequency;frequencyValue.textContent = `${presetConfig.frequency} Hz`;amplitudeSlider.value = presetConfig.amplitude;amplitudeValue.textContent = presetConfig.amplitude;harmonicsSlider.value = presetConfig.harmonics;harmonicsValue.textContent = presetConfig.harmonics;// 重新繪制drawWave();computeAndDrawFourier();loading.style.display = 'none';}, 500);}// 添加預設按鈕const presetContainer = document.createElement('div');presetContainer.className = 'control-group';presetContainer.innerHTML = `<label>預設波形</label><div style="display: flex; gap: 10px;"><button id="preset-speech">語音</button><button id="preset-music">音樂</button><button id="preset-noise">噪聲</button></div>`;document.querySelector('.controls').appendChild(presetContainer);document.getElementById('preset-speech').addEventListener('click', () => loadPresetWaveform('speech'));document.getElementById('preset-music').addEventListener('click', () => loadPresetWaveform('music'));document.getElementById('preset-noise').addEventListener('click', () => loadPresetWaveform('noise'));</script>
</body>
</html>
僅供參考，我也不懂數學。
傅里葉變換是一種將時域信號轉換為頻域表示的數學工具。它可以將任何周期性的函數分解為簡單正弦波的疊加。
離散傅里葉變換 (DFT)：
X(k) = Σ[n=0 to N-1] x(n) · e-j2πkn/N
傅里葉級數：
f(t) = a0/2 + Σ[n=1 to ∞] [ancos(nωt) + bnsin(nωt)]
在這個演示中，您可以通過控制面板選擇不同的波形，并觀察其傅里葉變換結果。傅里葉變換讓我們能夠看到波形中包含的各種頻率成分及其振幅和相位。