triangle interval map

1 files changed, 56 insertions, 0 deletions

diff --git a/client/index.js b/client/index.js
new file mode 100644
index 0000000..62f7e53
--- /dev/null
+++ b/client/index.js
@@ -0,0 +1,56 @@
+import keys from './lib/keys'
+import color from './lib/color'
+import kalimba from './lib/kalimba'
+
+const root = 440
+const s = 50
+const w = window.innerWidth
+const h = window.innerHeight
+const ws = w/s, hs = h/s
+
+const add_on = 0
+const mul_on = 1.0
+const add_off = 0.1
+const mul_off = 0.9
+
+let dragging = false
+
+for (var i = 0; i < ws; i++) {
+  for (var j = 0; j < hs; j++) {
+	  add(i, j)
+	}
+}
+
+function add (x, y) {
+  const i = Math.max(x, y) + 1
+	const j = Math.min(x, y) + 1
+  const div = document.createElement('div')
+	div.style.left = (x * s) + 'px'
+	div.style.top = (y * s) + 'px'
+	div.style.backgroundColor = color(i/j, add_off, mul_off)
+	if (x < y) div.style.opacity = 0.5
+	div.innerHTML = `<div>${i}<\/div><div>\/</div><div>${j}<\/div>`
+	div.addEventListener('mouseenter', function(){
+	  div.style.backgroundColor = color(i/j, add_on, mul_on)
+		if (dragging) {
+	    kalimba.play( root * i/j )
+		}
+	})
+	div.addEventListener('mouseleave', function(){
+	  div.style.backgroundColor = color(i/j, add_off, mul_off)
+	})
+	div.addEventListener('click', function(){
+	  kalimba.play( root * i/j )
+	})
+	document.body.appendChild(div)
+}
+
+document.addEventListener('mousedown', () => { dragging = true })
+document.addEventListener('mouseup', () => { dragging = false })
+
+keys.listen(function(index){
+  // const freq = scales.current().index(index)
+  // document.body.style.backgroundColor = color( index / scales.current().scale.length )
+  kalimba.play(freq)
+})
+