birth: Pulsing Neural Constellations
This commit is contained in:
parent
7a080114bc
commit
3015aa62f6
1 changed files with 293 additions and 0 deletions
293
index.html
Normal file
293
index.html
Normal file
|
|
@ -0,0 +1,293 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>neurameba · motd.social</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background: #0a0a0a;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
font-family: 'Courier New', monospace;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
touch-action: none;
|
||||
}
|
||||
#attribution {
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 0.6rem;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas"></canvas>
|
||||
<div id="attribution">neurameba · motd.social</div>
|
||||
<script>
|
||||
(function() {
|
||||
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 organism
|
||||
const MOTION = 0.559;
|
||||
const DENSITY = 0.451;
|
||||
const COMPLEXITY = 0.556;
|
||||
const CONNECTEDNESS = 0.483;
|
||||
const LIFESPAN = 0.513;
|
||||
const PULSE_AVG = 0.42;
|
||||
const PULSE_MIN = 0.30;
|
||||
const PULSE_MAX = 2.00;
|
||||
const DRYNESS = 0.90;
|
||||
|
||||
// Network parameters
|
||||
const NODE_COUNT = 144;
|
||||
const BRANCH_COUNT = 135;
|
||||
const LOOP_COUNT = 1342;
|
||||
const MAX_DEPTH = 23;
|
||||
const THICKNESS_RATIO = 1.25;
|
||||
const FRACTAL_DIM = 1.143;
|
||||
const FINAL_ENERGY = 14015.1;
|
||||
|
||||
// State
|
||||
const nodes = [];
|
||||
const edges = [];
|
||||
const nodeRadius = Math.max(2, 2 + 6 * DENSITY * COMPLEXITY);
|
||||
const edgeThickness = 0.5 + 2 * THICKNESS_RATIO * DRYNESS;
|
||||
const pulseSpeed = 0.002 + 0.02 * MOTION;
|
||||
const pulseVariation = 0.1 + 0.9 * (PULSE_AVG - PULSE_MIN) / (PULSE_MAX - PULSE_MIN);
|
||||
|
||||
// Initialize network
|
||||
function initNetwork() {
|
||||
// Create nodes with fractal distribution
|
||||
for (let i = 0; i < NODE_COUNT; i++) {
|
||||
const angle = Math.random() * Math.PI * 2;
|
||||
const radius = Math.sqrt(Math.random()) * Math.min(canvas.width, canvas.height) * 0.4;
|
||||
nodes.push({
|
||||
id: i,
|
||||
x: canvas.width/2 + Math.cos(angle) * radius,
|
||||
y: canvas.height/2 + Math.sin(angle) * radius,
|
||||
baseX: canvas.width/2 + Math.cos(angle) * radius,
|
||||
baseY: canvas.height/2 + Math.sin(angle) * radius,
|
||||
size: nodeRadius * (0.8 + 0.2 * Math.random()),
|
||||
energy: 100 + Math.random() * 100,
|
||||
connections: [],
|
||||
targetConnections: Math.floor(1 + BRANCH_COUNT * CONNECTEDNESS / NODE_COUNT),
|
||||
pulse: 0,
|
||||
pulseDirection: Math.random() > 0.5 ? 1 : -1,
|
||||
depth: 0
|
||||
});
|
||||
}
|
||||
|
||||
// Create network structure with loops
|
||||
for (let i = 0; i < LOOP_COUNT; i++) {
|
||||
const from = Math.floor(Math.random() * NODE_COUNT);
|
||||
const to = Math.floor(Math.random() * NODE_COUNT);
|
||||
if (from !== to && !nodes[from].connections.includes(to) && nodes[from].connections.length < nodes[from].targetConnections) {
|
||||
nodes[from].connections.push(to);
|
||||
edges.push({
|
||||
from: from,
|
||||
to: to,
|
||||
distance: 0,
|
||||
maxDistance: Math.sqrt(
|
||||
Math.pow(nodes[to].x - nodes[from].x, 2) +
|
||||
Math.pow(nodes[to].y - nodes[from].y, 2)
|
||||
),
|
||||
energy: 10 + Math.random() * 20,
|
||||
pulse: 0
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Improve network connectivity
|
||||
for (let i = 0; i < NODE_COUNT; i++) {
|
||||
if (nodes[i].connections.length < nodes[i].targetConnections) {
|
||||
const unconnected = nodes.filter(n => !nodes[i].connections.includes(n.id) && n.id !== i);
|
||||
if (unconnected.length > 0) {
|
||||
const target = unconnected[Math.floor(Math.random() * unconnected.length)];
|
||||
nodes[i].connections.push(target.id);
|
||||
edges.push({
|
||||
from: i,
|
||||
to: target.id,
|
||||
distance: 0,
|
||||
maxDistance: Math.sqrt(
|
||||
Math.pow(target.x - nodes[i].x, 2) +
|
||||
Math.pow(target.y - nodes[i].y, 2)
|
||||
),
|
||||
energy: 10 + Math.random() * 20,
|
||||
pulse: 0
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Calculate node depths (for rendering hierarchy)
|
||||
const visited = new Set();
|
||||
const queue = [{node: 0, depth: 0}];
|
||||
|
||||
while (queue.length > 0) {
|
||||
const {node, depth} = queue.shift();
|
||||
if (visited.has(node)) continue;
|
||||
visited.add(node);
|
||||
nodes[node].depth = depth;
|
||||
|
||||
for (const neighbor of nodes[node].connections) {
|
||||
queue.push({node: neighbor, depth: depth + 1});
|
||||
}
|
||||
}
|
||||
|
||||
// Normalize depths for rendering
|
||||
const maxDepth = Math.max(...nodes.map(n => n.depth), 1);
|
||||
nodes.forEach(n => {
|
||||
n.normalizedDepth = n.depth / maxDepth;
|
||||
});
|
||||
}
|
||||
|
||||
// Animation variables
|
||||
let time = 0;
|
||||
let energy = FINAL_ENERGY * (0.9 + 0.2 * Math.random());
|
||||
let globalPulse = 0;
|
||||
|
||||
function updateNodes() {
|
||||
time += pulseSpeed;
|
||||
|
||||
// Update node pulses
|
||||
nodes.forEach(node => {
|
||||
// Flicker based on global pulse
|
||||
const pulseEffect = 0.8 + 0.2 * Math.sin(globalPulse * pulseVariation + node.id * 0.3);
|
||||
|
||||
// Movement based on energy decay
|
||||
const energyFactor = 1 - (1 - LIFESPAN) * 0.01;
|
||||
energy *= energyFactor;
|
||||
|
||||
// Soft random walk
|
||||
node.pulse += 0.01 * node.pulseDirection * energyFactor;
|
||||
if (Math.random() < 0.01 * MOTION) {
|
||||
node.baseX += (Math.random() - 0.5) * 2 * energyFactor;
|
||||
node.baseY += (Math.random() - 0.5) * 2 * energyFactor;
|
||||
}
|
||||
|
||||
// Clamp to canvas with margin
|
||||
const margin = 50;
|
||||
node.baseX = Math.max(margin, Math.min(canvas.width - margin, node.baseX));
|
||||
node.baseY = Math.max(margin, Math.min(canvas.height - margin, node.baseY));
|
||||
|
||||
// Smooth movement toward target
|
||||
node.x += (node.baseX - node.x) * 0.1 * energyFactor;
|
||||
node.y += (node.baseY - node.y) * 0.1 * energyFactor;
|
||||
|
||||
// Update pulse
|
||||
node.pulse = (node.pulse + 0.05) % (Math.PI * 2);
|
||||
});
|
||||
|
||||
// Update edge pulses and distances
|
||||
edges.forEach(edge => {
|
||||
const fromNode = nodes[edge.from];
|
||||
const toNode = nodes[edge.to];
|
||||
|
||||
// Calculate dynamic distance based on node states
|
||||
const targetDistance = Math.sqrt(
|
||||
Math.pow(toNode.x - fromNode.x, 2) +
|
||||
Math.pow(toNode.y - fromNode.y, 2)
|
||||
) * (0.9 + 0.2 * Math.sin(edge.pulse * 0.5));
|
||||
|
||||
edge.distance = targetDistance;
|
||||
edge.pulse = (edge.pulse + 0.02 + 0.08 * Math.random()) % (Math.PI * 2);
|
||||
});
|
||||
|
||||
// Update global pulse
|
||||
globalPulse = (globalPulse + 0.01) % (Math.PI * 2);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
// Clear with subtle trails
|
||||
ctx.fillStyle = 'rgba(10, 10, 10, 0.05)';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Draw edges (network connections)
|
||||
ctx.lineCap = 'round';
|
||||
edges.forEach(edge => {
|
||||
const fromNode = nodes[edge.from];
|
||||
const toNode = nodes[edge.to];
|
||||
|
||||
// Color based on energy and dryness
|
||||
const energyRatio = edge.energy / 40;
|
||||
const gray = 50 + 150 * DRYNESS * (1 - energyRatio);
|
||||
const alpha = 0.3 + 0.4 * energyRatio * (0.7 + 0.3 * Math.sin(edge.pulse));
|
||||
|
||||
ctx.strokeStyle = `rgba(${gray}, ${gray}, ${gray}, ${alpha})`;
|
||||
ctx.lineWidth = edgeThickness * (0.5 + 0.5 * Math.sin(edge.pulse));
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(fromNode.x, fromNode.y);
|
||||
ctx.lineTo(toNode.x, toNode.y);
|
||||
ctx.stroke();
|
||||
});
|
||||
|
||||
// Draw nodes (with depth sorting)
|
||||
const sortedNodes = [...nodes].sort((a, b) => {
|
||||
return b.normalizedDepth - a.normalizedDepth;
|
||||
});
|
||||
|
||||
sortedNodes.forEach(node => {
|
||||
// Glow effect based on pulse
|
||||
const glow = Math.max(0,
|
||||
0.3 * Math.sin(node.pulse) +
|
||||
0.2 * Math.sin(globalPulse + node.id * 0.3)
|
||||
);
|
||||
|
||||
// Node color - very dry (monochrome)
|
||||
const gray = 200 + 55 * glow;
|
||||
const size = node.size * (0.9 + 0.2 * Math.sin(node.pulse));
|
||||
|
||||
// Draw glow
|
||||
ctx.beginPath();
|
||||
ctx.arc(node.x, node.y, size * 1.5, 0, Math.PI * 2);
|
||||
ctx.fillStyle = `rgba(${gray}, ${gray}, ${gray}, ${0.1 * glow})`;
|
||||
ctx.fill();
|
||||
|
||||
// Draw node
|
||||
ctx.beginPath();
|
||||
ctx.arc(node.x, node.y, size, 0, Math.PI * 2);
|
||||
ctx.fillStyle = `rgb(${gray}, ${gray}, ${gray})`;
|
||||
ctx.fill();
|
||||
|
||||
// Inner highlight for depth
|
||||
ctx.beginPath();
|
||||
ctx.arc(node.x, node.y, size * 0.4, 0, Math.PI * 2);
|
||||
ctx.fillStyle = `rgba(255, 255, 255, 0.2)`;
|
||||
ctx.fill();
|
||||
});
|
||||
}
|
||||
|
||||
function animate() {
|
||||
updateNodes();
|
||||
draw();
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
initNetwork();
|
||||
animate();
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue