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