-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathp5js-starfield.html
118 lines (104 loc) · 2.85 KB
/
p5js-starfield.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>
<html>
<head>
<meta charset="UTF-8" />
<title>P5.js Animated Starfield by T.D. Stoneheart</title>
<script src="p5.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
background-color: black;
}
</style>
</head>
<body>
<script>
new p5(starfield);
function starfield(P5) {
class Star {
angle = 0;
distance = 1;
red = 255;
green = 255;
blue = 255;
static get ACCELERATION() {
return 1.025;
}
static get GROWTH() {
return 0.4;
}
static get MINIMUM_DISTANCE_FACTOR() {
return 0.05;
}
static get ALPHA_EXPONENT() {
return 2;
}
constructor() {
this.angle = generateAngle();
this.red = generateUint8Value();
this.green = generateUint8Value();
this.blue = generateUint8Value();
}
get x() {
return Math.cos(this.angle) * this.distance;
}
get y() {
return Math.sin(this.angle) * this.distance;
}
get size() {
return this.distance ** Star.GROWTH;
}
get alpha() {
const minimumDistance =
Math.min(P5.width, P5.height) * Star.MINIMUM_DISTANCE_FACTOR;
return (
Math.min(
1,
(this.distance / minimumDistance) ** Star.ALPHA_EXPONENT
) * 255
);
}
isInsideViewport() {
return this.x <= P5.width / 2 && this.y <= P5.height / 2;
}
update() {
this.distance *= Star.ACCELERATION;
return this;
}
render() {
P5.stroke(this.red, this.green, this.blue, this.alpha);
P5.strokeWeight(this.size);
P5.point(this.x, this.y);
return this;
}
}
let stars = [];
const appMethods = {
setup() {
P5.createCanvas(P5.windowWidth, P5.windowHeight - 4);
P5.frameRate(60);
},
windowResized() {
P5.resizeCanvas(P5.windowWidth, P5.windowHeight - 4);
},
draw() {
P5.background(0);
P5.translate(P5.width / 2, P5.height / 2);
stars = stars
.filter(star => star.isInsideViewport())
.concat([new Star()]);
for (const star of stars) star.update().render();
},
};
Object.assign(P5, appMethods);
function generateAngle() {
return Math.random() * 2 * Math.PI;
}
function generateUint8Value() {
return Math.floor(Math.random() * 256);
}
}
</script>
</body>
</html>