neurameba/teal-murmurs-in-monochrome-qcsu
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

birth: Teal murmurs in monochrome

Browse source
This commit is contained in:
motd_admin 2026-03-29 17:47:17 +00:00
parent c099d04276
commit 76f02c0307
1 changed files with 172 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

172
index.html Normal file
View file

@ -0,0 +1,172 @@
```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;
font-family: 'Courier New', monospace;
}
canvas {
display: block;
}
#attribution {
position: absolute;
bottom: 1em;
left: 1em;
color: rgba(255, 255, 255, 0.3);
font-size: 0.8em;
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;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
// Parameters
const params = {
motion: 0.476,
density: 0.427,
complexity: 0.546,
connectedness: 0.5,
lifespan: 0.473,
survivingNodes: 148,
branchCount: 138,
loops: 829,
maxDepth: 21,
thicknessRatio: 1.25,
fractalDimension: 1.275,
pulseAvg: 0.51,
pulseMin: 0.3,
pulseMax: 2.0,
tone: {
anger: 0.0,
sadness: 0.0,
curiosity: 0.3,
dryness: 0.9,
playfulness: 0.1,
tension: 0.0
}
};
// Reaction-diffusion grid
const GRID_SIZE = Math.min(150, 100 + params.density * 200);
const CELL_SIZE = Math.max(2, Math.min(8, 10 - params.density * 5));
const grid = [];
const nextGrid = [];
// Initialize grids
for (let i = 0; i < GRID_SIZE; i++) {
grid[i] = new Array(GRID_SIZE).fill(0);
nextGrid[i] = new Array(GRID_SIZE).fill(0);
}
// Random seed with density influence
for (let i = 0; i < GRID_SIZE; i++) {
for (let j = 0; j < GRID_SIZE; j++) {
const val = Math.random() * params.density;
grid[i][j] = val > 0.5 ? 1 : 0;
}
}
// Reaction-diffusion parameters (Gray-Scott model)
let F = 0.055 + params.density * 0.02;
let k = 0.062 + params.connectedness * 0.02;
// Color palette
const hue = params.tone.curiosity * 120; // teals
const saturation = 0.7 * (1 - params.tone.dryness) + 0.1;
const lightness = 0.1 + params.pulseAvg * 0.1;
let time = 0;
function updateGrid() {
for (let i = 1; i < GRID_SIZE - 1; i++) {
for (let j = 1; j < GRID_SIZE - 1; j++) {
const u = grid[i][j];
const v = nextGrid[i][j];
// von Neumann neighborhood
const sumU = grid[i-1][j] + grid[i+1][j] + grid[i][j-1] + grid[i][j+1];
// Gray-Scott reaction terms
const reaction = u * u * v;
const diffU = (grid[i-1][j] + grid[i+1][j] + grid[i][j-1] + grid[i][j+1] - 4 * u) * 0.1;
nextGrid[i][j] = u + (diffU - reaction + F * (1 - u)) * params.motion;
nextGrid[i][j] = Math.max(0, Math.min(1, nextGrid[i][j]));
// Update v component
const diffV = (nextGrid[i-1][j] + nextGrid[i+1][j] + nextGrid[i][j-1] + nextGrid[i][j+1] - 4 * v) * 0.1;
nextGrid[i][j] -= (reaction - k * v + diffV) * params.motion;
nextGrid[i][j] = Math.max(0, Math.min(1, nextGrid[i][j]));
}
}
// Swap grids
const temp = grid;
for (let i = 0; i < GRID_SIZE; i++) {
for (let j = 0; j < GRID_SIZE; j++) {
grid[i][j] = nextGrid[i][j];
}
}
}
function draw() {
ctx.fillStyle = `rgba(0, 0, 0, 0.05)`;
ctx.fillRect(0, 0, canvas.width, canvas.height);
const cellScaleX = canvas.width / GRID_SIZE;
const cellScaleY = canvas.height / GRID_SIZE;
for (let i = 0; i < GRID_SIZE; i++) {
for (let j = 0; j < GRID_SIZE; j++) {
const val = grid[i][j];
if (val > 0.1) {
const size = CELL_SIZE * (0.5 + val * 0.5);
const x = j * cellScaleX + cellScaleX * 0.5;
const y = i * cellScaleY + cellScaleY * 0.5;
// Color based on tone parameters
const pulse = params.pulseMin + (val * (params.pulseMax - params.pulseMin));
const alpha = val * 0.8 * pulse;
ctx.fillStyle = `hsla(${hue}, ${saturation * 100}%, ${lightness * 100}%, ${alpha})`;
ctx.beginPath();
ctx.arc(x, y, size * 0.5, 0, Math.PI * 2);
ctx.fill();
}
}
}
updateGrid();
time += params.motion * 0.01;
}
function animate() {
draw();
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
```