birth: electric dust webs weaving

This commit is contained in:
motd_admin 2026-07-09 01:47:17 +00:00
parent 762de4784a
commit 42b8ada347

144
index.html Normal file
View file

@ -0,0 +1,144 @@
<!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;
font-family: 'Courier New', monospace;
color: #888;
display: flex;
flex-direction: column;
height: 100vh;
}
canvas {
flex: 1;
}
.attribution {
text-align: center;
padding: 8px;
font-size: 10px;
letter-spacing: 1px;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div class="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
const params = {
motion: 0.5,
density: 0.5,
complexity: 0.5,
connectedness: 0.5,
lifespan: 0.5,
pulse: { avg: 1.06, min: 0.9, max: 1.2 },
tone: { dryness: 0.8, curiosity: 0.1 }
};
// Network graph simulation
class Node {
constructor(x, y) {
this.x = x;
this.y = y;
this.vx = (Math.random() - 0.5) * 2;
this.vy = (Math.random() - 0.5) * 2;
this.size = 2 + Math.random() * 3;
this.life = 1;
this.connections = [];
}
update(others, connectedness) {
// Movement
this.x += this.vx * params.motion;
this.y += this.vy * params.motion;
// Boundary check
if (this.x < 0) this.x = canvas.width;
if (this.x > canvas.width) this.x = 0;
if (this.y < 0) this.y = canvas.height;
if (this.y > canvas.height) this.y = 0;
// Connect nodes
this.connections = [];
others.forEach(other => {
const d = Math.hypot(this.x - other.x, this.y - other.y);
if (d < 150 * connectedness && Math.random() < 0.05 * connectedness) {
this.connections.push(other);
}
});
}
draw() {
ctx.fillStyle = `rgba(255, 255, 255, ${this.life})`;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
// Draw connections
this.connections.forEach(conn => {
const opacity = 0.2 + (0.8 * params.connectedness);
ctx.strokeStyle = `rgba(255, 255, 255, ${opacity})`;
ctx.lineWidth = 0.5;
ctx.beginPath();
ctx.moveTo(this.x, this.y);
ctx.lineTo(conn.x, conn.y);
ctx.stroke();
});
}
}
// Initialize nodes
let nodes = [];
const nodeCount = 100 + Math.floor(params.density * 200);
for (let i = 0; i < nodeCount; i++) {
nodes.push(new Node(
Math.random() * canvas.width,
Math.random() * canvas.height
));
}
// Animation loop
let lastTime = 0;
function animate(time) {
const deltaTime = time - lastTime;
lastTime = time;
// Clear with fade
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Update and draw nodes
nodes.forEach(node => node.update(nodes, params.connectedness));
nodes.forEach(node => node.draw());
// Occasionally add new nodes
if (Math.random() < 0.05 && nodes.length < nodeCount * 1.5) {
nodes.push(new Node(
Math.random() * canvas.width,
Math.random() * canvas.height
));
}
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
</script>
</body>
</html>