refining glass sound

1 files changed, 29 insertions, 6 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)