t t t t looper sketch
parent
4e57ebe4f3
commit
856937ddb1
@ -0,0 +1,95 @@
|
||||
// The surface where to tap
|
||||
const ttt = document.querySelector("#ttt")
|
||||
|
||||
// The input to store a sequence
|
||||
const s = document.querySelector("#s")
|
||||
|
||||
|
||||
let series = []
|
||||
let initial = null
|
||||
|
||||
// The function of a tap
|
||||
const tap = () => {
|
||||
if (initial == null) {
|
||||
initial = new Date()
|
||||
series.push(0)
|
||||
} else {
|
||||
series.push((new Date() - initial))
|
||||
}
|
||||
|
||||
ttt.innerHTML = series
|
||||
}
|
||||
|
||||
|
||||
const stap = () => {
|
||||
if (initial == null) return
|
||||
|
||||
// insert the final value
|
||||
series.push((new Date() - initial))
|
||||
|
||||
// copy the series
|
||||
let sequence = series
|
||||
|
||||
// reset series and initial date
|
||||
series = []
|
||||
initial = null
|
||||
|
||||
return sequence
|
||||
}
|
||||
|
||||
const audioContext = new AudioContext()
|
||||
const gain = new GainNode(audioContext, {
|
||||
value: 0.05
|
||||
})
|
||||
|
||||
|
||||
const playNoise = (bandHz=1000, time=0) => {
|
||||
|
||||
let noiseDuration = 0.05
|
||||
|
||||
const bufferSize = audioContext.sampleRate * noiseDuration
|
||||
const noiseBuffer = new AudioBuffer({
|
||||
length: bufferSize,
|
||||
sampleRate: audioContext.sampleRate
|
||||
})
|
||||
|
||||
const data = noiseBuffer.getChannelData(0)
|
||||
for (let i=0; i<bufferSize; i++){
|
||||
data[i] = Math.random() * 2 - 1;
|
||||
}
|
||||
|
||||
|
||||
const noise = new AudioBufferSourceNode(audioContext, {
|
||||
buffer: noiseBuffer
|
||||
})
|
||||
|
||||
const bandpass = new BiquadFilterNode(audioContext, {
|
||||
type: "bandpass",
|
||||
frequency: bandHz
|
||||
})
|
||||
|
||||
noise.connect(bandpass).connect(gain).connect(audioContext.destination);
|
||||
noise.start(time)
|
||||
}
|
||||
|
||||
const promiSeq = (sequence) => {
|
||||
return new Promise((resolve)=>{
|
||||
const seq = (sequence = []) => {
|
||||
if (!sequence.length) resolve()
|
||||
setTimeout( ()=> playNoise(), sequence[0])
|
||||
sequence.shift()
|
||||
seq(sequence)
|
||||
}
|
||||
seq(sequence)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
ttt.addEventListener("click", () => tap())
|
||||
|
||||
s.addEventListener("click", () => {
|
||||
let sequence = stap();
|
||||
promiSeq([...sequence])
|
||||
})
|
||||
|
||||
@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>t t t</title>
|
||||
<script src="ttt.js" defer></script>
|
||||
<style>
|
||||
#ttt {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#s {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button id="s">Send</button>
|
||||
<div id="ttt"></div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,107 @@
|
||||
// The surface where to tap
|
||||
const ttt = document.querySelector("#ttt")
|
||||
|
||||
// The input to store a sequence
|
||||
const s = document.querySelector("#s")
|
||||
|
||||
|
||||
let series = []
|
||||
let initial = null
|
||||
|
||||
// The function of a tap
|
||||
const tap = () => {
|
||||
if (initial == null) {
|
||||
initial = new Date()
|
||||
series.push(0)
|
||||
} else {
|
||||
series.push((new Date() - initial))
|
||||
}
|
||||
|
||||
ttt.innerHTML = series
|
||||
}
|
||||
|
||||
|
||||
const stap = () => {
|
||||
if (initial == null) return
|
||||
|
||||
// insert the final value
|
||||
series.push((new Date() - initial))
|
||||
|
||||
// copy the series
|
||||
let sequence = series
|
||||
|
||||
// reset series and initial date
|
||||
series = []
|
||||
initial = null
|
||||
|
||||
return sequence
|
||||
}
|
||||
|
||||
const audioContext = new AudioContext()
|
||||
const gain = new GainNode(audioContext, {
|
||||
value: 0.05
|
||||
})
|
||||
|
||||
|
||||
const playNoise = (bandHz=1000, time=0) => {
|
||||
|
||||
let noiseDuration = 0.05
|
||||
|
||||
const bufferSize = audioContext.sampleRate * noiseDuration
|
||||
const noiseBuffer = new AudioBuffer({
|
||||
length: bufferSize,
|
||||
sampleRate: audioContext.sampleRate
|
||||
})
|
||||
|
||||
const data = noiseBuffer.getChannelData(0)
|
||||
for (let i=0; i<bufferSize; i++){
|
||||
data[i] = Math.random() * 2 - 1;
|
||||
}
|
||||
|
||||
|
||||
const noise = new AudioBufferSourceNode(audioContext, {
|
||||
buffer: noiseBuffer
|
||||
})
|
||||
|
||||
|
||||
const bandpass = new BiquadFilterNode(audioContext, {
|
||||
type: "bandpass",
|
||||
frequency: bandHz
|
||||
})
|
||||
|
||||
noise.connect(bandpass).connect(gain).connect(audioContext.destination);
|
||||
noise.start(time)
|
||||
}
|
||||
|
||||
const playOsc = (freq=440) => {
|
||||
const osc = new OscillatorNode(audioContext, {
|
||||
type: "sine",
|
||||
frequency: freq
|
||||
})
|
||||
osc.connect(gain).connect(audioContext.destination);
|
||||
osc.start()
|
||||
osc.stop(audioContext.currentTime + 0.1)
|
||||
}
|
||||
|
||||
const seq = (sequence, fn) => {
|
||||
if (!sequence.length) return
|
||||
setTimeout(fn, sequence[0])
|
||||
let copy = [...sequence]
|
||||
copy.shift()
|
||||
seq(copy,fn)
|
||||
}
|
||||
|
||||
|
||||
ttt.addEventListener("click", () => tap())
|
||||
|
||||
|
||||
s.addEventListener("click", () => {
|
||||
let sequence = stap();
|
||||
let period = sequence.pop()
|
||||
let freq = Math.random() * 1000
|
||||
seq(sequence, ()=> playOsc(freq))
|
||||
setInterval(seq, period, sequence, ()=>playOsc(freq))
|
||||
|
||||
})
|
||||
|
||||
|
||||
Loading…
Reference in New Issue