1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
import {
browser, requestAudioContext,
randint, randrange, clamp,
} from './lib/util'
import mouse from './lib/mouse'
import color from './lib/color'
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
document.body.appendChild(canvas)
let w, h
function resize(){
w = canvas.width = window.innerWidth
h = canvas.height = window.innerHeight
}
document.body.addEventListener('resize', resize)
resize()
function clear(n){
ctx.fillStyle = 'rgba(255,255,255,' + (n || 0.5) + ')'
ctx.fillRect(0,0,w,h)
}
function triangle(px, py, r) {
ctx.save()
ctx.globalCompositeOperation = 'difference'
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()
}
export default {
triangle, clear
}
|
