summaryrefslogtreecommitdiff
path: root/client/draw.js
diff options
context:
space:
mode:
Diffstat (limited to 'client/draw.js')
-rw-r--r--client/draw.js94
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