1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
<!doctype html>
<html>
<head>
<title>colundi</title>
<style>
html,body {
margin: 0; padding: 0;
width: 100%; height: 100%;
overflow: hidden;
background: black;
}
#divs div {
float: left;
width: calc(100vw / 6);
height: calc(100vh / 6);
transition: opacity 1.0s;
opacity: 0;
}
#divs div.hover {
transition: opacity 0s;
opacity: 1;
}
</style>
</head>
<body><div id="divs"></div></body>
<script src="Tone.min.js"></script>
<script>
function lerp(n,a,b){ return (b-a)*n+a }
var Frequency = "55 62.64 63 70 73.6 83 98.4 105 110 111 147 147.85 172.06 210.42 221.23 264 293 342 396 404 408 410 413 416 417 420.82 440 448 528 630 639 685 852 880 1052 12000".split(" ").map(function(n){ return parseFloat(n) }).reverse()
var polysynth = new Tone.PolySynth(4, Tone.synth)
polysynth.set({
oscillator: { type: 'triangle' },
envelope:{
attack: 0.01,
decay: 0.1,
sustain: 0.3,
release: 0.2,
}
})
var feedbackDelay = new Tone.FeedbackDelay("4t", 0.5).toMaster();
polysynth.connect(feedbackDelay)
var last_f = -1
var dur = "2n"
Frequency.forEach(function(f, i){
var div = document.createElement("div")
div.addEventListener("mouseenter", function(){
polysynth.triggerAttackRelease(f, dur);
divs.children[i].classList.add("hover")
setTimeout(function(){ divs.children[i].classList.remove("hover") }, 50)
})
var ii = i / Frequency.length
div.style.backgroundColor = "hsl(" +
lerp(1-ii, 220, 360) + ", " +
lerp(ii, 25, 80) + "%, " +
lerp(1-ii, 25, 80) + "%)"
divs.appendChild(div)
})
var keys = {}, voices = {}
"1234567890qwertyuiopasdfghjklzxcvbnm".toUpperCase().split("").map(function(k,i){
keys[k.charCodeAt(0)] = i
})
document.addEventListener("keydown", function(e){
if (! (e.keyCode in keys)) return
var i = keys[e.keyCode]
var f = Frequency[i]
if (voices[f]) return
voices[f] = true
divs.children[i].classList.add("hover")
polysynth.triggerAttack(f)
})
document.addEventListener("keyup", function(e){
if (! (e.keyCode in keys)) return
var i = keys[e.keyCode]
var f = Frequency[i]
voices[f] = false
divs.children[i].classList.remove("hover")
polysynth.triggerRelease(f)
})
</script>
</html>
|
