birth: Lattice Ghosts in Monochrome
This commit is contained in:
parent
7924b6237c
commit
9aacf17742
1 changed files with 162 additions and 0 deletions
162
index.html
Normal file
162
index.html
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
<!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>
|
||||
Loading…
Add table
Reference in a new issue