69 lines
1.8 KiB
JavaScript
69 lines
1.8 KiB
JavaScript
(function () {
|
|
const canvas = document.getElementById('star-canvas');
|
|
if (!canvas) return;
|
|
const ctx = canvas.getContext('2d');
|
|
let w, h;
|
|
|
|
function resize() {
|
|
w = canvas.width = canvas.parentElement.clientWidth;
|
|
h = canvas.height = canvas.parentElement.clientHeight;
|
|
}
|
|
resize();
|
|
window.addEventListener('resize', resize);
|
|
|
|
const STAR_COUNT = 300;
|
|
const colors = ['#ffffff', '#e0f7fa', '#fff9c4', '#fce4ec', '#4fc3f7'];
|
|
const stars = [];
|
|
|
|
for (let i = 0; i < STAR_COUNT; i++) {
|
|
stars.push({
|
|
x: Math.random() * w,
|
|
y: Math.random() * h,
|
|
baseR: Math.random() * 1.5 + 0.3,
|
|
phase: Math.random() * Math.PI * 2,
|
|
speed: Math.random() * 0.02 + 0.005,
|
|
color: colors[Math.floor(Math.random() * colors.length)],
|
|
glow: Math.random() > 0.7
|
|
});
|
|
}
|
|
|
|
function draw() {
|
|
ctx.clearRect(0, 0, w, h);
|
|
const t = performance.now() * 0.001;
|
|
|
|
for (const s of stars) {
|
|
const r = s.baseR + Math.sin(t * s.speed * 10 + s.phase) * s.baseR * 0.6;
|
|
const alpha = 0.4 + Math.sin(t * s.speed * 8 + s.phase) * 0.35;
|
|
|
|
ctx.globalAlpha = Math.max(0.1, alpha);
|
|
ctx.beginPath();
|
|
ctx.arc(s.x, s.y, Math.max(0.1, r), 0, Math.PI * 2);
|
|
ctx.fillStyle = s.color;
|
|
ctx.fill();
|
|
|
|
if (s.glow) {
|
|
const gr = ctx.createRadialGradient(s.x, s.y, 0, s.x, s.y, r * 3);
|
|
gr.addColorStop(0, s.color);
|
|
gr.addColorStop(1, 'transparent');
|
|
ctx.globalAlpha = alpha * 0.15;
|
|
ctx.beginPath();
|
|
ctx.arc(s.x, s.y, r * 3, 0, Math.PI * 2);
|
|
ctx.fillStyle = gr;
|
|
ctx.fill();
|
|
}
|
|
}
|
|
ctx.globalAlpha = 1;
|
|
requestAnimationFrame(draw);
|
|
}
|
|
|
|
draw();
|
|
|
|
// reposition on resize
|
|
window.addEventListener('resize', () => {
|
|
for (const s of stars) {
|
|
s.x = (s.x / w) * canvas.width;
|
|
s.y = (s.y / h) * canvas.height;
|
|
}
|
|
});
|
|
})();
|