39752c845a
new file: js/art.js new file: js/hdr.js new file: js/hearts.js new file: js/helpers.js new file: js/particles.js new file: js/qlpycon.js new file: js/qlpyconbanner.js new file: js/snek.js new file: js/sparks.js new file: js/stars.js modified: slamp.html modified: style.css
86 lines
2.6 KiB
JavaScript
86 lines
2.6 KiB
JavaScript
/* stars.js — static starry background for 6bit.ch
|
|
Requires a <canvas id="stars"> in your HTML:
|
|
position: fixed; inset: 0; width: 100%; height: 100%;
|
|
z-index: -2; pointer-events: none; */
|
|
|
|
(function () {
|
|
const canvas = document.getElementById('stars');
|
|
if (!canvas) return;
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
/* ── CONFIG ───────────────────────────────────────────────────── */
|
|
const CONFIG = {
|
|
count: 280,
|
|
colorVariation: 1.0, // 0 = pure white, 1 = full spectral color
|
|
bgColor: '#101010',
|
|
};
|
|
|
|
/* ── PALETTE (stellar spectral classes) ──────────────────────── */
|
|
const PALETTE = [
|
|
[160, 190, 255], // deep blue (O/B)
|
|
[200, 220, 255], // blue-white (A)
|
|
[255, 244, 180], // yellow (F/G)
|
|
[255, 210, 140], // orange (K)
|
|
[255, 160, 120], // red-orange (M)
|
|
[140, 220, 255], // cyan-blue
|
|
[255, 230, 255], // violet-white
|
|
];
|
|
|
|
function randColor() {
|
|
const base = PALETTE[Math.floor(Math.random() * PALETTE.length)];
|
|
const m = CONFIG.colorVariation;
|
|
return base.map(c => Math.round(255 * (1 - m) + c * m));
|
|
}
|
|
|
|
let W, H;
|
|
|
|
function resize() {
|
|
W = canvas.width = window.innerWidth;
|
|
H = canvas.height = window.innerHeight;
|
|
draw();
|
|
}
|
|
|
|
function draw() {
|
|
if (CONFIG.bgColor) {
|
|
ctx.fillStyle = CONFIG.bgColor;
|
|
ctx.fillRect(0, 0, W, H);
|
|
} else {
|
|
ctx.clearRect(0, 0, W, H);
|
|
}
|
|
|
|
for (let i = 0; i < CONFIG.count; i++) {
|
|
const r = Math.random();
|
|
const size = r < 0.65
|
|
? 0.45 + Math.random() * 0.30
|
|
: r < 0.90
|
|
? 0.85 + Math.random() * 0.30
|
|
: 1.40 + Math.random() * 0.40;
|
|
|
|
const x = Math.random() * W;
|
|
const y = Math.random() * H;
|
|
const alpha = 0.35 + Math.random() * 0.65;
|
|
const [cr, cg, cb] = randColor();
|
|
|
|
/* soft halo on brighter stars */
|
|
if (size > 1.0) {
|
|
const halo = ctx.createRadialGradient(x, y, 0, x, y, size * 2.5);
|
|
halo.addColorStop(0, `rgba(${cr},${cg},${cb},${(alpha * 0.45).toFixed(3)})`);
|
|
halo.addColorStop(1, `rgba(${cr},${cg},${cb},0)`);
|
|
ctx.beginPath();
|
|
ctx.arc(x, y, size * 2.5, 0, Math.PI * 2);
|
|
ctx.fillStyle = halo;
|
|
ctx.fill();
|
|
}
|
|
|
|
/* star core */
|
|
ctx.beginPath();
|
|
ctx.arc(x, y, size, 0, Math.PI * 2);
|
|
ctx.fillStyle = `rgba(${cr},${cg},${cb},${alpha.toFixed(3)})`;
|
|
ctx.fill();
|
|
}
|
|
}
|
|
|
|
resize();
|
|
window.addEventListener('resize', resize);
|
|
})();
|