293 lines
No EOL
12 KiB
HTML
293 lines
No EOL
12 KiB
HTML
<!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> |