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)"
+    }
+})
+
+