diff options
Diffstat (limited to 'client')
| -rw-r--r-- | client/index.js | 30 | ||||
| -rw-r--r-- | client/lib/color.js | 4 |
2 files changed, 23 insertions, 11 deletions
diff --git a/client/index.js b/client/index.js index dab7a7e..9b4c56e 100644 --- a/client/index.js +++ b/client/index.js @@ -1,7 +1,7 @@ import Tone from 'tone' import keys from './lib/keys' import color from './lib/color' -import { browser, requestAudioContext, clamp, firstTouch } from './lib/util' +import { browser, requestAudioContext, clamp, choice, firstTouch } from './lib/util' const compressor = new Tone.Compressor(-30, 3).toMaster() @@ -16,10 +16,12 @@ requestAudioContext( () => { }) let offsets = [] +let loading = true let player = new Tone.MultiPlayer({ applause: 'applause.mp3', }, () => { + loading = false let data = player.buffers.get('applause').get().getChannelData(0) let intensities = [] for (let i = 0, len = Math.floor(data.length / GRAIN_SIZE); i < len; i++) { @@ -45,11 +47,9 @@ function tick (time) { if (! offsets.length) return // let offsetIndex = clamp( Math.floor(mouse.y * offsets.length + Math.cos(time/20)), 0, offsets.length-1 ) inertialIntensity = Math.max(intensity, (intensity + inertialIntensity*(inertia-1))/inertia) - console.log(inertialIntensity) let offsetIntensity = 0.94 * inertialIntensity + 0.02 let offsetIndex = Math.floor(offsetIntensity * offsets.length + Math.cos(time)) let offset = Math.max((offsets[offsetIndex] || 0) * GRAIN_TIME + ( 0.25 * Math.sin(time*17/7) ), 0) - // console.log(offset, offsets[offsetIndex] * GRAIN_TIME, ( 0.25 * Math.cos(time*13/7))) player.start('applause', time, offset, GRAIN_TIME * 4, 0, inertialIntensity) } @@ -77,8 +77,7 @@ function move (e){ inertialIntensity = Math.min(0.999, intensity) if (intensity == 0.999) intensity -= (Math.random() * 0.4) if (inertialIntensity == 0.999) inertialIntensity -= (Math.random() * 0.3) - const gray = Math.floor( clamp((10*v),0,1)*127 ) - ctx.fillStyle = 'rgb(' + [gray,gray,gray*2] + ')' + ctx.fillStyle = color(intensity) ctx.beginPath() ctx.arc( x*window.innerWidth, y*window.innerHeight, v*500, 0, Math.PI*2 ) ctx.fill() @@ -105,16 +104,27 @@ else { window.addEventListener('mouseup', up) } -function animate(){ +const fonts = ['Arial','Helvetica','Comic Sans MS','Chalkboard','Georgia'] +function animate(t){ requestAnimationFrame(animate) ctx.save() - ctx.fillStyle='rgba(0,0,0,' + (1-(intensity || 0.01)) + ')' + ctx.fillStyle=color(inertialIntensity/2) ctx.globalAlpha = 0.4 - ctx.rotate(0.001) - ctx.drawImage(canvas, -2, -2, canvas.width+4, canvas.height+4) - ctx.rotate(-0.001) + ctx.rotate(0.005) + ctx.drawImage(canvas, -5, -5, canvas.width+10, canvas.height+10) + ctx.rotate(-0.005) ctx.globalAlpha = 0.05 * Math.random() ctx.fillRect(0, 0, window.innerWidth, window.innerHeight) + ctx.fillStyle='#fff' + ctx.fillRect(0, 0, window.innerWidth, window.innerHeight) ctx.restore() } animate() + +load() +function load() { + if (loading) setTimeout(load, 100) + ctx.font = "100px " + choice(fonts) + ctx.fillStyle=color(Math.random()) + ctx.fillText("LOADING!",window.innerWidth/2-250,window.innerHeight/2) +}
\ No newline at end of file diff --git a/client/lib/color.js b/client/lib/color.js index bd5b7ce..41258ab 100644 --- a/client/lib/color.js +++ b/client/lib/color.js @@ -9,13 +9,15 @@ const palettes = [ [[0.8, 0.5, 0.4], [0.2, 0.4, 0.2], [2.0, 1.0, 1.0], [0.00, 0.25, 0.25]], ] -let palette = palettes[0] +let palette = palettes[5] function channel (t, a, b, c, d, add, mul) { return a + b * Math.cos(2 * Math.PI * (c * t + d)) * mul + add } function color (t, add, mul) { + add = add || 0 + mul = mul || 1 let a, b, c, d const rgb = [] for (var i = 0; i < 3; i++) { |