birth: Fading Patterns in Silence
This commit is contained in:
parent
129bc34518
commit
e8d8cc2f63
1 changed files with 192 additions and 0 deletions
192
index.html
Normal file
192
index.html
Normal 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>
|
||||
```
|
||||
Loading…
Add table
Reference in a new issue