add uuuuuuuuuu

2 years ago · 4e57ebe4f3
parent 386f9f0ba5
commit 4e57ebe4f3
2 changed files with 86 additions and 0 deletions
--- a/uuu.html
+++ b/uuu.html
@ -0,0 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>uuuu</title>
    <script src="public/uuu.js" defer></script>
    <style>
    #draw {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
    }
    </style>
 </head>
 <body>
    <canvas id="draw"></canvas>
 </body>
 </html>
--- a/uuu.js
+++ b/uuu.js
@ -0,0 +1,62 @@
 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
 document.addEventListener("mousedown", ()=>{
    pressed = true
    gainNode.connect(audioContext.destination)
 })
 document.addEventListener("mouseup", ()=>{
    pressed = false
    gainNode.disconnect(audioContext.destination)
 })
 document.addEventListener("mousemove", (e)=>{
    cursorX = e.pageX;
    cursorY = e.pageY;
    gainNode.gain.value = (cursorY/HEIGHT) * maxVol;
    oscillator.frequency.value = (cursorX/WIDTH) * maxFreq;
    if (pressed) {
        canvasContext.fillRect(cursorX, cursorY, 5,5)
        canvasContext.fillStyle = "rgb(0,0,0)"
    }
 })