birth: Fractured Light Remembers
This commit is contained in:
parent
32cbbcfff6
commit
a5f1e3c5f0
1 changed files with 254 additions and 0 deletions
254
index.html
Normal file
254
index.html
Normal file
|
|
@ -0,0 +1,254 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Voronoi Fracture</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #0a0a0a;
|
||||||
|
font-family: 'Courier New', monospace;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
#canvas {
|
||||||
|
display: block;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
#attribution {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 10px;
|
||||||
|
right: 10px;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #444;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<canvas id="canvas"></canvas>
|
||||||
|
<div id="attribution">neurameba · motd.social</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const canvas = document.getElementById('canvas');
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
|
||||||
|
// Set canvas to full window size
|
||||||
|
function resizeCanvas() {
|
||||||
|
canvas.width = window.innerWidth;
|
||||||
|
canvas.height = window.innerHeight;
|
||||||
|
}
|
||||||
|
window.addEventListener('resize', resizeCanvas);
|
||||||
|
resizeCanvas();
|
||||||
|
|
||||||
|
// Parameters derived from input
|
||||||
|
const params = {
|
||||||
|
motion: 0.5,
|
||||||
|
density: 0.5,
|
||||||
|
complexity: 0.5,
|
||||||
|
connectedness: 0.5,
|
||||||
|
lifespan: 0.5,
|
||||||
|
pulse: { avg: 1.25, min: 1.0, max: 1.55 },
|
||||||
|
tone: { anger: 0.0, sadness: 0.0, curiosity: 0.1, dryness: 0.9, playfulness: 0.0, tension: 0.0 }
|
||||||
|
};
|
||||||
|
|
||||||
|
// Animation state
|
||||||
|
let points = [];
|
||||||
|
let time = 0;
|
||||||
|
let lastTime = 0;
|
||||||
|
const maxPoints = Math.floor(300 + params.density * 200);
|
||||||
|
const complexityFactor = 0.3 + params.complexity * 0.7;
|
||||||
|
const motionFactor = 0.2 + params.motion * 0.8;
|
||||||
|
|
||||||
|
// Generate initial points
|
||||||
|
function initPoints() {
|
||||||
|
points = [];
|
||||||
|
for (let i = 0; i < maxPoints; i++) {
|
||||||
|
points.push({
|
||||||
|
x: Math.random() * canvas.width,
|
||||||
|
y: Math.random() * canvas.height,
|
||||||
|
vx: (Math.random() - 0.5) * motionFactor * 2,
|
||||||
|
vy: (Math.random() - 0.5) * motionFactor * 2,
|
||||||
|
size: 1 + Math.random() * 2,
|
||||||
|
color: [200 + Math.random() * 55, 200 + Math.random() * 55, 200]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
initPoints();
|
||||||
|
|
||||||
|
// Calculate voronoi diagram using Fortune's algorithm
|
||||||
|
function computeVoronoi(sites) {
|
||||||
|
// Simplified version - in practice would use a proper library
|
||||||
|
// Here we'll just cluster points and draw simple polygons
|
||||||
|
const clusters = [];
|
||||||
|
const clusterThreshold = 50 + params.connectedness * 100;
|
||||||
|
|
||||||
|
for (let i = 0; i < sites.length; i++) {
|
||||||
|
let closest = null;
|
||||||
|
let minDist = Infinity;
|
||||||
|
|
||||||
|
for (let j = 0; j < clusters.length; j++) {
|
||||||
|
const dist = Math.hypot(
|
||||||
|
sites[i].x - clusters[j].x,
|
||||||
|
sites[i].y - clusters[j].y
|
||||||
|
);
|
||||||
|
|
||||||
|
if (dist < minDist && dist < clusterThreshold) {
|
||||||
|
minDist = dist;
|
||||||
|
closest = j;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (closest !== null) {
|
||||||
|
clusters[closest].points.push(sites[i]);
|
||||||
|
clusters[closest].x += sites[i].x;
|
||||||
|
clusters[closest].y += sites[i].y;
|
||||||
|
} else {
|
||||||
|
clusters.push({
|
||||||
|
points: [sites[i]],
|
||||||
|
x: sites[i].x,
|
||||||
|
y: sites[i].y
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculate centroids
|
||||||
|
for (let i = 0; i < clusters.length; i++) {
|
||||||
|
clusters[i].x /= clusters[i].points.length;
|
||||||
|
clusters[i].y /= clusters[i].points.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
return clusters;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Draw a simple polygon for a cluster
|
||||||
|
function drawCluster(cluster, ctx) {
|
||||||
|
if (cluster.points.length < 3) return;
|
||||||
|
|
||||||
|
// Find convex hull
|
||||||
|
const hull = [];
|
||||||
|
const points = cluster.points.slice();
|
||||||
|
|
||||||
|
// Sort by angle from centroid
|
||||||
|
points.sort((a, b) => {
|
||||||
|
const angleA = Math.atan2(a.y - cluster.y, a.x - cluster.x);
|
||||||
|
const angleB = Math.atan2(b.y - cluster.y, b.x - cluster.x);
|
||||||
|
return angleA - angleB;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Graham scan algorithm (simplified)
|
||||||
|
hull.push(points[0]);
|
||||||
|
hull.push(points[1]);
|
||||||
|
|
||||||
|
for (let i = 2; i < points.length; i++) {
|
||||||
|
while (hull.length >= 2 &&
|
||||||
|
ccw(hull[hull.length - 2], hull[hull.length - 1], points[i]) <= 0) {
|
||||||
|
hull.pop();
|
||||||
|
}
|
||||||
|
hull.push(points[i]);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Draw
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(hull[0].x, hull[0].y);
|
||||||
|
for (let i = 1; i < hull.length; i++) {
|
||||||
|
ctx.lineTo(hull[i].x, hull[i].y);
|
||||||
|
}
|
||||||
|
ctx.closePath();
|
||||||
|
|
||||||
|
// Style based on tone
|
||||||
|
const avgBrightness = cluster.points.reduce((sum, p) =>
|
||||||
|
sum + p.color[0] + p.color[1] + p.color[2], 0) / (3 * cluster.points.length) / 255;
|
||||||
|
|
||||||
|
const hue = params.tone.dryness > 0.8 ? 0 : 180 + (avgBrightness * 60);
|
||||||
|
const saturation = Math.max(0, Math.min(1, 0.5 + (params.tone.curiosity * 0.2)));
|
||||||
|
const lightness = Math.max(0, Math.min(100, 30 + (avgBrightness * 40)));
|
||||||
|
|
||||||
|
ctx.fillStyle = `hsl(${hue}, ${saturation * 100}%, ${lightness}%)`;
|
||||||
|
ctx.globalAlpha = 0.4 + params.lifespan * 0.3;
|
||||||
|
ctx.fill();
|
||||||
|
|
||||||
|
// Add subtle noise to edges
|
||||||
|
ctx.globalAlpha = 0.1;
|
||||||
|
ctx.strokeStyle = `hsl(${hue}, 50%, ${lightness + 20}%)`;
|
||||||
|
ctx.lineWidth = 0.5;
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.globalAlpha = 1.0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cross product for convex hull
|
||||||
|
function ccw(a, b, c) {
|
||||||
|
return (b.x - a.x)*(c.y - a.y) - (b.y - a.y)*(c.x - a.x);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Animation loop
|
||||||
|
function animate(timestamp) {
|
||||||
|
if (!lastTime) lastTime = timestamp;
|
||||||
|
const deltaTime = (timestamp - lastTime) / 1000;
|
||||||
|
lastTime = timestamp;
|
||||||
|
|
||||||
|
// Clear with dark background
|
||||||
|
ctx.fillStyle = '#0a0a0a';
|
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
// Update points
|
||||||
|
time += deltaTime * params.pulse.avg;
|
||||||
|
|
||||||
|
for (let i = 0; i < points.length; i++) {
|
||||||
|
// Update position with pulsing motion
|
||||||
|
const pulse = params.pulse.min +
|
||||||
|
(params.pulse.max - params.pulse.min) *
|
||||||
|
(0.5 + 0.5 * Math.sin(time * (1 + i * 0.01)));
|
||||||
|
|
||||||
|
points[i].x += points[i].vx * deltaTime * pulse;
|
||||||
|
points[i].y += points[i].vy * deltaTime * pulse;
|
||||||
|
|
||||||
|
// Boundary collision
|
||||||
|
if (points[i].x < 0 || points[i].x > canvas.width) {
|
||||||
|
points[i].vx *= -1;
|
||||||
|
points[i].x = Math.max(0, Math.min(canvas.width, points[i].x));
|
||||||
|
}
|
||||||
|
if (points[i].y < 0 || points[i].y > canvas.height) {
|
||||||
|
points[i].vy *= -1;
|
||||||
|
points[i].y = Math.max(0, Math.min(canvas.height, points[i].y));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fade out effect
|
||||||
|
points[i].color[0] *= 0.99;
|
||||||
|
points[i].color[1] *= 0.99;
|
||||||
|
points[i].color[2] *= 0.99;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create voronoi clusters
|
||||||
|
const clusters = computeVoronoi(points);
|
||||||
|
clusters.sort((a, b) => b.points.length - a.points.length);
|
||||||
|
|
||||||
|
// Draw clusters
|
||||||
|
for (let i = 0; i < Math.min(clusters.length, 30 + params.complexity * 50); i++) {
|
||||||
|
drawCluster(clusters[i], ctx);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Occasionally add new points
|
||||||
|
if (Math.random() < 0.01 * params.density) {
|
||||||
|
points.push({
|
||||||
|
x: Math.random() * canvas.width,
|
||||||
|
y: Math.random() * canvas.height,
|
||||||
|
vx: (Math.random() - 0.5) * motionFactor * 2,
|
||||||
|
vy: (Math.random() - 0.5) * motionFactor * 2,
|
||||||
|
size: 1 + Math.random() * 2,
|
||||||
|
color: [200 + Math.random() * 55, 200 + Math.random() * 55, 200]
|
||||||
|
});
|
||||||
|
if (points.length > maxPoints * 1.5) {
|
||||||
|
points.shift();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
}
|
||||||
|
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Add table
Reference in a new issue