This repository has no description
✨ Web: fade things out on note off events
author
Gwenn Le Bihan
committer
Ewen Le Bihan
date
(May 2, 2024, 5:24 PM +0200)
commit
1c322631
1c322631a72054fffc07b61b974f745fce4335bd
parent
2798b31f
2798b31fab99e11fc717a6cde2909a3067dcb6a0
+29
-12
+29
-12
web/index.html
+29
-12
web/index.html
···
11
11
async function run() {
12
12
await init()
13
13
window.renderImage = (vel, col) => {
14
-
console.log([...arguments])
15
-
document.querySelector(`.frame[data-color=${color_name(col)}]`)?.remove()
14
+
document
15
+
.querySelectorAll(`.frame[data-color=${color_name(col)}]`)
16
+
?.forEach((el) => el.remove())
16
17
render_image(vel, col)
17
18
}
18
19
}
19
20
run()
20
21
22
+
function fadeOutElement(el) {
23
+
if (!el) return
24
+
const duration = window.pedal_held ? 5e3 : 200
25
+
el.style.transition = `opacity ${duration}ms ease-out`
26
+
el.style.opacity = 0
27
+
setTimeout(() => el.remove(), duration)
28
+
}
29
+
30
+
function frameElement(color) {
31
+
return document.querySelector(`.frame[data-color=${color_name(color)}]`)
32
+
}
33
+
21
34
window.pedal_held = false
22
35
23
36
window.addEventListener("keypress", (e) => {
···
35
48
console.log(cmd, args)
36
49
if (cmd === 176 && args[0] === 64) {
37
50
const [_, intensity] = args
51
+
window.pedal_held = intensity > 0
38
52
if (intensity === 0) {
39
-
document
40
-
.querySelectorAll(".frame")
41
-
?.forEach((frame) => frame.remove())
53
+
document.querySelectorAll(".frame")?.forEach(fadeOutElement)
42
54
}
43
55
return
44
56
}
45
57
if (cmd !== 144) return
46
58
const [pitch, velocity] = args
47
-
if (velocity === 0) return
59
+
48
60
const colors = [
49
61
Color.Blue,
50
62
Color.Purple,
···
54
66
Color.Yellow,
55
67
Color.Green,
56
68
Color.Cyan,
57
-
Color.White,
58
69
]
59
-
// get color uniformly in this range from 28 (lowest pitch) to 103 (highest pitch)
60
70
61
-
const color =
62
-
colors[Math.floor(((pitch - 28) / (103 - 28)) * colors.length)]
63
-
console.log(pitch, color)
64
-
window.renderImage(velocity / 128, color ?? "white")
71
+
// get octave from pitch
72
+
const octave = Math.floor(pitch / 12) - 1
73
+
74
+
// if octave is 0, use the first color
75
+
const color = colors[octave] ?? colors[0]
76
+
77
+
if (velocity === 0) {
78
+
fadeOutElement(frameElement(color))
79
+
} else {
80
+
window.renderImage(velocity / 128, color ?? "white")
81
+
}
65
82
}
66
83
})
67
84
})