https://organism.earth/v2-starfield.js

1let canvas;
2let stars = [];
3let maxStars = 275;
4
5let fpsHistory = Array(60);
6let cpuHistory = Array(60);
7
8window.debug = false;
9
10function setup() {
11	canvas = createCanvas(windowWidth, windowHeight);
12	canvas.parent('splash-screen');
13	background(0);
14
15	if (windowWidth < 500) maxStars = 50;
16
17	for (let i = 0; i < 20; i++) {
18		stars.push(new Star());
19	}
20}
21
22function windowResized() {
23	resizeCanvas(windowWidth, windowHeight);
24}
25
26document.getElementById('splash-screen').addEventListener('transitionend', (event) => {
27	if (event.propertyName === 'transform') {
28		//stars = [];
29		noLoop();
30	}
31
32}, false);
33
34function draw() {
35	frameRate(60);
36
37	clear();
38	background(0);
39	noStroke();
40
41	const start = millis();
42
43	for (const star of stars) {
44		star.update();
45		star.draw();
46	}
47
48	const end = millis();
49	const dur = end - start;
50
51	if (frameRate() < 30) {
52		stars.pop();
53	} else if (stars.length < maxStars) {
54		stars.push(new Star());
55	}
56
57	// if (window.debug === true) {
58	// 	fill(255);
59	// 	stroke(0);
60	// 	drawFPS();
61	// 	drawProcessingTime(dur);
62	// 	drawStarCounter();
63	// }
64}
65
66function drawFPS() {
67	const fps = frameRate();
68
69	fpsHistory.shift();
70	fpsHistory.push(fps);
71
72	const sum = fpsHistory.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
73	const average = sum / fpsHistory.length;
74
75	text('FPS: ' + average.toFixed(1), 10, 20);
76}
77
78function drawProcessingTime(duration) {
79	cpuHistory.shift();
80	cpuHistory.push(duration);
81
82	const sum = cpuHistory.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
83	const average = sum / cpuHistory.length;
84
85	text('CPU: ' + average.toFixed(1) + ' ms', 10, 40);
86}
87
88function drawStarCounter() {
89	text('Stars: ' + stars.length, 10, 60);
90}
91
92
93
94class Star {
95	constructor() {
96		this.reset();
97	}
98
99	reset() {
100		const centerH = windowWidth / 2;
101		const centerV = windowHeight / 2;
102
103		const radius = 160;
104		const deg = random(360);
105
106		const x = radius * Math.cos(deg) + centerH;
107		const y = radius * Math.sin(deg) + centerV;
108		this.position = createVector(x, y);
109
110		this.velocity = p5.Vector.fromAngle(deg, 0.5);
111		this.acceleration = p5.Vector.fromAngle(deg, random(0.001, 0.02));
112
113		this.size = random(1, 3.5);
114
115		this.r = Math.floor(random(180, 255));
116		this.g = Math.floor(random(180, 255));
117		this.b = Math.floor(random(180, 255));
118
119		this.alphaMax = random(0.2, 0.75);
120		this.alphaCycle = Math.floor(random(360));
121		this.alphaCycleSpeed = random(0.01, 0.09);
122	}
123
124	draw() {
125		const color = this.isNearMouse ? `rgba(5, 230, 245, ${this.alpha})` : `rgba(${this.r}, ${this.g}, ${this.b}, ${this.alpha})`;
126		fill(color);
127
128		const size = this.isNearMouse ? this.size * 1.25 : this.size;
129		circle(this.position.x, this.position.y, size);
130	}
131
132	update() {
133		if (this.isOffscreen()) {
134			this.reset();
135			return;
136		}
137
138		this.#updateAlpha();
139		this.#updatePosition();
140	}
141
142	#updateAlpha() {
143		this.alphaCycle += this.alphaCycleSpeed;
144	}
145
146	#updatePosition() {
147		let acc = this.acceleration;
148		if (this.isNearMouse) {
149			const heading = this.mouseDirection.heading();
150			acc.setHeading(heading);
151			//acc = this.acceleration * 2.5;
152		}
153
154		this.velocity.add(acc);
155		this.position.add(this.velocity);
156	}
157
158	get alpha() {
159		const val = Math.sin(this.alphaCycle);
160		const max = this.isNearMouse ? 1 : this.alphaMax;
161		const a = map(val, -1, 1, 0.1, max);
162		return a;
163	}
164
165	get isNearMouse() {
166		if (this.mouseDistanceSquared > 5000) {
167			return false;
168		} else {
169			return true;
170		}
171	}
172
173	get mouseDistanceSquared() {
174		const a = this.position.x - mouseX;
175		const b = this.position.y - mouseY;
176		return (a * a) + (b * b);
177	}
178
179	get mouseDistance() {
180		return Math.sqrt(this.mouseDistanceSquared);
181	}
182
183	get mouseDirection() {
184		const mousePosition = createVector(mouseX, mouseY);
185		const direction = p5.Vector.sub(mousePosition, this.position);
186		return direction;
187	}
188
189	isOffscreen() {
190		if (
191			this.position.x < 0 ||
192			this.position.x > windowWidth ||
193			this.position.y < 0 ||
194			this.position.y > windowHeight
195		) {
196			return true;
197		} else {
198			return false;
199		}
200	}
201}