-
Notifications
You must be signed in to change notification settings - Fork 0
/
rain.html
109 lines (89 loc) · 2.47 KB
/
rain.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
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
<head>
</head>
<script>
new p5();
const charWidth = 8.4
const charHeight = 9.0
let t = 0,
lineLength = 0
let startX = random(innerWidth / charWidth * .2, innerWidth / charWidth * .8)
let cloud = {
startX,
ellipses: Array.apply(null, Array(5)).map(i => {
return {
x: startX + random(-40, 50),
y: random(0, 10),
r: random(3, 20)
}
})
}
let snowballs = []
/**
* Clouds
*
*
*/
function draw() {
if (random() > 0.9 && snowballs.length < 5) {
snowballs.push({
x: random(innerWidth / charWidth * 2),
y: -5,
vx: random(-1, -0.8),
vy: random(1, 2),
size: random(1, 2),
})
}
for (let i = 0; i < snowballs.length; i++) {
const snowball = snowballs[i]
snowball.x += snowball.vx + random(-0.2, 0.2)
snowball.y += snowball.vy + random(-0.2, 0.2)
if (snowball.y > innerHeight / charHeight + snowball.size || snowball.x < -snowball.size) {
snowballs.splice(i, 1)
}
}
// The update loop
let lines = ""
lineLength = innerWidth / charWidth
for (let y = 0; y < innerHeight / charHeight; y++) {
let str = ""
for (let x = 0; x < innerWidth / charWidth; x++) {
str += charForPos(x, y, char)
}
lines += str + "\n"
}
document.body.innerHTML = lines
}
/**
* Draw, basically
*/
function charForPos(x, y, char) {
for (const snowball of snowballs) {
if (dist(snowball.x, snowball.y, x, y) < snowball.size) {
return " "
}
}
for (const ellipse of cloud.ellipses) {
if (dist(ellipse.x, ellipse.y, x, y) < ellipse.r) {
return " "
}
}
return '█'
}
</script>
<style>
body {
cursor: none;
margin: 0;
cursor: default;
user-select: none;
display: block;
unicode-bidi: embed;
white-space: pre;
overflow: hidden;
font-family: monospace;
line-height: .65;
font-size: 14px;
}
</style>