summaryrefslogtreecommitdiff
path: root/app/client/audio
diff options
context:
space:
mode:
authorJules Laplace <julescarbon@gmail.com>2018-06-06 01:27:02 +0200
committerJules Laplace <julescarbon@gmail.com>2018-06-06 01:27:02 +0200
commit2538fbd5471a61d51742281df0e019a2dd4ea24e (patch)
tree89f877a86205412b7bf044cd8034ee6c350f204c /app/client/audio
parentd3fcd1212f7214b12b04a83d03dfb129c5fbb0a4 (diff)
consolidate
Diffstat (limited to 'app/client/audio')
-rw-r--r--app/client/audio/lib/_draw.js139
-rw-r--r--app/client/audio/lib/draw.js4
-rw-r--r--app/client/audio/wav2pix.js2
3 files changed, 3 insertions, 142 deletions
diff --git a/app/client/audio/lib/_draw.js b/app/client/audio/lib/_draw.js
deleted file mode 100644
index 974fa62..0000000
--- a/app/client/audio/lib/_draw.js
+++ /dev/null
@@ -1,139 +0,0 @@
-import {
- browser, requestAudioContext,
- randint, randrange, clamp, mod,
-} from './lib/util'
-
-import './lib/vendor/hidpi-canvas'
-
-import mouse from './lib/mouse'
-import color from './lib/color'
-
-let w, h
-let rx, ry
-
-const pixels_per_second = 512 // 1024
-
-const canvas = document.createElement('canvas')
-// document.body.appendChild(canvas)
-// document.body.addEventListener('resize', resize)
-resize()
-recenter()
-requestAnimationFrame(animate)
-
-// must request context after resizing
-const ctx = canvas.getContext('2d')
-
-const scratch = document.createElement('canvas')
-const scratchCtx = scratch.getContext('2d-lodpi')
-
-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)
-}
-let frame = null
-function onFrame(fn){
- frame = fn
-}
-function animate(t){
- requestAnimationFrame(animate)
- if (frame) {
- frame(t)
- frame = null
- }
- // ctx.save()
- // ctx.globalAlpha = 0.0001
- // ctx.translate(w/2, h/2)
- // ctx.rotate(0.1)
- // ctx.translate(-rx, -ry)
- // ctx.drawImage(canvas, 0, 0)
- // ctx.restore()
-}
-function clear(n, x, y, ww, hh){
- ctx.fillStyle = 'rgba(255,255,255,' + (n || 0.9) + ')'
- ctx.fillRect(x || 0, y || 0, ww || w, hh || h)
- recenter()
-}
-function triangle(px,py,r){
- setTimeout( () => tri(px,py,r), Math.random()*10)
- // setTimeout( () => tri(px,py,r), Math.random()*200)
- // setTimeout( () => tri(px,py,r), Math.random()*300)
-}
-function tri(px, py, r) {
- ctx.save()
- ctx.globalCompositeOperation = 'multiply'
- ctx.fillStyle = color.color((px+py)/(w+h), 0, 1, 0.2)
- function p(){
- let theta = randrange(0, Math.PI*2)
- let x = px + Math.cos(theta) * r
- let y = py + Math.sin(theta) * r
- return { x, y }
- }
- ctx.beginPath()
- const p0 = p(), p1 = p(), p2 = p()
- ctx.moveTo(p0.x, p0.y)
- ctx.lineTo(p1.x, p1.y)
- ctx.lineTo(p2.x, p2.y)
- ctx.lineTo(p0.x, p0.y)
- ctx.fill()
- ctx.restore()
-}
-function line(y){
- ctx.beginPath()
- ctx.moveTo(0, y)
- ctx.lineTo(w, y)
- ctx.strokeStyle = "#888"
- ctx.strokeWidth = 1
- ctx.stroke()
-}
-function dot(x, y, r){
- ctx.fillStyle = "#f00"
- ctx.beginPath()
- ctx.moveTo(x, y)
- ctx.arc(x, y, r, 0, 2*Math.PI)
- ctx.fill()
-}
-function waveform(pcm, sr, pos, zoom){
- sr = sr || 44100
- pos = pos || 0
-
- var width = w
- var height = Math.floor(h/4)
- var half_height = Math.floor(height/2)
- var x0 = 0
- var y0 = 20
- var ymid = y0 + half_height
- var max_width_in_seconds = width / pixels_per_second
- var max_width_in_samples = max_width_in_seconds * sr
- var pcm_length = pcm.length
- var len = Math.min(pcm_length, max_width_in_samples)
- var pcm_step = sr / pixels_per_second
- var i
- ctx.save()
-
- clear(1, x0, y0, width, height)
-
- line(ymid)
- ctx.beginPath()
- for (i = 0; i < width; i += 0.5) {
- var si = Math.floor(pcm_step * i + pos)
- if (si > pcm_length) break
- var val = pcm[si] // -1, 1
- // ctx.moveTo(x0 + i, ymid)
- ctx.lineTo(x0 + i, ymid + val * half_height)
- }
- ctx.strokeStyle = "rgba(250,20,0,0.9)"
- ctx.strokeWidth = 1
- ctx.stroke()
- ctx.restore()
-}
-
-export default {
- canvas, ctx, onFrame, resize,
- triangle, clear, line, dot,
- waveform, spectrum, raw_spectrum,
-} \ No newline at end of file
diff --git a/app/client/audio/lib/draw.js b/app/client/audio/lib/draw.js
index f5ba3ac..e523b6a 100644
--- a/app/client/audio/lib/draw.js
+++ b/app/client/audio/lib/draw.js
@@ -1,7 +1,7 @@
const scratch = document.createElement('canvas')
const scratchCtx = scratch.getContext('2d-lodpi')
-function spectrum(spec, x0, y0, ww, hh){
+export function spectrum(spec, x0, y0, ww, hh){
const data = spec.data
const fft_size = spec.fft_size
const half_fft_size = spec.fft_size / 2
@@ -56,7 +56,7 @@ function spectrum(spec, x0, y0, ww, hh){
ctx.restore()
}
-function raw_spectrum(spec, x0, y0, ww, hh, def_min_r, def_min_i){
+export 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
diff --git a/app/client/audio/wav2pix.js b/app/client/audio/wav2pix.js
index 089816d..e0a10fd 100644
--- a/app/client/audio/wav2pix.js
+++ b/app/client/audio/wav2pix.js
@@ -2,7 +2,7 @@ import Tone from 'tone'
import JSZip from 'jszip'
import FileSaver from 'file-saver'
-import draw from './lib/draw'
+import * as draw from './lib/draw'
import output from './lib/output'
import spectrum from './lib/spectrum'