more color stuff

1 files changed, 20 insertions, 10 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