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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
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
}
|
