181 lines
No EOL
6 KiB
HTML
181 lines
No EOL
6 KiB
HTML
<!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> |