teletap/public/teletap.js

const tap = document.querySelector('.container')
const address = document.querySelector('#address').innerHTML
const socket = new ReconnectingWebSocket(location.origin.replace(/^http/, "ws") + address);
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)
        console.log('sending pulse')
        socket.send(JSON.stringify({type: 'pulse', x: e.clientX, y: e.clientY }))
    })