240 lines
No EOL
7.9 KiB
HTML
240 lines
No EOL
7.9 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 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> |