commit 7a27b19f7306a63138d5740fe001da0776ba935c Author: km0 Date: Sun Mar 19 15:10:49 2023 +0100 init diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2a85a0b --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +node_module +.eslintrc.js +package.json +package-lock.json diff --git a/index.html b/index.html new file mode 100644 index 0000000..6e2a0ba --- /dev/null +++ b/index.html @@ -0,0 +1,14 @@ + + + + + Tap tap tap tap + + + + +
+ +
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..3a94ca7 --- /dev/null +++ b/style.css @@ -0,0 +1,17 @@ +.container { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100vh; +} + +.gradient { + position: absolute; + top: 0; + left: 0; + width: 50px; + height: 50px; + display: inline-block; + pointer-events: none; +} diff --git a/tap.js b/tap.js new file mode 100644 index 0000000..8274d86 --- /dev/null +++ b/tap.js @@ -0,0 +1,94 @@ +const tap = document.querySelector('.container') +const audioContext = new AudioContext(); + +let noiseDuration = 0.05 +const playNoise = (bandHz = 1000, time = 0) => { + + const bufferSize = audioContext.sampleRate * noiseDuration + + // Create an empty buffer + const noiseBuffer = new AudioBuffer({ + length: bufferSize, + sampleRate: audioContext.sampleRate, + }) + + // Fill the buffer with noise + const data = noiseBuffer.getChannelData(0); + for (let i = 0; i < bufferSize; i++) { + data[i] = Math.random() * 2 - 1; + } + + // Create a buffer source from data + const noise = new AudioBufferSourceNode(audioContext, { + buffer: noiseBuffer, + }) + + // Filter the output + const bandpass = new BiquadFilterNode(audioContext, { + type: "bandpass", + frequency: bandHz + }) + + noise.connect(bandpass).connect(audioContext.destination); + noise.start(time); + +} + + + const playPulse = (freq=440, lfoFreq=30, duration=1, time=0) => { + + const osc = new OscillatorNode(audioContext, { + type: "square", + frequency: freq + }) + + const amp = new GainNode(audioContext, { + value: 0 + }) + + const lfo = new OscillatorNode(audioContext, { + type: "sine", + frequency: lfoFreq + }) + + lfo.connect(amp.gain) + osc.connect(amp).connect(audioContext.destination) + lfo.start() + osc.start(time) + // osc.stop(time + duration) + + } + + +const spawnGradient = (x, y) => { + const gradient = document.createElement('div') + gradient.classList.add('gradient') + gradient.style.translate = `${x}px ${y}px` + gradient.style.scale = 0 + + let red = x / tap.clientWidth * 255 + let green = y / tap.clientHeight * 255 + let blue = 0 + + gradient.style.background = `radial-gradient(circle, rgba(${red},${green},${blue},1) 0%, rgba(${red},${green},${blue},0) 25%)` + + tap.appendChild(gradient) + grow(gradient) + +} + +const grow = (el) => { + let scale = Number(el.style.scale) || 0 + el.style.scale = scale + 0.1 + requestAnimationFrame(()=> grow(el)) + +} + + + + +tap.addEventListener("click", (e) => { + playPulse(e.clientX, e.clientY * 0.01) + spawnGradient(e.clientX, e.clientY) + // playNoise(e.clientX) + })