You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
1.3 KiB
JavaScript
63 lines
1.3 KiB
JavaScript
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)"
|
|
}
|
|
})
|
|
|
|
|