250 lines
No EOL
8.2 KiB
HTML
250 lines
No EOL
8.2 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 Dynamics</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
background-color: #0a0a0a;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
canvas {
|
|
display: block;
|
|
}
|
|
#attribution {
|
|
position: fixed;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
color: #444;
|
|
font-size: 10px;
|
|
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');
|
|
|
|
// Set canvas to full window size
|
|
function resizeCanvas() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
resizeCanvas();
|
|
window.addEventListener('resize', resizeCanvas);
|
|
|
|
// Configuration based on parameters
|
|
const config = {
|
|
nodeCount: Math.max(100, Math.floor(500 * 0.5)), // density 0.5
|
|
motion: 0.5,
|
|
complexity: 0.5,
|
|
connectedness: 0.5,
|
|
lifespan: 0.5,
|
|
pulse: {
|
|
avg: 1.11,
|
|
min: 0.95,
|
|
max: 1.30
|
|
},
|
|
tone: {
|
|
anger: 0.00,
|
|
sadness: 0.00,
|
|
curiosity: 0.10,
|
|
dryness: 0.90,
|
|
playfulness: 0.00,
|
|
tension: 0.00
|
|
}
|
|
};
|
|
|
|
// Network node structure
|
|
class Node {
|
|
constructor(x, y) {
|
|
this.x = x;
|
|
this.y = y;
|
|
this.vx = 0;
|
|
this.vy = 0;
|
|
this.targetX = x;
|
|
this.targetY = y;
|
|
this.energy = Math.random() * 0.5 + 0.5;
|
|
this.size = 2 + Math.random() * 3;
|
|
this.color = `hsl(0, 0%, ${10 + Math.random() * 15}%)`;
|
|
this.lifetime = 0;
|
|
this.maxLifetime = 100 + Math.random() * 200;
|
|
}
|
|
|
|
update() {
|
|
// Slow movement toward target with some jitter
|
|
this.vx += (this.targetX - this.x) * 0.01 * config.motion;
|
|
this.vy += (this.targetY - this.y) * 0.01 * config.motion;
|
|
|
|
// Add noise based on motion parameter
|
|
this.vx += (Math.random() - 0.5) * 0.5 * config.motion;
|
|
this.vy += (Math.random() - 0.5) * 0.5 * config.motion;
|
|
|
|
// Apply damping
|
|
this.vx *= 0.9;
|
|
this.vy *= 0.9;
|
|
|
|
this.x += this.vx;
|
|
this.y += this.vy;
|
|
|
|
this.lifetime++;
|
|
|
|
// Fade out if approaching end of life
|
|
if (this.lifetime > this.maxLifetime * config.lifespan) {
|
|
this.energy *= 0.95;
|
|
}
|
|
|
|
// Update target position periodically
|
|
if (Math.random() < 0.02 * config.motion) {
|
|
this.targetX = Math.random() * canvas.width;
|
|
this.targetY = Math.random() * canvas.height;
|
|
}
|
|
}
|
|
|
|
draw() {
|
|
const pulse = config.pulse.avg + (config.pulse.max - config.pulse.min) *
|
|
Math.sin(Date.now() / 1000 * 0.3 + this.x * 0.01);
|
|
const size = this.size * pulse * (0.5 + this.energy * 0.5);
|
|
const alpha = Math.min(1, this.energy * (0.7 + 0.3 * Math.sin(this.lifetime * 0.1)));
|
|
|
|
ctx.globalAlpha = alpha;
|
|
ctx.beginPath();
|
|
ctx.arc(this.x, this.y, size, 0, Math.PI * 2);
|
|
ctx.fillStyle = this.color;
|
|
ctx.fill();
|
|
ctx.globalAlpha = 1;
|
|
}
|
|
}
|
|
|
|
// Connection between nodes
|
|
class Connection {
|
|
constructor(node1, node2) {
|
|
this.node1 = node1;
|
|
this.node2 = node2;
|
|
this.age = 0;
|
|
this.maxAge = 200 + Math.random() * 300;
|
|
}
|
|
|
|
update() {
|
|
this.age++;
|
|
}
|
|
|
|
draw() {
|
|
const pulse = config.pulse.avg + (config.pulse.max - config.pulse.min) *
|
|
Math.sin(Date.now() / 1000 * 0.3);
|
|
const distance = Math.sqrt(
|
|
Math.pow(this.node2.x - this.node1.x, 2) +
|
|
Math.pow(this.node2.y - this.node1.y, 2)
|
|
);
|
|
|
|
// Fade connections based on distance and age
|
|
const strength = Math.min(1, 1 - (distance / 500) * 2) *
|
|
(1 - this.age / this.maxAge) *
|
|
pulse;
|
|
|
|
if (strength > 0.01) {
|
|
ctx.globalAlpha = strength * 0.8;
|
|
ctx.beginPath();
|
|
ctx.moveTo(this.node1.x, this.node1.y);
|
|
ctx.lineTo(this.node2.x, this.node2.y);
|
|
ctx.strokeStyle = `rgba(120, 120, 120, ${strength * 0.7})`;
|
|
ctx.lineWidth = 1 + strength * 2;
|
|
ctx.stroke();
|
|
ctx.globalAlpha = 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Network system
|
|
class Network {
|
|
constructor() {
|
|
this.nodes = [];
|
|
this.connections = [];
|
|
this.initNodes();
|
|
this.initConnections();
|
|
}
|
|
|
|
initNodes() {
|
|
for (let i = 0; i < config.nodeCount; i++) {
|
|
this.nodes.push(new Node(
|
|
Math.random() * canvas.width,
|
|
Math.random() * canvas.height
|
|
));
|
|
}
|
|
}
|
|
|
|
initConnections() {
|
|
// Create connections based on proximity
|
|
for (let i = 0; i < this.nodes.length; i++) {
|
|
for (let j = i + 1; j < Math.min(i + 5, this.nodes.length); j++) {
|
|
if (Math.random() < config.connectedness * 0.3) {
|
|
this.connections.push(new Connection(this.nodes[i], this.nodes[j]));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
update() {
|
|
// Update nodes
|
|
this.nodes.forEach(node => node.update());
|
|
|
|
// Create new connections based on proximity
|
|
if (Math.random() < config.connectedness * 0.02) {
|
|
const node1 = this.nodes[Math.floor(Math.random() * this.nodes.length)];
|
|
const node2 = this.nodes[Math.floor(Math.random() * this.nodes.length)];
|
|
|
|
if (node1 !== node2 && !this.connections.some(c =>
|
|
(c.node1 === node1 && c.node2 === node2) ||
|
|
(c.node1 === node2 && c.node2 === node1)
|
|
)) {
|
|
this.connections.push(new Connection(node1, node2));
|
|
}
|
|
}
|
|
|
|
// Remove old connections
|
|
this.connections = this.connections.filter(conn => {
|
|
conn.update();
|
|
return conn.age < conn.maxAge;
|
|
});
|
|
|
|
// Remove dead nodes
|
|
this.nodes = this.nodes.filter(node =>
|
|
node.lifetime < node.maxLifetime
|
|
);
|
|
}
|
|
|
|
draw() {
|
|
// Draw connections first (background)
|
|
this.connections.forEach(conn => conn.draw());
|
|
|
|
// Draw nodes (foreground)
|
|
this.nodes.forEach(node => node.draw());
|
|
}
|
|
}
|
|
|
|
// Create network
|
|
const network = new Network();
|
|
|
|
// Animation loop
|
|
function animate() {
|
|
// Clear with semi-transparent overlay for motion trails
|
|
ctx.fillStyle = 'rgba(10, 10, 10, 0.05)';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
network.update();
|
|
network.draw();
|
|
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
// Start animation
|
|
animate();
|
|
</script>
|
|
</body>
|
|
</html> |