const config = { canvasWidth: 800, canvasHeight: 600, backgroundColor: '#f0f0f0', noiseFrequency: 0.01, noiseAmplitude: 100, noiseSpeed: 0.1, }; const canvas = document.createElement('canvas'); canvas.width = config.canvasWidth; canvas.height = config.canvasHeight; document.body.appendChild(canvas); const ctx = canvas.getContext('2d'); function draw() { ctx.fillStyle = config.backgroundColor; ctx.fillRect(0, 0, canvas.width, canvas.height); const noise = Math.sin(Date.now() * config.noiseSpeed + Math.random() * 1000); ctx.fillStyle = `hsl(${noise * 360}, 100%, 50%)`; ctx.beginPath(); ctx.arc(canvas.width / 2, canvas.height / 2, 200, 0, 2 * Math.PI); ctx.fill(); requestAnimationFrame(draw); } function playNoise() { const audio = new Audio('ruido.mp3'); audio.play(); const frequencyInput = document.createElement('input'); frequencyInput.type = 'range'; frequencyInput.min = 0.01; frequencyInput.max = 10; frequencyInput.value = config.noiseFrequency; frequencyInput.oninput = () => { config.noiseFrequency = parseFloat(frequencyInput.value); }; document.body.appendChild(frequencyInput); const amplitudeInput = document.createElement('input'); amplitudeInput.type = 'range'; amplitudeInput.min = 10; amplitudeInput.max = 1000; amplitudeInput.value = config.noiseAmplitude; amplitudeInput.oninput = () => { config.noiseAmplitude = parseFloat(amplitudeInput.value); }; document.body.appendChild(amplitudeInput); const speedInput = document.createElement('input'); speedInput.type = 'range'; speedInput.min = 0.01; speedInput.max = 10; speedInput.value = config.noiseSpeed; speedInput.oninput = () => { config.noiseSpeed = parseFloat(speedInput.value); }; document.body.appendChild(speedInput); } draw(); playNoise();