diff options
Diffstat (limited to 'client/index.js')
| -rw-r--r-- | client/index.js | 24 |
1 files changed, 20 insertions, 4 deletions
diff --git a/client/index.js b/client/index.js index 73ace90..728fd60 100644 --- a/client/index.js +++ b/client/index.js @@ -25,19 +25,35 @@ function add (x, y) { const i = x + 1 const j = y + 1 const div = document.createElement('div') + let add = 0 + let frac = Math.log2(i/j) % 1 div.style.left = (x * s) + 'px' div.style.top = (y * s) + 'px' - div.style.backgroundColor = color(i/j, add_off, mul_off) - div.style.opacity = Math.min(j/i * Math.sqrt(3), 1) div.innerHTML = `<div>${i}<\/div><div>\/</div><div>${j}<\/div>` + if (frac < 0) { + frac += 1 + console.log(frac) + } + if (i < j) { + add = -Math.log(j/i) / 3.5 + } + else { + add = Math.log(i/j) / 6 + } + if ( frac === 0) { + div.style.fontWeight = '900' + div.style.left = (x * s) + 'px' + div.style.top = (y * s) + 'px' + } + div.style.backgroundColor = color(frac, add_off + add, mul_off) div.addEventListener('mouseenter', function(){ - div.style.backgroundColor = color(i/j, add_on, mul_on) + div.style.backgroundColor = color(frac, add + 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.style.backgroundColor = color(frac, add + add_off, mul_off) }) div.addEventListener('click', function(){ kalimba.play( root * i/j ) |