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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
|
// Optimized Saturn Effect for low-end hardware
// Uses TypedArrays for memory efficiency and reduced particle density
export class SaturnEffect {
private canvas: HTMLCanvasElement;
private ctx: CanvasRenderingContext2D;
private width: number = 0;
private height: number = 0;
// Data-oriented design for performance
// xyz: Float32Array where [i*3, i*3+1, i*3+2] corresponds to x, y, z
private xyz: Float32Array | null = null;
// types: Uint8Array where 0 = planet, 1 = ring
private types: Uint8Array | null = null;
private count: number = 0;
private animationId: number = 0;
private angle: number = 0;
private scaleFactor: number = 1;
constructor(canvas: HTMLCanvasElement) {
this.canvas = canvas;
this.ctx = canvas.getContext('2d', {
alpha: true,
desynchronized: false // default is usually fine, 'desynchronized' can help latency but might flicker
})!;
// Initial resize will set up everything
this.resize(window.innerWidth, window.innerHeight);
this.initParticles();
this.animate = this.animate.bind(this);
this.animate();
}
resize(width: number, height: number) {
const dpr = window.devicePixelRatio || 1;
this.width = width;
this.height = height;
this.canvas.width = width * dpr;
this.canvas.height = height * dpr;
this.canvas.style.width = `${width}px`;
this.canvas.style.height = `${height}px`;
this.ctx.scale(dpr, dpr);
// Dynamic scaling based on screen size
const minDim = Math.min(width, height);
this.scaleFactor = minDim * 0.45;
}
initParticles() {
// Significantly reduced particle count for CPU optimization
// Planet: 1800 -> 1000
// Rings: 5000 -> 2500
// Total approx 3500 vs 6800 previously (approx 50% reduction)
const planetCount = 1000;
const ringCount = 2500;
this.count = planetCount + ringCount;
// Use TypedArrays for better memory locality
this.xyz = new Float32Array(this.count * 3);
this.types = new Uint8Array(this.count);
let idx = 0;
// 1. Planet
for (let i = 0; i < planetCount; i++) {
const theta = Math.random() * Math.PI * 2;
const phi = Math.acos((Math.random() * 2) - 1);
const r = 1.0;
// x, y, z
this.xyz[idx * 3] = r * Math.sin(phi) * Math.cos(theta);
this.xyz[idx * 3 + 1] = r * Math.sin(phi) * Math.sin(theta);
this.xyz[idx * 3 + 2] = r * Math.cos(phi);
this.types[idx] = 0; // 0 for planet
idx++;
}
// 2. Rings
const ringInner = 1.4;
const ringOuter = 2.3;
for (let i = 0; i < ringCount; i++) {
const angle = Math.random() * Math.PI * 2;
const dist = Math.sqrt(Math.random() * (ringOuter*ringOuter - ringInner*ringInner) + ringInner*ringInner);
// x, y, z
this.xyz[idx * 3] = dist * Math.cos(angle);
this.xyz[idx * 3 + 1] = (Math.random() - 0.5) * 0.05;
this.xyz[idx * 3 + 2] = dist * Math.sin(angle);
this.types[idx] = 1; // 1 for ring
idx++;
}
}
animate() {
this.ctx.clearRect(0, 0, this.width, this.height);
// Normal blending
this.ctx.globalCompositeOperation = 'source-over';
// Slower rotation (from 0.0015 to 0.0005)
this.angle += 0.0005;
const cx = this.width * 0.6;
const cy = this.height * 0.5;
// Pre-calculate rotation matrices
const rotationY = this.angle;
const rotationX = 0.4;
const rotationZ = 0.15;
const sinY = Math.sin(rotationY);
const cosY = Math.cos(rotationY);
const sinX = Math.sin(rotationX);
const cosX = Math.cos(rotationX);
const sinZ = Math.sin(rotationZ);
const cosZ = Math.cos(rotationZ);
const fov = 1500;
const scaleFactor = this.scaleFactor;
if (!this.xyz || !this.types) return;
for (let i = 0; i < this.count; i++) {
const x = this.xyz[i * 3];
const y = this.xyz[i * 3 + 1];
const z = this.xyz[i * 3 + 2];
// Apply Scale
const px = x * scaleFactor;
const py = y * scaleFactor;
const pz = z * scaleFactor;
// 1. Rotate Y
const x1 = px * cosY - pz * sinY;
const z1 = pz * cosY + px * sinY;
// y1 = py
// 2. Rotate X
const y2 = py * cosX - z1 * sinX;
const z2 = z1 * cosX + py * sinX;
// x2 = x1
// 3. Rotate Z
const x3 = x1 * cosZ - y2 * sinZ;
const y3 = y2 * cosZ + x1 * sinZ;
const z3 = z2;
const scale = fov / (fov + z3);
if (z3 > -fov) {
const x2d = cx + x3 * scale;
const y2d = cy + y3 * scale;
// Size calculation - slightly larger dots to compensate for lower count
// Previously Planet 2.0 -> 2.4, Ring 1.3 -> 1.5
const type = this.types[i];
const sizeBase = type === 0 ? 2.4 : 1.5;
const size = sizeBase * scale;
// Opacity
let alpha = (scale * scale * scale);
if (alpha > 1) alpha = 1;
if (alpha < 0.15) continue; // Skip very faint particles for performance
// Optimization: Planet color vs Ring color
if (type === 0) {
// Planet: Warm White
this.ctx.fillStyle = `rgba(255, 240, 220, ${alpha})`;
} else {
// Ring: Cool White
this.ctx.fillStyle = `rgba(220, 240, 255, ${alpha})`;
}
// Render as squares (fillRect) instead of circles (arc)
// This is significantly faster for software rendering and reduces GPU usage.
this.ctx.fillRect(x2d, y2d, size, size);
}
}
this.animationId = requestAnimationFrame(this.animate);
}
destroy() {
cancelAnimationFrame(this.animationId);
}
}
|