From 636b62aa6d0d77e19a4b7bb3c039924eeb217a71 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sat, 3 Mar 2018 05:38:35 +0100 Subject: hall demo --- client/draw.js | 86 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 client/draw.js (limited to 'client/draw.js') diff --git a/client/draw.js b/client/draw.js new file mode 100644 index 0000000..b68beaf --- /dev/null +++ b/client/draw.js @@ -0,0 +1,86 @@ +import { + browser, requestAudioContext, + randint, randrange, clamp, +} from './lib/util' + +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) + +function resize(){ + w = canvas.width = window.innerWidth + h = canvas.height = window.innerHeight + clear() +} +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 tri(px, py, r) { + ctx.save() + ctx.globalCompositeOperation = 'multiply' + ctx.fillStyle = color((px+py)/(w+h), 0, 1, 1) + function p(){ + let theta = randrange(0, Math.PI*2) + let x = px + Math.cos(theta) * r + let y = py + Math.sin(theta) * r + return { x, y } + } + ctx.beginPath() + const p0 = p(), p1 = p(), p2 = p() + ctx.moveTo(p0.x, p0.y) + ctx.lineTo(p1.x, p1.y) + ctx.lineTo(p2.x, p2.y) + ctx.lineTo(p0.x, p0.y) + ctx.fill() + ctx.restore() +} +function line(y){ + ctx.beginPath() + ctx.moveTo(0, y) + ctx.lineTo(w, y) + ctx.strokeStyle = "#888" + ctx.strokeWidth = 1 + ctx.stroke() +} +function dot(x, y, r){ + ctx.fillStyle = "#f00" + ctx.beginPath() + ctx.moveTo(x, y) + ctx.arc(x, y, r, 0, 2*Math.PI) + ctx.fill() +} + +export default { + triangle, clear, line, dot, ctx +} \ No newline at end of file -- cgit v1.2.3-70-g09d2