215 lines
No EOL
7 KiB
HTML
215 lines
No EOL
7 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: #000;
|
|
color: #fff;
|
|
font-family: monospace;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
height: 100vh;
|
|
}
|
|
canvas {
|
|
display: block;
|
|
}
|
|
#attribution {
|
|
position: fixed;
|
|
bottom: 10px;
|
|
left: 10px;
|
|
font-size: 10px;
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
</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 (0-1)
|
|
const params = {
|
|
motion: 0.5,
|
|
density: 0.5,
|
|
complexity: 0.5,
|
|
connectedness: 0.5,
|
|
lifespan: 0.5
|
|
};
|
|
|
|
// Pulse data (avg, min, max)
|
|
const pulse = { avg: 1.03, min: 0.8, max: 1.2 };
|
|
|
|
// Tone (0-1)
|
|
const tone = {
|
|
anger: 0.0,
|
|
sadness: 0.0,
|
|
curiosity: 0.1,
|
|
dryness: 0.8,
|
|
playfulness: 0.0,
|
|
tension: 0.0
|
|
};
|
|
|
|
// Animation state
|
|
let nodes = [];
|
|
let edges = [];
|
|
let time = 0;
|
|
const nodeCount = Math.floor(50 + 200 * params.density);
|
|
const edgeCount = Math.floor(20 + 150 * params.connectedness);
|
|
const baseAlpha = 0.7 * (1 - tone.playfulness * 0.5);
|
|
|
|
// Initialize network
|
|
function initNetwork() {
|
|
nodes = [];
|
|
edges = [];
|
|
|
|
// Create nodes
|
|
for (let i = 0; i < nodeCount; i++) {
|
|
nodes.push({
|
|
x: Math.random() * canvas.width,
|
|
y: Math.random() * canvas.height,
|
|
vx: (Math.random() - 0.5) * 0.5 * params.motion,
|
|
vy: (Math.random() - 0.5) * 0.5 * params.motion,
|
|
targetVx: (Math.random() - 0.5) * 0.5 * params.motion,
|
|
targetVy: (Math.random() - 0.5) * 0.5 * params.motion,
|
|
size: 2 + 4 * params.complexity,
|
|
color: `rgba(255, 255, 255, ${baseAlpha})`,
|
|
energy: 1.0,
|
|
maxEnergy: 1.0,
|
|
lifespan: 1.0 + Math.random() * params.lifespan * 2
|
|
});
|
|
}
|
|
|
|
// Create edges
|
|
for (let i = 0; i < edgeCount; i++) {
|
|
const a = Math.floor(Math.random() * nodes.length);
|
|
const b = Math.floor(Math.random() * nodes.length);
|
|
if (a !== b) {
|
|
edges.push({
|
|
from: a,
|
|
to: b,
|
|
weight: 0.5 + 0.5 * Math.random(),
|
|
length: 50 + 200 * Math.random(),
|
|
color: `rgba(255, 255, 255, ${baseAlpha * 0.5})`
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
// Update network
|
|
function updateNetwork() {
|
|
const pulseFactor = pulse.avg + (pulse.max - pulse.avg) * 0.3 *
|
|
Math.sin(time * 0.001) * params.motion;
|
|
|
|
// Update nodes
|
|
nodes.forEach(node => {
|
|
// Smooth movement
|
|
node.vx += (node.targetVx - node.vx) * 0.05 * params.motion;
|
|
node.vy += (node.targetVy - node.vy) * 0.05 * params.motion;
|
|
|
|
node.x += node.vx * pulseFactor;
|
|
node.y += node.vy * pulseFactor;
|
|
|
|
// Boundary check
|
|
if (node.x < 0) { node.x = canvas.width; node.vx *= -1; }
|
|
if (node.x > canvas.width) { node.x = 0; node.vx *= -1; }
|
|
if (node.y < 0) { node.y = canvas.height; node.vy *= -1; }
|
|
if (node.y > canvas.height) { node.y = 0; node.vy *= -1; }
|
|
|
|
// Update energy based on motion
|
|
node.energy = Math.min(1.0, node.energy + 0.001 * params.motion * (1 + pulseFactor * 0.1));
|
|
});
|
|
|
|
// Update edges
|
|
edges.forEach(edge => {
|
|
const nodeA = nodes[edge.from];
|
|
const nodeB = nodes[edge.to];
|
|
|
|
// Calculate distance
|
|
const dx = nodeB.x - nodeA.x;
|
|
const dy = nodeB.y - nodeA.y;
|
|
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
|
|
// Update edge color based on strength
|
|
const alpha = baseAlpha * edge.weight * (0.5 + 0.5 * pulseFactor);
|
|
edge.color = `rgba(255, 255, 255, ${alpha})`;
|
|
|
|
// Apply tension if distance is too large
|
|
if (distance > edge.length * 1.2) {
|
|
const pull = (edge.length - distance) * 0.01;
|
|
nodeA.vx -= dx * pull;
|
|
nodeA.vy -= dy * pull;
|
|
nodeB.vx += dx * pull;
|
|
nodeB.vy += dy * pull;
|
|
}
|
|
|
|
// Apply attraction if nodes are close
|
|
if (distance < edge.length * 0.5) {
|
|
const push = (edge.length - distance) * 0.005;
|
|
nodeA.vx += dx * push;
|
|
nodeA.vy += dy * push;
|
|
nodeB.vx -= dx * push;
|
|
nodeB.vy -= dy * push;
|
|
}
|
|
});
|
|
|
|
time++;
|
|
}
|
|
|
|
// Draw network
|
|
function drawNetwork() {
|
|
// Fade background
|
|
ctx.fillStyle = `rgba(0, 0, 0, ${0.05 + 0.05 * Math.sin(time * 0.001)})`;
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
// Draw edges
|
|
edges.forEach(edge => {
|
|
const nodeA = nodes[edge.from];
|
|
const nodeB = nodes[edge.to];
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(nodeA.x, nodeA.y);
|
|
ctx.lineTo(nodeB.x, nodeB.y);
|
|
ctx.strokeStyle = edge.color;
|
|
ctx.lineWidth = edge.weight * (1.5 + 0.5 * Math.sin(time * 0.001 * edge.weight));
|
|
ctx.stroke();
|
|
});
|
|
|
|
// Draw nodes
|
|
nodes.forEach(node => {
|
|
ctx.beginPath();
|
|
ctx.arc(node.x, node.y, node.size * (0.8 + 0.2 * Math.sin(time * 0.002)), 0, Math.PI * 2);
|
|
ctx.fillStyle = node.color;
|
|
ctx.fill();
|
|
});
|
|
}
|
|
|
|
// Animation loop
|
|
function animate() {
|
|
updateNetwork();
|
|
drawNetwork();
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
// Initialize and start
|
|
initNetwork();
|
|
animate();
|
|
</script>
|
|
</body>
|
|
</html> |