Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ // Mobile menu toggle
+ const menuToggle = document.querySelector('.menu-toggle');
+ const navLinks = document.querySelector('.nav-links');
+
+ menuToggle.addEventListener('click', () => {
+ navLinks.classList.toggle('active');
+ });
+
+ // Filter parameters
+ const firOrder = document.getElementById('firOrder');
+ const firCutoff = document.getElementById('firCutoff');
+ const iirOrder = document.getElementById('iirOrder');
+ const iirCutoff = document.getElementById('iirCutoff');
+
+ // Update value displays
+ const updateValue = (input) => {
+ const display = input.parentElement.querySelector('.value-display');
+ display.textContent = input.value;
+ };
+
+ [firOrder, firCutoff, iirOrder, iirCutoff].forEach(input => {
+ input.addEventListener('input', () => updateValue(input));
+ updateValue(input);
+ });
+
+ // Canvas setup
+ const firCanvas = document.getElementById('firCanvas');
+ const iirCanvas = document.getElementById('iirCanvas');
+ const firCtx = firCanvas.getContext('2d');
+ const iirCtx = iirCanvas.getContext('2d');
+
+ // Drawing functions
+ const drawFrequencyResponse = (ctx, canvas, order, cutoff, type) => {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ // Set up coordinate system
+ ctx.beginPath();
+ ctx.strokeStyle = '#dfe6e9';
+ ctx.moveTo(0, canvas.height/2);
+ ctx.lineTo(canvas.width, canvas.height/2);
+ ctx.moveTo(0, 0);
+ ctx.lineTo(0, canvas.height);
+ ctx.stroke();
+
+ // Draw frequency response
+ ctx.beginPath();
+ ctx.strokeStyle = type === 'FIR' ? '#0984e3' : '#00cec9';
+ ctx.lineWidth = 2;
+
+ for(let x = 0; x < canvas.width; x++) {
+ const freq = x / canvas.width;
+ let response;
+
+ if(type === 'FIR') {
+ response = Math.sin(Math.PI * freq * order) / (Math.PI * freq * order);
+ response = Math.abs(response);
+ } else {
+ response = 1 / (1 + Math.pow(freq/cutoff, 2*order));
+ }
+
+ const y = canvas.height - (response * canvas.height * 0.8);
+
+ if(x === 0) {
+ ctx.moveTo(x, y);
+ } else {
+ ctx.lineTo(x, y);
+ }
+ }
+
+ ctx.stroke();
+ };
+
+ // Initial draws
+ drawFrequencyResponse(firCtx, firCanvas, firOrder.value, firCutoff.value, 'FIR');
+ drawFrequencyResponse(iirCtx, iirCanvas, iirOrder.value, iirCutoff.value, 'IIR');
+
+ // Update on parameter change
+ [firOrder, firCutoff].forEach(input => {
+ input.addEventListener('input', () => {
+ drawFrequencyResponse(firCtx, firCanvas, firOrder.value, firCutoff.value, 'FIR');
+ });
+ });
+
+ [iirOrder, iirCutoff].forEach(input => {
+ input.addEventListener('input', () => {
+ drawFrequencyResponse(iirCtx, iirCanvas, iirOrder.value, iirCutoff.value, 'IIR');
+ });
+ });
+
+ // Resize handling
+ window.addEventListener('resize', () => {
+ drawFrequencyResponse(firCtx, firCanvas, firOrder.value, firCutoff.value, 'FIR');
+ drawFrequencyResponse(iirCtx, iirCanvas, iirOrder.value, iirCutoff.value, 'IIR');
+ });
+ });
