init

1 year ago · 7a27b19f73
commit 7a27b19f73
4 changed files with 129 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,4 @@
+node_module
+.eslintrc.js
+package.json
+package-lock.json
--- a/index.html
+++ b/index.html
@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Tap tap tap tap</title>
+    <script src="tap.js" defer></script>
+    <link rel="stylesheet" href="style.css"></link>
+</head>
+<body>
+    <div class="container">
+
+    </div>
+</body>
+</html>
--- a/style.css
+++ 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;
+}
--- a/tap.js
+++ 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)
+    })