diff options
Diffstat (limited to 'client')
| -rw-r--r-- | client/draw.js | 35 | ||||
| -rw-r--r-- | client/index.js | 14 | ||||
| -rw-r--r-- | client/lib/sampler.js | 8 |
3 files changed, 43 insertions, 14 deletions
diff --git a/client/draw.js b/client/draw.js index 0a86d4a..d3affbd 100644 --- a/client/draw.js +++ b/client/draw.js @@ -6,25 +6,48 @@ import { import mouse from './lib/mouse' import color from './lib/color' +let w, h +let rx, ry + const canvas = document.createElement('canvas') const ctx = canvas.getContext('2d') + document.body.appendChild(canvas) +document.body.addEventListener('resize', resize) +resize() +recenter() +requestAnimationFrame(animate) -let w, h function resize(){ w = canvas.width = window.innerWidth h = canvas.height = window.innerHeight } -document.body.addEventListener('resize', resize) -resize() - +function recenter(){ + rx = randint(w), ry = randint(h) +} +function animate(t){ + requestAnimationFrame(animate) + 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){ ctx.fillStyle = 'rgba(255,255,255,' + (n || 0.5) + ')' ctx.fillRect(0,0,w,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 triangle(px, py, r) { +function tri(px, py, r) { ctx.save() - ctx.globalCompositeOperation = 'difference' + ctx.globalCompositeOperation = 'multiply' ctx.fillStyle = color((px+py)/(w+h), 0, 1, 1) function p(){ let theta = randrange(0, Math.PI*2) diff --git a/client/index.js b/client/index.js index fbe0491..0b5f16b 100644 --- a/client/index.js +++ b/client/index.js @@ -21,10 +21,11 @@ const ws = w/s, hs = h/s let samplers = {} requestAudioContext( () => { - samplers['smash'] = new Sampler('samples/smash/g{}.mp3', 12) - samplers['glass'] = new Sampler('samples/glass/0{}Particle.mp3', 90) }) +samplers['smash'] = new Sampler('samples/smash/g{}.mp3', 12) +samplers['glass'] = new Sampler('samples/glass/0{}Particle.mp3', 90) + let last_index = 0 keys.listen(index => { index = Math.abs(index+10) @@ -63,20 +64,21 @@ mouse.register({ move: (x, y, dx, dy) => { let count = Math.abs(dx + dy) / 40 if (count < 1) return - count = clamp(count, 1, 5) + count = clamp(count, 1, 10) if (Math.abs(dx) + Math.abs(dy) > 100) { samplers['smash'].play(randrange(50, 300) + 100 * (x/window.innerWidth + y/window.innerHeight), 0) draw.clear() draw.triangle(x, y, 500) } let now = Tone.now() - let when, i + let when, i, player for (i = 0; i < count; i++) { when = Math.random()/2000 + (i+ Math.random()/10)/randrange(2,5) - samplers['glass'].play( - 100 * randrange(2,5) / randrange(2,5), + player = samplers['glass'].play( + 100 * randrange(2,5) / randrange(2,5) * randrange(0.5,1.5), now + when ) + player.volume.value = -i*i } setTimeout( () => { draw.triangle(x, y, Math.abs(dx) + Math.abs(dy)) diff --git a/client/lib/sampler.js b/client/lib/sampler.js index b658596..a0f4dfd 100644 --- a/client/lib/sampler.js +++ b/client/lib/sampler.js @@ -4,7 +4,10 @@ import { choice } from './util' const player_count = 2 const compressor = new Tone.Compressor(-30, 3).toMaster() -const reverb = new Tone.JCReverb(0.4).connect(Tone.Master) +const reverb = new Tone.Freeverb({ + roomSize: 0.2, + dampening: 12000, +}).connect(compressor) export default class Sampler { constructor(path, count){ @@ -30,7 +33,7 @@ export default class Sampler { retrigger: true, playbackRate: 1, }) - player.connect(compressor) + player.connect(reverb) sample.players.push(player) } }) @@ -47,5 +50,6 @@ export default class Sampler { player.playbackRate = freq / best.sample.root player.start(time) + return player } } |