birth: Fractured Constellations Drift
This commit is contained in:
parent
d155999108
commit
2a7b18df86
1 changed files with 240 additions and 0 deletions
240
index.html
Normal file
240
index.html
Normal file
|
|
@ -0,0 +1,240 @@
|
|||
<!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: #0a0a0a;
|
||||
color: #888;
|
||||
font-family: 'Courier New', monospace;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
height: 100vh;
|
||||
}
|
||||
#canvas {
|
||||
display: block;
|
||||
background: #0a0a0a;
|
||||
}
|
||||
#attribution {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
font-size: 10px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
</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 derived from abstract input
|
||||
const motion = 0.5;
|
||||
const density = 0.5;
|
||||
const complexity = 0.5;
|
||||
const connectedness = 0.5;
|
||||
const lifespan = 0.5;
|
||||
const pulse = { avg: 1.08, min: 1.00, max: 1.20 };
|
||||
const tone = { anger: 0.00, sadness: 0.00, curiosity: 0.10, dryness: 0.90, playfulness: 0.00, tension: 0.00 };
|
||||
|
||||
// Network graph configuration
|
||||
const nodeCount = Math.floor(100 + density * 200);
|
||||
const edgeProb = 0.3 + connectedness * 0.4;
|
||||
const nodeSize = 2 + complexity * 3;
|
||||
const edgeThickness = 0.5 + complexity * 1.5;
|
||||
const maxConnections = 5 + connectedness * 10;
|
||||
const pulseVariation = 0.9 + (pulse.max - pulse.min) * 0.5;
|
||||
const decayFactor = 0.98 + lifespan * 0.02;
|
||||
|
||||
// Nodes and edges
|
||||
let nodes = [];
|
||||
let edges = [];
|
||||
let history = [];
|
||||
|
||||
class Node {
|
||||
constructor(x, y, id) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.id = id;
|
||||
this.vx = (Math.random() - 0.5) * motion * 2;
|
||||
this.vy = (Math.random() - 0.5) * motion * 2;
|
||||
this.size = nodeSize * (0.8 + Math.random() * 0.4);
|
||||
this.connections = [];
|
||||
this.pulse = 1.0;
|
||||
this.history = [];
|
||||
}
|
||||
|
||||
update() {
|
||||
this.x += this.vx;
|
||||
this.y += this.vy;
|
||||
|
||||
// Bounce off edges
|
||||
if (this.x < 0 || this.x > canvas.width) {
|
||||
this.vx *= -1;
|
||||
this.x = Math.max(0, Math.min(canvas.width, this.x));
|
||||
}
|
||||
if (this.y < 0 || this.y > canvas.height) {
|
||||
this.vy *= -1;
|
||||
this.y = Math.max(0, Math.min(canvas.height, this.y));
|
||||
}
|
||||
|
||||
// Update pulse
|
||||
this.pulse = pulse.avg * (0.95 + Math.sin(Date.now() * 0.002) * 0.05 * pulseVariation);
|
||||
|
||||
// Store history
|
||||
this.history.push({
|
||||
x: this.x,
|
||||
y: this.y,
|
||||
pulse: this.pulse,
|
||||
time: Date.now()
|
||||
});
|
||||
|
||||
// Limit history length
|
||||
if (this.history.length > 20) {
|
||||
this.history.shift();
|
||||
}
|
||||
}
|
||||
|
||||
draw() {
|
||||
// Draw connection history
|
||||
ctx.strokeStyle = `rgba(200, 200, 200, ${0.2 * decayFactor})`;
|
||||
ctx.lineWidth = 1;
|
||||
ctx.beginPath();
|
||||
|
||||
for (let i = 1; i < this.history.length; i++) {
|
||||
const h1 = this.history[i-1];
|
||||
const h2 = this.history[i];
|
||||
ctx.moveTo(h1.x, h1.y);
|
||||
ctx.lineTo(h2.x, h2.y);
|
||||
}
|
||||
|
||||
ctx.stroke();
|
||||
|
||||
// Draw node
|
||||
ctx.fillStyle = `rgba(200, 200, 200, ${0.8 * decayFactor})`;
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, this.size * this.pulse, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
class Edge {
|
||||
constructor(node1, node2) {
|
||||
this.node1 = node1;
|
||||
this.node2 = node2;
|
||||
this.thickness = edgeThickness * (0.7 + Math.random() * 0.6);
|
||||
this.strength = 0.5 + Math.random() * 0.5;
|
||||
}
|
||||
|
||||
update() {
|
||||
// Nodes might disconnect over time
|
||||
if (Math.random() < 0.002 * (1 - connectedness)) {
|
||||
this.node1.connections = this.node1.connections.filter(c => c !== this.node2);
|
||||
this.node2.connections = this.node2.connections.filter(c => c !== this.node1);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
draw() {
|
||||
// Draw connection with pulse effect
|
||||
const age = (Date.now() - this.node1.history[0]?.time) / 1000;
|
||||
const opacity = 0.3 * Math.exp(-age * 0.1) * this.strength * this.node1.pulse * this.node2.pulse;
|
||||
|
||||
ctx.strokeStyle = `rgba(180, 180, 180, ${opacity * decayFactor})`;
|
||||
ctx.lineWidth = this.thickness * this.node1.pulse;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(this.node1.x, this.node1.y);
|
||||
ctx.lineTo(this.node2.x, this.node2.y);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
function initNetwork() {
|
||||
nodes = [];
|
||||
edges = [];
|
||||
|
||||
// Create nodes
|
||||
for (let i = 0; i < nodeCount; i++) {
|
||||
nodes.push(new Node(
|
||||
Math.random() * canvas.width,
|
||||
Math.random() * canvas.height,
|
||||
i
|
||||
));
|
||||
}
|
||||
|
||||
// Create edges based on proximity and density
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
const connections = Math.floor(maxConnections * density * (0.5 + Math.random()));
|
||||
|
||||
for (let j = 0; j < connections; j++) {
|
||||
const target = Math.floor(Math.random() * nodes.length);
|
||||
|
||||
// Check for existing connection
|
||||
if (target !== i &&
|
||||
!nodes[i].connections.includes(nodes[target]) &&
|
||||
!nodes[target].connections.includes(nodes[i])) {
|
||||
|
||||
// Only connect if close enough
|
||||
const dx = nodes[target].x - nodes[i].x;
|
||||
const dy = nodes[target].y - nodes[i].y;
|
||||
const distance = Math.sqrt(dx*dx + dy*dy);
|
||||
|
||||
if (distance < 300 * density) {
|
||||
nodes[i].connections.push(nodes[target]);
|
||||
nodes[target].connections.push(nodes[i]);
|
||||
edges.push(new Edge(nodes[i], nodes[target]));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function animate() {
|
||||
if (Math.random() < motion * 0.02) {
|
||||
initNetwork();
|
||||
}
|
||||
|
||||
// Update nodes
|
||||
nodes.forEach(node => node.update());
|
||||
|
||||
// Update and cull edges
|
||||
for (let i = edges.length - 1; i >= 0; i--) {
|
||||
if (!edges[i].update()) {
|
||||
edges.splice(i, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// Clear canvas
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Draw edges
|
||||
edges.forEach(edge => edge.draw());
|
||||
|
||||
// Draw nodes
|
||||
nodes.forEach(node => node.draw());
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
initNetwork();
|
||||
animate();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue