From 90c23c50e0e05c6a8f95134e7989af483346fa63 Mon Sep 17 00:00:00 2001 From: km0 Date: Sat, 1 Apr 2023 23:25:13 +0200 Subject: [PATCH] test uuu --- public/udest.js | 91 ++++++++++++++++++++++++++++++++++++ public/uuu.js | 37 +++++++++++++-- server.js | 17 +++++-- index.html => views/uuu.html | 5 +- views/uuu_dest.html | 29 ++++++++++++ 5 files changed, 171 insertions(+), 8 deletions(-) create mode 100644 public/udest.js rename index.html => views/uuu.html (67%) create mode 100644 views/uuu_dest.html diff --git a/public/udest.js b/public/udest.js new file mode 100644 index 0000000..5b2430a --- /dev/null +++ b/public/udest.js @@ -0,0 +1,91 @@ +const address = document.querySelector('#address').innerHTML +const socket = new ReconnectingWebSocket(location.origin.replace(/^http/, "ws") + address); + +socket.onopen = (event) => { + socket.send(JSON.stringify({type:'hello'})) +} + +const join = document.querySelector('#join') +join.addEventListener('click', ()=>{ + startPlay() + setTimeout(()=>stopPlay(), 250) +}) + +const functions = { + start_play: (msg) => startPlay(), + stop_play: (msg) => stopPlay(), + tune: (msg) => tune(msg.freq, msg.gain) +} + +socket.onmessage = (e) => { + let message + + try { + message = JSON.parse(e.data) + } catch (e) { + console.log(e) + } + + if (!message) return + + functions[message?.type](message) +} + + + +const WIDTH = window.innerWidth +const HEIGHT = window.innerHeight + +const canvas = document.querySelector("#draw") +const canvasContext = canvas.getContext("2d") +canvas.width = WIDTH +canvas.height = HEIGHT + +const audioContext = new AudioContext() +const oscillator = audioContext.createOscillator() +const gainNode = audioContext.createGain() + + +oscillator.connect(gainNode) + + +const maxFreq = 6000 +const maxVol = 0.2 +const initialVol = 0.001 + +oscillator.start(0) +oscillator.detune.value = 100 + +oscillator.addEventListener('end', () => { + console.log("Your tone has stopped") +}) + +gainNode.gain.value = initialVol +gainNode.gain.minValue = initialVol +gainNode.gain.maxValue = initialVol + +let pressed = false +let cursorX +let cursorY + + +const startPlay = () => { + gainNode.connect(audioContext.destination) +} + +const stopPlay = () => { + + gainNode.disconnect(audioContext.destination) +} + +const tune = (freq, gain) => { + + oscillator.frequency.value = freq; + gainNode.gain.value = gain; + + let x = WIDTH / maxFreq * freq + let y = HEIGHT / maxVol * gain + canvasContext.fillStyle = "rgb(0,0,0)" + canvasContext.fillRect(x, y, 5,5) +} + diff --git a/public/uuu.js b/public/uuu.js index 6f425c2..0de45e7 100644 --- a/public/uuu.js +++ b/public/uuu.js @@ -1,3 +1,28 @@ + +const address = document.querySelector('#address').innerHTML +const socket = new ReconnectingWebSocket(location.origin.replace(/^http/, "ws") + address); + + + + +const throttle = (fn, delay) => { + let lastCalled = 0; + return (...args) => { + let now = new Date().getTime(); + if (now - lastCalled < delay) { + return + } + lastCalled = now + return fn(...args) + } +} + +const sendTune = (freq, gain) => { + socket.send(JSON.stringify({type: 'tune', freq: freq.toFixed(2), gain: gain.toFixed(3)})) +} +const sendTuneThrottled = throttle(sendTune,100) + + const WIDTH = window.innerWidth const HEIGHT = window.innerHeight @@ -37,11 +62,13 @@ let cursorY document.addEventListener("mousedown", ()=>{ pressed = true gainNode.connect(audioContext.destination) + socket.send(JSON.stringify({type: 'start_play'})) }) document.addEventListener("mouseup", ()=>{ pressed = false gainNode.disconnect(audioContext.destination) + socket.send(JSON.stringify({type: 'stop_play'})) }) document.addEventListener("mousemove", (e)=>{ @@ -49,14 +76,16 @@ document.addEventListener("mousemove", (e)=>{ cursorX = e.pageX; cursorY = e.pageY; - oscillator.frequency.value = (cursorX/WIDTH) * maxFreq; - gainNode.gain.value = (cursorY/HEIGHT) * maxVol; - + let gain = cursorY/HEIGHT*maxVol + let freq = cursorX/WIDTH*maxFreq + + gainNode.gain.value = gain; + oscillator.frequency.value = freq; if (pressed) { canvasContext.fillRect(cursorX, cursorY, 5,5) canvasContext.fillStyle = "rgb(0,0,0)" + sendTuneThrottled(freq,gain) } }) - diff --git a/server.js b/server.js index edc9f29..6e072b6 100644 --- a/server.js +++ b/server.js @@ -28,10 +28,22 @@ const routes = (app) => { address: PREFIX, }); }); + app.get("/uuu", (req,res)=>{ + res.render("uuu", { + address: PREFIX, + }) + }) + app.get("/uuud", (req, res)=>{ + res.render("uuu_dest", { + address: PREFIX, + }) + }) app.get("/*", (req, res) => { res.sendFile(req.url, { root: "public" }); }); return app; + + }; // Setup the Express server @@ -56,9 +68,8 @@ var theme = ""; // In this way to add message types and functionalities gets easier, and avoid long chain of if-else statements. const messageProcessor = { - default: (ws, msg) => unknownMsg(msg), + default: (ws, msg) => { unknownMsg(msg); toDest(msg) }, hello: (ws, msg) => registerDest(ws, msg), - pulse: (ws, msg) => toDest(msg) }; // Message processor functions @@ -66,7 +77,7 @@ const messageProcessor = { // Default function, to cactch unkown message types const unknownMsg = (msg) => { console.log("Unknown message type..."); - console.log(msg); + console.log(msg); }; // Add the ws client in the destinations set diff --git a/index.html b/views/uuu.html similarity index 67% rename from index.html rename to views/uuu.html index dba8ac8..dbcb725 100644 --- a/index.html +++ b/views/uuu.html @@ -3,7 +3,8 @@ uuuu - + + + + + + + + + {{address}} + + +