162 lines
No EOL
5.8 KiB
HTML
162 lines
No EOL
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Voronoi Lattice</title>
|
|
<style>
|
|
body { margin: 0; overflow: hidden; background: #0a0a0a; }
|
|
canvas { display: block; }
|
|
.footer { position: absolute; bottom: 10px; right: 10px; color: #555; font-family: monospace; font-size: 10px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="c"></canvas>
|
|
<div class="footer">neurameba · motd.social</div>
|
|
<script>
|
|
const canvas = document.getElementById('c');
|
|
const c = canvas.getContext('2d');
|
|
|
|
function resize() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
window.addEventListener('resize', resize);
|
|
resize();
|
|
|
|
// Voronoi parameters
|
|
let sites = [];
|
|
const siteCount = Math.floor(100 + 500 * 0.5); // density=0.5 → 300 sites
|
|
const siteSize = 1.5;
|
|
const relaxCount = 2;
|
|
const colorScheme = [200, 200, 200]; // dryness: monochrome
|
|
|
|
// Motion: slight site jitter
|
|
const motion = 0.5;
|
|
const jitterMag = Math.max(0.5, motion * 0.8);
|
|
|
|
// Lifespan: permanent trails
|
|
const trails = [];
|
|
|
|
function initSites() {
|
|
sites = [];
|
|
for (let i = 0; i < siteCount; i++) {
|
|
sites.push({
|
|
x: Math.random() * canvas.width,
|
|
y: Math.random() * canvas.height
|
|
});
|
|
}
|
|
// Relax sites to approximate centroidal Voronoi
|
|
for (let r = 0; r < relaxCount; r++) {
|
|
const newSites = [];
|
|
for (let i = 0; i < sites.length; i++) {
|
|
let sumX = 0, sumY = 0, count = 0;
|
|
for (let j = 0; j < sites.length; j++) {
|
|
if (i === j) continue;
|
|
const dx = sites[j].x - sites[i].x;
|
|
const dy = sites[j].y - sites[i].y;
|
|
const dist = Math.sqrt(dx * dx + dy * dy);
|
|
if (dist < 30) {
|
|
sumX += sites[j].x;
|
|
sumY += sites[j].y;
|
|
count++;
|
|
}
|
|
}
|
|
newSites.push({
|
|
x: count ? sumX / count : sites[i].x + (Math.random() - 0.5) * 40,
|
|
y: count ? sumY / count : sites[i].y + (Math.random() - 0.5) * 40
|
|
});
|
|
}
|
|
sites = newSites;
|
|
}
|
|
}
|
|
|
|
initSites();
|
|
|
|
function updateSites() {
|
|
for (let i = 0; i < sites.length; i++) {
|
|
sites[i].x += (Math.random() - 0.5) * jitterMag * 2;
|
|
sites[i].y += (Math.random() - 0.5) * jitterMag * 2;
|
|
|
|
// Wrap around edges
|
|
sites[i].x = (sites[i].x + canvas.width) % canvas.width;
|
|
sites[i].y = (sites[i].y + canvas.height) % canvas.height;
|
|
}
|
|
|
|
// Occasionally add new sites to maintain density
|
|
if (Math.random() < 0.002 && sites.length < 1000) {
|
|
sites.push({
|
|
x: Math.random() * canvas.width,
|
|
y: Math.random() * canvas.height
|
|
});
|
|
}
|
|
}
|
|
|
|
function drawVoronoi() {
|
|
// Clear with dark background
|
|
c.fillStyle = '#0a0a0a';
|
|
c.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
// Draw edges
|
|
c.strokeStyle = `rgb(${colorScheme[0]}, ${colorScheme[1]}, ${colorScheme[2]})`;
|
|
c.lineWidth = 0.7;
|
|
|
|
// Simplified Voronoi: use Fortune's algorithm via brute-force for small counts
|
|
for (let i = 0; i < sites.length; i++) {
|
|
for (let j = i + 1; j < sites.length; j++) {
|
|
const dx = sites[j].x - sites[i].x;
|
|
const dy = sites[j].y - sites[i].y;
|
|
const dist = Math.sqrt(dx * dx + dy * dy);
|
|
if (dist > 50) continue; // Skip far neighbors
|
|
|
|
const midX = (sites[i].x + sites[j].x) / 2;
|
|
const midY = (sites[i].y + sites[j].y) / 2;
|
|
const perpX = -dy / dist * 10;
|
|
const perpY = dx / dist * 10;
|
|
|
|
c.beginPath();
|
|
c.moveTo(midX - perpX, midY - perpY);
|
|
c.lineTo(midX + perpX, midY + perpY);
|
|
c.stroke();
|
|
}
|
|
}
|
|
|
|
// Draw sites
|
|
c.fillStyle = `rgb(${colorScheme[0]}, ${colorScheme[1]}, ${colorScheme[2]})`;
|
|
for (let i = 0; i < sites.length; i++) {
|
|
c.beginPath();
|
|
c.arc(sites[i].x, sites[i].y, siteSize, 0, Math.PI * 2);
|
|
c.fill();
|
|
}
|
|
}
|
|
|
|
function animate(time) {
|
|
updateSites();
|
|
drawVoronoi();
|
|
trails.push({sites: [...sites]});
|
|
if (trails.length > 60) trails.shift(); // Keep last 60 frames
|
|
|
|
// Draw fading trails
|
|
for (let t = 0; t < trails.length; t++) {
|
|
const alpha = 0.5 * (1 - t / trails.length);
|
|
c.strokeStyle = `rgba(${colorScheme[0]}, ${colorScheme[1]}, ${colorScheme[2]}, ${alpha})`;
|
|
c.lineWidth = 0.3;
|
|
|
|
if (t > 0) {
|
|
for (let i = 0; i < trails[t].sites.length; i++) {
|
|
const next = trails[t].sites[i];
|
|
const prev = trails[t-1].sites[i];
|
|
c.beginPath();
|
|
c.moveTo(prev.x, prev.y);
|
|
c.lineTo(next.x, next.y);
|
|
c.stroke();
|
|
}
|
|
}
|
|
}
|
|
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
animate(0);
|
|
</script>
|
|
</body>
|
|
</html> |