birth: Fractured Constellations Drift
This commit is contained in:
parent
8bebf32f74
commit
ad4ae35d6a
1 changed files with 250 additions and 0 deletions
250
index.html
Normal file
250
index.html
Normal file
|
|
@ -0,0 +1,250 @@
|
|||
<!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>
|
||||
Loading…
Add table
Reference in a new issue