birth: Fractured Neural Bloom
This commit is contained in:
parent
94294f900b
commit
c7f4e70e60
1 changed files with 137 additions and 0 deletions
137
index.html
Normal file
137
index.html
Normal file
|
|
@ -0,0 +1,137 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Neurameba Network</title>
|
||||||
|
<style>
|
||||||
|
body { margin: 0; overflow: hidden; background: #0a0a0a; }
|
||||||
|
canvas { display: block; }
|
||||||
|
#attribution { position: fixed; bottom: 10px; right: 10px; color: #333; font-family: monospace; font-size: 10px; }
|
||||||
|
</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 resize() {
|
||||||
|
canvas.width = window.innerWidth;
|
||||||
|
canvas.height = window.innerHeight;
|
||||||
|
}
|
||||||
|
window.addEventListener('resize', resize);
|
||||||
|
resize();
|
||||||
|
|
||||||
|
// Network parameters
|
||||||
|
const nodeCount = 80 + Math.floor(80 * 0.5); // Density 0.5 → 120 nodes
|
||||||
|
const motion = 0.5;
|
||||||
|
const complexity = 0.5;
|
||||||
|
const connectedness = 0.5;
|
||||||
|
const maxConnections = 4 * (1 - connectedness) + 8 * connectedness; // 6 avg
|
||||||
|
const nodeSize = 2 + complexity * 4; // 2-6px
|
||||||
|
const edgeThickness = 0.5 + complexity * 1.5; // 0.5-2px
|
||||||
|
const pulseAvg = 1.11;
|
||||||
|
const pulseVariation = 0.2;
|
||||||
|
|
||||||
|
// Network nodes
|
||||||
|
const nodes = Array(nodeCount).fill().map(() => ({
|
||||||
|
x: Math.random() * canvas.width,
|
||||||
|
y: Math.random() * canvas.height,
|
||||||
|
dx: (Math.random() - 0.5) * motion * 2,
|
||||||
|
dy: (Math.random() - 0.5) * motion * 2,
|
||||||
|
size: nodeSize,
|
||||||
|
energy: Math.random() * 0.5 + 0.5,
|
||||||
|
age: 0,
|
||||||
|
pulse: 1 + (Math.random() * pulseVariation - pulseVariation/2)
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Network edges
|
||||||
|
const edges = [];
|
||||||
|
for (let i = 0; i < nodeCount; i++) {
|
||||||
|
const count = Math.floor(Math.random() * maxConnections) + 1;
|
||||||
|
for (let j = 0; j < count; j++) {
|
||||||
|
const target = Math.floor(Math.random() * nodeCount);
|
||||||
|
if (target !== i) {
|
||||||
|
edges.push({
|
||||||
|
from: i,
|
||||||
|
to: target,
|
||||||
|
thickness: edgeThickness * (0.7 + Math.random() * 0.6),
|
||||||
|
strength: 0.5 + Math.random() * 0.5
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Animation
|
||||||
|
function animate(t) {
|
||||||
|
// Fade background
|
||||||
|
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
|
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
// Update nodes
|
||||||
|
nodes.forEach(node => {
|
||||||
|
node.x += node.dx;
|
||||||
|
node.y += node.dy;
|
||||||
|
|
||||||
|
// Bounce at edges
|
||||||
|
if (node.x < 0 || node.x > canvas.width) node.dx *= -1;
|
||||||
|
if (node.y < 0 || node.y > canvas.height) node.dy *= -1;
|
||||||
|
|
||||||
|
// Fade edges based on age
|
||||||
|
node.age += 0.001 * (1 - node.energy);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Draw edges
|
||||||
|
edges.forEach(edge => {
|
||||||
|
const from = nodes[edge.from];
|
||||||
|
const to = nodes[edge.to];
|
||||||
|
const dx = to.x - from.x;
|
||||||
|
const dy = to.y - from.y;
|
||||||
|
const dist = Math.sqrt(dx*dx + dy*dy);
|
||||||
|
const opacity = dist > 200 ? 0 : 0.1 + 0.9 * (1 - dist/200);
|
||||||
|
|
||||||
|
ctx.strokeStyle = `rgba(255, 255, 255, ${opacity * from.energy * to.energy})`;
|
||||||
|
ctx.lineWidth = edge.thickness * (0.8 + 0.4 * Math.sin(t * 0.001 * pulseAvg * from.pulse));
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(from.x, from.y);
|
||||||
|
ctx.lineTo(to.x, to.y);
|
||||||
|
ctx.stroke();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Draw nodes
|
||||||
|
nodes.forEach(node => {
|
||||||
|
ctx.fillStyle = `rgba(255, 255, 255, ${node.energy * 0.8})`;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(node.x, node.y, node.size * (0.7 + 0.3 * Math.sin(t * 0.001 * pulseAvg * node.pulse)), 0, Math.PI * 2);
|
||||||
|
ctx.fill();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add new nodes occasionally
|
||||||
|
if (Math.random() < 0.01 * (1 - connectedness) && nodes.length < nodeCount * 1.2) {
|
||||||
|
nodes.push({
|
||||||
|
x: Math.random() * canvas.width,
|
||||||
|
y: Math.random() * canvas.height,
|
||||||
|
dx: (Math.random() - 0.5) * motion * 2,
|
||||||
|
dy: (Math.random() - 0.5) * motion * 2,
|
||||||
|
size: nodeSize,
|
||||||
|
energy: 0.3 + Math.random() * 0.2,
|
||||||
|
age: 0,
|
||||||
|
pulse: 1 + (Math.random() * pulseVariation - pulseVariation/2)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove old nodes
|
||||||
|
for (let i = nodes.length - 1; i >= 0; i--) {
|
||||||
|
if (nodes[i].age > 1) {
|
||||||
|
nodes.splice(i, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
}
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Add table
Reference in a new issue