diff options
Diffstat (limited to 'client/draw.js')
| -rw-r--r-- | client/draw.js | 94 |
1 files changed, 85 insertions, 9 deletions
diff --git a/client/draw.js b/client/draw.js index 3aff6a4..a732745 100644 --- a/client/draw.js +++ b/client/draw.js @@ -14,8 +14,8 @@ let rx, ry const pixels_per_second = 512 // 1024 const canvas = document.createElement('canvas') -document.body.appendChild(canvas) -document.body.addEventListener('resize', resize) +// document.body.appendChild(canvas) +// document.body.addEventListener('resize', resize) resize() recenter() requestAnimationFrame(animate) @@ -26,11 +26,11 @@ const ctx = canvas.getContext('2d') const scratch = document.createElement('canvas') const scratchCtx = scratch.getContext('2d-lodpi') -function resize(){ - w = canvas.width = window.innerWidth - h = canvas.height = window.innerHeight - canvas.style.width = window.innerWidth + 'px' - canvas.style.height = window.innerHeight + 'px' +function resize(ww, hh){ + w = canvas.width = ww || window.innerWidth + h = canvas.height = hh || window.innerHeight + canvas.style.width = w + 'px' + canvas.style.height = h + 'px' } function recenter(){ rx = randint(w), ry = randint(h) @@ -186,9 +186,85 @@ function spectrum(spec, x0, y0, ww, hh){ ctx.drawImage(scratch, x0, y0, width, height) ctx.restore() } +function raw_spectrum(spec, x0, y0, ww, hh, def_min_r, def_min_i){ + const data = spec.data + const fft_size = spec.fft_size + const half_fft_size = spec.fft_size / 2 + const spec_len = data.length + + const _scratch = document.createElement('canvas') + const _scratchCtx = _scratch.getContext('2d-lodpi') + _scratch.width = data.length + _scratch.height = half_fft_size + // console.log("spectrum w/h:", _scratch.width, _scratch.height) + + var imageData = _scratchCtx.createImageData(_scratch.width, _scratch.height) + var pixels = imageData.data + + let i, j, u, v, _r, _i, col, hsl + // let min_r = Infinity, max_r = -Infinity + // let min_i = Infinity, max_i = -Infinity + + // determined empirically.. + // let min_r = -60.4894057005308 + // let max_r = 107.23800966675353 + // let min_i = -59.4894057005308 + // let max_i = 108.23800966675353 + let min_r = -def_min_r + let max_r = def_min_r + let min_i = -def_min_i + let max_i = def_min_i + let delta_r = max_r - min_r + let delta_i = max_i - min_i + let mean_r = 0 + let mean_i = 0 + let sum_mean_r = 0, sum_mean_i = 0 + let real, imag + + for (i = 0; i < spec_len; i++) { + col = data[i] + mean_r = 0 + mean_i = 0 + + for (j = 0; j < half_fft_size; j++) { + u = (j * spec_len + i) * 4 + v = j * 2 + real = col[v] + imag = col[v+1] + mean_r += real + mean_i += imag + _r = clamp((real - min_r) / delta_r * 255, 0, 255) + _i = clamp((imag - min_i) / delta_i * 255, 0, 255) + + // hsl = color.hsl2rgb((_i + 1) / 2, 1.0, 1 - Math.abs(_r / 10)) + pixels[u+0] = _r + pixels[u+1] = _i + pixels[u+2] = 0 // hsl[2] + pixels[u+3] = 255 + + // min_r = Math.min(min_r, col[v]) + // max_r = Math.max(max_r, col[v]) + // min_i = Math.min(min_i, col[v]+1) + // max_i = Math.max(max_i, col[v]+1) + } + mean_r /= half_fft_size + mean_i /= half_fft_size + sum_mean_r += mean_r + sum_mean_i += mean_i + } + + sum_mean_r /= spec_len + sum_mean_i /= spec_len + // console.log(sum_mean_r, sum_mean_i) + // console.log("r:", min_r, max_r) + // console.log("i:", min_i, max_i) + _scratchCtx.putImageData(imageData, 0, 0) + + return { canvas: _scratch, imageData } +} export default { - canvas, ctx, onFrame, + canvas, ctx, onFrame, resize, triangle, clear, line, dot, - waveform, spectrum + waveform, spectrum, raw_spectrum, }
\ No newline at end of file |
