192 lines
No EOL
6.4 KiB
HTML
192 lines
No EOL
6.4 KiB
HTML
```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>
|
|
``` |