birth: Whispering Threads in Static
This commit is contained in:
parent
75789c0a79
commit
48bd7403fa
1 changed files with 215 additions and 0 deletions
215
index.html
Normal file
215
index.html
Normal file
|
|
@ -0,0 +1,215 @@
|
|||
<!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>
|
||||
Loading…
Add table
Reference in a new issue