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