-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (94 loc) · 3.5 KB
/
index.html
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<head>
<style>
body {
background: #000;
margin: 0;
overflow: hidden
}
</style>
</head>
<body>
<canvas id = cvs></canvas>
<script>
'use strict'
function resize() {
cvs.width = innerWidth
cvs.height = innerHeight
scale = (cvs.width + cvs.height) / 30
}
function fillRect(x, y, w, h) {
x = cvs.width / 2 + (x - cX) * scale
y = cvs.height / 2 + (y - cY) * scale
w = w * scale
h = h * scale
ctx.fillRect(x, y, w, h)
ctx.strokeRect(x, y, w, h)
}
function get(x, y) {
x = Math.floor(x)
y = Math.floor(y)
return -Math.sin((x * x + y * y) * y * x)
}
function rgb(r, g, b, a = 1) {
return 'rgb('+r*255+','+g*255+','+b*255+','+a+')'
}
function update() {
ctx.fillStyle = '#000'
ctx.fillRect(0, 0, cvs.width, cvs.height)
time += .1
cA = 4 + Math.sin(time / 10 + Math.cos(time / 5)) + time / 20 + Math.sin(time * walk) * .08
cX += speed
for (let i = 0; i < rayAmt; i ++) {
let length = 0
let hue = 0
let x = cX
let y = cY
const ang = i * fov / rayAmt + cA
for (let j = 0; j < rayItr; j ++) {
length = j * rayJmp
x += Math.cos(ang) * rayJmp
y += Math.sin(ang) * rayJmp
if (get(x, y) > 0) {
hue = get(x, y) * 100
break
}
if (j == rayItr - 1)
length = 0
}
const w = cvs.width / rayAmt
const h = 10 / length * scale
const s = length * 45
const lines = 1 + Math.floor(hue / 40)
const cH = .7 - Math.abs(Math.sin(time * walk)) * .13
// draw blocks
for (let j = 0; j < lines; j ++) {
const yH = h / lines
hue += j * lines * hue
const r = .5 + Math.sin(hue) * .2
const g = .7 + Math.sin(hue * 3) * .2
const b = .5 + Math.sin(hue * 5) * .2
ctx.fillStyle = rgb(r, g, b, .75 / length - length / 20)
ctx.fillRect(i * w, cvs.height / 2 - cH * h + yH * j, w, yH)
}
}
requestAnimationFrame(update)
}
const ctx = cvs.getContext('2d')
const rayJmp = .03
const rayAmt = 150
const rayItr = 150
const fov = 1.5
let scale = 0
let time = 0
let cX = 0
let cY = .5
let cA = 0
const walk = 1.5
const speed = .026
addEventListener('resize', resize)
resize()
update()
</script>
</body>
</html>