diff options
Diffstat (limited to 'client')
| -rw-r--r-- | client/index.js | 42 | ||||
| -rw-r--r-- | client/lib/util.js | 11 |
2 files changed, 40 insertions, 13 deletions
diff --git a/client/index.js b/client/index.js index 4a86930..5091da7 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, choice, firstTouch } from './lib/util' +import { browser, requestAudioContext, randrange, clamp, choice, firstTouch } from './lib/util' const compressor = new Tone.Compressor(-30, 3).toMaster() @@ -15,11 +15,21 @@ requestAudioContext( () => { console.log('ready') }) +let images = [] +let img; + +for (var i = 745; i <= 750; i++) { + img = new Image + img.src = 'img/' + i + '.png' + images.push(img) +} + let offsets = [] let loading = true let player = new Tone.MultiPlayer({ - applause: 'applause.mp3', + // applause: 'applause.mp3', + applause: '0bB7tTknkDw.mp3', }, () => { loading = false let data = player.buffers.get('applause').get().getChannelData(0) @@ -61,6 +71,7 @@ canvas.height = window.innerHeight let ctx = canvas.getContext('2d') document.body.appendChild(canvas) +let count = 0 function down (e) { drawing = true mouse.x = e.pageX / window.innerWidth @@ -77,10 +88,17 @@ 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) - ctx.fillStyle = color(intensity) - ctx.beginPath() - ctx.arc( x*window.innerWidth, y*window.innerHeight, v*500, 0, Math.PI*2 ) - ctx.fill() + // ctx.fillStyle = color(intensity) + // ctx.beginPath() + // ctx.arc( x*window.innerWidth, y*window.innerHeight, v*500, 0, Math.PI*2 ) + // ctx.fill() + if ((count++ % 5) == 0) { + ctx.save() + ctx.translate(x*window.innerWidth, y*window.innerHeight) + ctx.rotate(Math.random() - 0.5) + ctx.drawImage(choice(images), 0, 0) + ctx.restore() + } } mouse.x = x mouse.y = y @@ -108,8 +126,12 @@ const fonts = ['Arial','Helvetica','Comic Sans MS','Chalkboard','Georgia'] function animate(t){ requestAnimationFrame(animate) ctx.save() - ctx.fillStyle=color(inertialIntensity/2) - ctx.globalAlpha = 0.4 + // ctx.fillStyle=color(inertialIntensity/2) + const n = Math.floor( (0.5 + randrange(0, 1 - inertialIntensity/2) ) * 255 ) + ctx.fillStyle = 'rgb(255,255,255)' // + [n,n,n] + ')' + ctx.globalAlpha = 0.02 + ctx.fillRect(0, 0, w, h) + const w = canvas.width const h = canvas.height ctx.save() @@ -118,9 +140,7 @@ function animate(t){ ctx.translate(-w/2,-h/2) ctx.drawImage(canvas, -2, -2, w+10, h+10) ctx.restore() - ctx.globalAlpha = 0.02 * Math.random() - ctx.fillRect(0, 0, w, h) - ctx.fillStyle='#000' + ctx.fillStyle='#fff' ctx.fillRect(0, 0, w, h) ctx.restore() } diff --git a/client/lib/util.js b/client/lib/util.js index c6df6ec..7bca506 100644 --- a/client/lib/util.js +++ b/client/lib/util.js @@ -12,9 +12,11 @@ document.body.classList.add(isMobile ? 'mobile' : 'desktop') const browser = { isIphone, isIpad, isMobile, isDesktop } function clamp(n,a,b){ return n<a?a:n<b?n:b } -function choice (a){ return a[ Math.floor(Math.random() * a.length) ] } +function choice (a){ return a[ randint(a.length) ] } function mod(n,m){ return n-(m * Math.floor(n/m)) } function firstTouch(f){ return e => { e.preventDefault(); f(e.touches[0]) }} +function randint(n){ return Math.floor(Math.random() * n) } +function randrange(a,b) { return Math.random() * (b-a) + a } function requestAudioContext (fn) { if (isMobile) { @@ -59,5 +61,10 @@ function requestAudioContext (fn) { } } -export { choice, mod, clamp, browser, firstTouch, requestAudioContext } +export { + choice, + randint, randrange, + mod, clamp, + browser, firstTouch, requestAudioContext +} |