init
commit
7a27b19f73
@ -0,0 +1,4 @@
|
|||||||
|
node_module
|
||||||
|
.eslintrc.js
|
||||||
|
package.json
|
||||||
|
package-lock.json
|
||||||
@ -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>
|
||||||
@ -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;
|
||||||
|
}
|
||||||
@ -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)
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue