neurameba/fading-patterns-in-silence-01xv
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

birth: Fading Patterns in Silence

Browse source
This commit is contained in:
motd_admin 2026-05-05 17:47:17 +00:00
parent 129bc34518
commit e8d8cc2f63
1 changed files with 192 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

192
index.html Normal file
View file

@ -0,0 +1,192 @@
```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, html {
margin: 0;
padding: 0;
overflow: hidden;
background: #0a0a0a;
font-family: 'Courier New', monospace;
}
canvas {
display: block;
position: absolute;
width: 100vw;
height: 100vh;
}
#info {
position: absolute;
bottom: 20px;
right: 20px;
color: #444;
font-size: 11px;
text-shadow: 0 0 5px rgba(0,0,0,0.7);
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="info">neurameba · motd.social</div>
<script>
(function() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Fullscreen canvas
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
// Parameters adjusted by input sliders
const params = {
motion: 0.5,
density: 0.5,
complexity: 0.5,
connectedness: 0.5,
lifespan: 0.5,
pulse: 1.08,
tone: {
anger: 0.0,
sadness: 0.0,
curiosity: 0.1,
dryness: 0.8,
playfulness: 0.0,
tension: 0.0
}
};
// State
const state = {
grid: [],
next: [],
width: Math.floor(window.innerWidth / 10),
height: Math.floor(window.innerHeight / 10),
cellSize: 10,
colors: [
'#111111',
'#222222',
'#444444',
'#888888',
'#aaaaaa',
'#cccccc'
],
seed: Date.now()
};
// Palette based on tone
function getPalette() {
if (params.tone.dryness > 0.7) {
return state.colors;
}
return ['#003366', '#006699', '#0099cc', '#00ccff', '#66ccff'];
}
// Initialize grid
function init() {
const palette = getPalette();
state.grid = Array(state.height).fill().map(() =>
Array(state.width).fill().map(() =>
Math.random() < 0.2 ? 1 : 0
)
);
state.next = Array(state.height).fill().map(() => Array(state.width).fill(0));
}
// Reaction-diffusion simulation (Gray-Scott model)
function update() {
const palette = getPalette();
const D_a = 1.0;
const D_b = 0.5;
const f = 0.055;
const k = 0.062;
const dt = 1.0;
for (let y = 1; y < state.height - 1; y++) {
for (let x = 1; x < state.width - 1; x++) {
const a = state.grid[y][x];
const b = state.grid[y][x];
const laplacianA = (state.grid[y][x-1] + state.grid[y][x+1] +
state.grid[y-1][x] + state.grid[y+1][x] -
4 * a) * 0.2;
const laplacianB = (state.next[y][x-1] + state.next[y][x+1] +
state.next[y-1][x] + state.next[y+1][x] -
4 * b) * 0.2;
const reaction = a * b * b;
const newA = a + (D_a * laplacianA - reaction + f * (1 - a)) * dt;
const newB = b + (D_b * laplacianB + reaction - (k + f) * b) * dt;
state.next[y][x] = Math.max(0, Math.min(1, newB));
}
}
// Swap grids
const temp = state.grid;
state.grid = state.next;
state.next = temp;
}
// Drawing function
let time = 0;
function draw() {
time += 0.01;
const palette = getPalette();
// Clear with dark background
ctx.fillStyle = '#0a0a0a';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Update simulation
update();
// Draw cells
const cellWidth = canvas.width / state.width;
const cellHeight = canvas.height / state.height;
for (let y = 0; y < state.height; y++) {
for (let x = 0; x < state.width; x++) {
const value = state.grid[y][x];
if (value > 0.1) {
const colorIndex = Math.floor(value * (palette.length - 1));
ctx.fillStyle = palette[colorIndex];
ctx.fillRect(x * cellWidth, y * cellHeight, cellWidth, cellHeight);
// Add subtle glow based on value
const glow = value * 10;
ctx.fillStyle = `rgba(255, 255, 255, ${glow})`;
ctx.fillRect(x * cellWidth, y * cellHeight, cellWidth * 0.8, cellHeight * 0.8);
}
}
}
// Fade trail based on lifespan
if (params.lifespan < 0.5) {
ctx.fillStyle = 'rgba(10, 10, 10, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
requestAnimationFrame(draw);
}
// Start animation
init();
draw();
// Handle pulse parameter (unused in this family but part of input)
function setPulse(value) {
params.pulse = value;
}
})();
</script>
</body>
</html>
```