birth: Voronoi Pulse Fields
This commit is contained in:
parent
53b4111395
commit
7fdc8f5f4a
1 changed files with 181 additions and 0 deletions
181
index.html
Normal file
181
index.html
Normal file
|
|
@ -0,0 +1,181 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Voronoi Organism</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background: #0a0a0a;
|
||||
font-family: 'Courier New', monospace;
|
||||
color: #ccc;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100vh;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
#attribution {
|
||||
font-size: 10px;
|
||||
padding: 8px;
|
||||
text-align: right;
|
||||
opacity: 0.5;
|
||||
}
|
||||
</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 derived from the abstract specs
|
||||
const params = {
|
||||
motion: 0.551,
|
||||
density: 0.475,
|
||||
complexity: 0.485,
|
||||
connectedness: 0.595,
|
||||
lifespan: 0.547,
|
||||
survivingNodes: 60,
|
||||
branchCount: 53,
|
||||
loops: 295,
|
||||
maxDepth: 25,
|
||||
thicknessRatio: 1.50,
|
||||
fractalDimension: 1.292,
|
||||
finalEnergy: 307.9,
|
||||
pulse: { avg: 0.46, min: 0.30, max: 1.70 },
|
||||
tone: { anger: 0.00, sadness: 0.00, curiosity: 0.70, dryness: 0.90, playfulness: 0.10, tension: 0.00 }
|
||||
};
|
||||
|
||||
// Time and state
|
||||
let time = 0;
|
||||
let nodes = [];
|
||||
const N = params.survivingNodes;
|
||||
|
||||
// Color palette based on tone
|
||||
const hue = 160 + Math.sin(time * 0.001) * 30; // Teal range
|
||||
const saturation = params.tone.curiosity * 70 + 30;
|
||||
const brightness = 70 + Math.sin(time * 0.002) * 20;
|
||||
const color = `hsl(${hue}, ${saturation}%, ${brightness}%)`;
|
||||
|
||||
// Voronoi setup
|
||||
class VoronoiCell {
|
||||
constructor(x, y, size) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.size = size;
|
||||
this.vx = (Math.random() - 0.5) * params.motion * 2;
|
||||
this.vy = (Math.random() - 0.5) * params.motion * 2;
|
||||
this.lifespan = params.lifespan * 1000 + Math.random() * 1000;
|
||||
this.age = 0;
|
||||
this.connected = new Set();
|
||||
}
|
||||
|
||||
update() {
|
||||
// Apply slight movement
|
||||
this.x += this.vx * (0.1 + params.motion * 0.3);
|
||||
this.y += this.vy * (0.1 + params.motion * 0.3);
|
||||
|
||||
// Boundary bounce
|
||||
if (this.x < 0 || this.x > canvas.width) this.vx *= -1;
|
||||
if (this.y < 0 || this.y > canvas.height) this.vy *= -1;
|
||||
|
||||
this.age++;
|
||||
}
|
||||
|
||||
draw(ctx) {
|
||||
// Draw cell with organic edges
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, this.size * (0.8 + Math.sin(time * 0.01) * 0.2), 0, Math.PI * 2);
|
||||
ctx.fillStyle = color;
|
||||
ctx.globalAlpha = params.tone.dryness > 0.5 ? 0.6 : 0.9;
|
||||
ctx.fill();
|
||||
|
||||
// Highlight borders
|
||||
ctx.strokeStyle = `hsl(${hue}, ${saturation}%, ${brightness + 30}%)`;
|
||||
ctx.lineWidth = params.thicknessRatio * (1 + Math.sin(time * 0.005) * 0.3);
|
||||
ctx.globalAlpha = params.tone.tension > 0 ? 1 : 0.7;
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
// Create initial nodes
|
||||
for (let i = 0; i < N; i++) {
|
||||
nodes.push(new VoronoiCell(
|
||||
Math.random() * canvas.width,
|
||||
Math.random() * canvas.height,
|
||||
10 + Math.random() * 15
|
||||
));
|
||||
}
|
||||
|
||||
// Connect nodes based on proximity
|
||||
function createConnections() {
|
||||
nodes.forEach(n => n.connected.clear());
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
for (let j = i + 1; j < nodes.length; j++) {
|
||||
const dx = nodes[i].x - nodes[j].x;
|
||||
const dy = nodes[i].y - nodes[j].y;
|
||||
const dist = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
if (dist < 150 * params.connectedness) {
|
||||
nodes[i].connected.add(j);
|
||||
nodes[j].connected.add(i);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Draw connections
|
||||
function drawConnections() {
|
||||
ctx.globalAlpha = params.tone.dryness > 0.5 ? 0.3 : 0.5;
|
||||
ctx.strokeStyle = color;
|
||||
ctx.lineWidth = params.thicknessRatio * (0.5 + Math.sin(time * 0.003) * 0.5);
|
||||
|
||||
nodes.forEach(n => {
|
||||
n.connected.forEach(j => {
|
||||
if (n.index < j) { // Avoid duplicate connections
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(n.x, n.y);
|
||||
ctx.lineTo(nodes[j].x, nodes[j].y);
|
||||
ctx.stroke();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function animate() {
|
||||
// Clear with slight fade
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Update and draw all cells
|
||||
nodes.forEach(node => node.update());
|
||||
createConnections();
|
||||
drawConnections();
|
||||
nodes.forEach(node => node.draw(ctx));
|
||||
|
||||
// Dynamic pulse effect
|
||||
const pulseFactor = params.pulse.avg + Math.sin(time * 0.002) * 0.2;
|
||||
document.body.style.filter = `brightness(${1 + pulseFactor * 0.1})`;
|
||||
|
||||
time++;
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
animate();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue