diff options
| author | Jules Laplace <jules@okfoc.us> | 2016-07-12 21:58:47 -0400 |
|---|---|---|
| committer | Jules Laplace <jules@okfoc.us> | 2016-07-12 21:58:47 -0400 |
| commit | f76ca31d4d97f0d37ad3d2c61ef0c68aab5e40fb (patch) | |
| tree | 0a8f348eabb40c74ac9cf049d86e747f7b23a74b /index.html | |
tonejs colundi experiment
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..e15cbec --- /dev/null +++ b/index.html @@ -0,0 +1,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> + |