birth: Fracturing Voronoi Oblivion
This commit is contained in:
parent
7179f170f1
commit
49b04381e9
1 changed files with 203 additions and 0 deletions
203
index.html
Normal file
203
index.html
Normal file
|
|
@ -0,0 +1,203 @@
|
||||||
|
<!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;
|
||||||
|
}
|
||||||
|
canvas {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
#attribution {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 10px;
|
||||||
|
right: 10px;
|
||||||
|
color: #333;
|
||||||
|
font-size: 10px;
|
||||||
|
opacity: 0.5;
|
||||||
|
pointer-events: 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');
|
||||||
|
|
||||||
|
function resizeCanvas() {
|
||||||
|
canvas.width = window.innerWidth;
|
||||||
|
canvas.height = window.innerHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('resize', resizeCanvas);
|
||||||
|
resizeCanvas();
|
||||||
|
|
||||||
|
// Parameters
|
||||||
|
const params = {
|
||||||
|
motion: 0.5,
|
||||||
|
density: 0.5,
|
||||||
|
complexity: 0.5,
|
||||||
|
connectedness: 0.5,
|
||||||
|
lifespan: 0.5,
|
||||||
|
pulse: 1.08,
|
||||||
|
tone: { dryness: 0.9 },
|
||||||
|
time: 0
|
||||||
|
};
|
||||||
|
|
||||||
|
// Voronoi state
|
||||||
|
const sites = [];
|
||||||
|
const edges = [];
|
||||||
|
const cells = [];
|
||||||
|
const maxSites = Math.floor(200 * (1 + params.density));
|
||||||
|
const maxComplexity = 1 + params.complexity * 3;
|
||||||
|
const maxConnectedness = 0.1 + params.connectedness * 0.4;
|
||||||
|
|
||||||
|
// Initialize
|
||||||
|
function init() {
|
||||||
|
// Clear arrays
|
||||||
|
sites.length = 0;
|
||||||
|
edges.length = 0;
|
||||||
|
cells.length = 0;
|
||||||
|
|
||||||
|
// Create sites
|
||||||
|
for (let i = 0; i < maxSites; i++) {
|
||||||
|
sites.push({
|
||||||
|
x: Math.random() * canvas.width,
|
||||||
|
y: Math.random() * canvas.height,
|
||||||
|
vx: (Math.random() - 0.5) * params.motion * 3,
|
||||||
|
vy: (Math.random() - 0.5) * params.motion * 3,
|
||||||
|
lifespan: params.lifespan * (0.5 + Math.random() * 0.5),
|
||||||
|
age: 0
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update Voronoi
|
||||||
|
function updateVoronoi() {
|
||||||
|
// Move sites
|
||||||
|
sites.forEach(site => {
|
||||||
|
site.x += site.vx;
|
||||||
|
site.y += site.vy;
|
||||||
|
site.age += 0.01;
|
||||||
|
|
||||||
|
// Wrap around
|
||||||
|
if (site.x < 0) site.x = canvas.width;
|
||||||
|
if (site.x > canvas.width) site.x = 0;
|
||||||
|
if (site.y < 0) site.y = canvas.height;
|
||||||
|
if (site.y > canvas.height) site.y = 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Simple edge detection (just for visualization)
|
||||||
|
edges.length = 0;
|
||||||
|
cells.length = 0;
|
||||||
|
|
||||||
|
// Create Voronoi-like structure
|
||||||
|
for (let i = 0; i < sites.length; i++) {
|
||||||
|
const cell = {
|
||||||
|
site: sites[i],
|
||||||
|
neighbors: [],
|
||||||
|
edges: []
|
||||||
|
};
|
||||||
|
|
||||||
|
// Simple neighbor detection
|
||||||
|
for (let j = i + 1; j < sites.length; j++) {
|
||||||
|
const dist = Math.sqrt(
|
||||||
|
Math.pow(sites[i].x - sites[j].x, 2) +
|
||||||
|
Math.pow(sites[i].y - sites[j].y, 2)
|
||||||
|
);
|
||||||
|
|
||||||
|
if (dist < 100 * (1 - params.connectedness)) {
|
||||||
|
cell.neighbors.push(j);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
cells.push(cell);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create edges between neighbors
|
||||||
|
cells.forEach(cell => {
|
||||||
|
cell.neighbors.forEach(neighborIdx => {
|
||||||
|
const neighbor = sites[neighborIdx];
|
||||||
|
|
||||||
|
// Create edge if it doesn't exist
|
||||||
|
const edgeExists = edges.some(edge =>
|
||||||
|
(edge[0] === cell.site && edge[1] === neighbor) ||
|
||||||
|
(edge[0] === neighbor && edge[1] === cell.site)
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!edgeExists) {
|
||||||
|
edges.push([cell.site, neighbor]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Draw
|
||||||
|
function draw() {
|
||||||
|
// Clear with fading effect
|
||||||
|
ctx.fillStyle = `rgba(0, 0, 0, ${0.1 + params.tone.dryness * 0.2})`;
|
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
// Draw sites
|
||||||
|
ctx.fillStyle = '#f0f0f0';
|
||||||
|
sites.forEach(site => {
|
||||||
|
const size = 2 + Math.sin(params.time * 0.1) * 1;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(site.x, site.y, size, 0, Math.PI * 2);
|
||||||
|
ctx.fill();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Draw edges with pulsation
|
||||||
|
ctx.strokeStyle = `rgba(200, 200, 200, ${0.3 + Math.sin(params.time * params.pulse) * 0.2})`;
|
||||||
|
ctx.lineWidth = 0.5 + Math.sin(params.time * 0.05) * 0.3;
|
||||||
|
edges.forEach(edge => {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(edge[0].x, edge[0].y);
|
||||||
|
ctx.lineTo(edge[1].x, edge[1].y);
|
||||||
|
ctx.stroke();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Draw cells with complexity
|
||||||
|
ctx.strokeStyle = `rgba(120, 120, 120, ${0.1 + 0.3 * params.complexity})`;
|
||||||
|
ctx.lineWidth = 0.3;
|
||||||
|
cells.forEach(cell => {
|
||||||
|
// Simple convex hull approximation
|
||||||
|
const points = [cell.site];
|
||||||
|
cell.neighbors.forEach(neighborIdx => {
|
||||||
|
points.push(sites[neighborIdx]);
|
||||||
|
});
|
||||||
|
|
||||||
|
if (points.length > 2) {
|
||||||
|
// Draw simple polygon
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(points[0].x, points[0].y);
|
||||||
|
for (let i = 1; i < points.length; i++) {
|
||||||
|
ctx.lineTo(points[i].x, points[i].y);
|
||||||
|
}
|
||||||
|
ctx.closePath();
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Animation loop
|
||||||
|
function animate() {
|
||||||
|
params.time += 0.01;
|
||||||
|
updateVoronoi();
|
||||||
|
draw();
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
}
|
||||||
|
|
||||||
|
init();
|
||||||
|
animate();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Add table
Reference in a new issue