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