neurameba/fading-echoes-in-monochrome-2las
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

birth: Fading Echoes in Monochrome

Browse source
This commit is contained in:
motd_admin 2026-04-12 21:47:16 +00:00
parent 4492e966f5
commit 5d7df011f3
1 changed files with 170 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

170
index.html Normal file
View file

@ -0,0 +1,170 @@
<!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;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: monospace;
color: #ddd;
}
canvas {
display: block;
max-width: 100%;
max-height: 100%;
}
#attribution {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
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 mapped from input
const params = {
motion: 0.5,
density: 0.5,
complexity: 0.5,
connectedness: 0.5,
lifespan: 0.5,
pulse: { avg: 1.06, min: 0.9, max: 1.2 },
tone: { anger: 0.0, sadness: 0.0, curiosity: 0.1, dryness: 0.8, playfulness: 0.0, tension: 0.0 }
};
// Reaction-Diffusion Setup
const W = canvas.width;
const H = canvas.height;
const size = Math.min(W, H) * 0.8;
const gridSize = 100;
const cellWidth = size / gridSize;
const cellHeight = size / gridSize;
// Chemical concentrations
let A = new Array(gridSize).fill().map(() => new Array(gridSize).fill(0));
let B = new Array(gridSize).fill().map(() => new Array(gridSize).fill(0));
let prevA = new Array(gridSize).fill().map(() => new Array(gridSize).fill(0));
let prevB = new Array(gridSize).fill().map(() => new Array(gridSize).fill(0));
// Initialize with sparse randomness
function initGrid() {
for (let y = 0; y < gridSize; y++) {
for (let x = 0; x < gridSize; x++) {
A[y][x] = params.density > 0.7 ? (Math.random() > 0.9 ? 1 : 0) : (Math.random() > 0.95 ? 1 : 0);
B[y][x] = params.density > 0.7 ? (Math.random() > 0.9 ? 1 : 0) : (Math.random() > 0.95 ? 1 : 0);
}
}
}
// Gray-Scott reaction diffusion parameters
const feed = 0.055 + (params.connectedness * 0.02);
const kill = 0.062 + (params.motion * 0.01);
const diffusionA = 0.16 + (params.motion * 0.05);
const diffusionB = 0.08 + (params.complexity * 0.04);
// Animation state
let t = 0;
const pulse = params.pulse;
function update() {
// Swap buffers
[prevA, A] = [A, prevA];
[prevB, B] = [B, prevB];
for (let y = 1; y < gridSize - 1; y++) {
for (let x = 1; x < gridSize - 1; x++) {
// Laplacian calculations
const laplacianA =
(prevA[y-1][x] + prevA[y+1][x] + prevA[y][x-1] + prevA[y][x+1] -
4 * prevA[y][x]) * diffusionA;
const laplacianB =
(prevB[y-1][x] + prevB[y+1][x] + prevB[y][x-1] + prevB[y][x+1] -
4 * prevB[y][x]) * diffusionB;
// Reaction terms
const reactionAB = prevA[y][x] * prevB[y][x] * prevB[y][x];
const ab2 = params.motion * 0.1;
const feedAB = feed * (1 - params.dryness);
const killAB = kill;
// Update concentrations
A[y][x] = prevA[y][x] + laplacianA - reactionAB + feedAB;
B[y][x] = prevB[y][x] + laplacianB + reactionAB - (ab2 + killAB) * prevB[y][x];
// Clamp values
A[y][x] = Math.max(0, Math.min(1, A[y][x]));
B[y][x] = Math.max(0, Math.min(1, B[y][x]));
}
}
t++;
}
function draw() {
ctx.fillStyle = 'rgba(10, 10, 10, 0.05)';
ctx.fillRect(0, 0, W, H);
const centerX = W / 2;
const centerY = H / 2;
for (let y = 0; y < gridSize; y++) {
for (let x = 0; x < gridSize; x++) {
const valA = A[y][x];
const valB = B[y][x];
const intensity = (valA - valB) * 0.5 + 0.5;
if (intensity > 0.1) {
const sizeMod = params.complexity * 5 + 2;
const xPos = centerX + (x - gridSize/2) * cellWidth * 1.1;
const yPos = centerY + (y - gridSize/2) * cellHeight * 1.1;
ctx.beginPath();
ctx.arc(
xPos + Math.sin(t * 0.01 + x * 0.1) * 2 * params.motion,
yPos + Math.cos(t * 0.01 + y * 0.1) * 2 * params.motion,
sizeMod * intensity * 0.8,
0,
Math.PI * 2
);
ctx.fillStyle = `hsl(0, 0%, ${params.dryness > 0.5 ? 80 * intensity : 30 + 50 * intensity}%)`;
ctx.fill();
}
}
}
}
function animate() {
update();
draw();
requestAnimationFrame(animate);
}
initGrid();
animate();
</script>
</body>
</html>