164 lines
No EOL
5.2 KiB
HTML
164 lines
No EOL
5.2 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>
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background: #121212;
|
|
font-family: monospace;
|
|
}
|
|
canvas {
|
|
display: block;
|
|
}
|
|
#attribution {
|
|
position: fixed;
|
|
bottom: 10px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: rgba(255, 255, 255, 0.3);
|
|
font-size: 10px;
|
|
pointer-events: none;
|
|
text-align: center;
|
|
}
|
|
</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();
|
|
|
|
// Reaction-diffusion parameters based on input
|
|
const params = {
|
|
motion: 0.5,
|
|
density: 0.5,
|
|
complexity: 0.5,
|
|
connectedness: 0.5,
|
|
lifespan: 0.5,
|
|
pulse: { avg: 1.11, min: 0.95, max: 1.30 },
|
|
tone: {
|
|
anger: 0.00,
|
|
sadness: 0.00,
|
|
curiosity: 0.10,
|
|
dryness: 0.90,
|
|
playfulness: 0.00,
|
|
tension: 0.00
|
|
}
|
|
};
|
|
|
|
// Scaled parameters for reaction-diffusion
|
|
const k = 0.055 + (params.complexity * 0.03); // feed rate
|
|
const f = 0.051 + (params.connectedness * 0.02); // kill rate
|
|
const scale = 1.5 + (params.motion * 3); // diffusion rate
|
|
const density = 0.4 + (params.density * 0.3); // initial density
|
|
|
|
// Color based on tone
|
|
const r = Math.floor(255 * (0.3 + params.tone.anger * 0.7));
|
|
const g = Math.floor(255 * (0.3 + params.tone.sadness * 0.7));
|
|
const b = Math.floor(255 * (0.3 + params.tone.curiosity * 0.7));
|
|
|
|
// Main reaction-diffusion grid
|
|
const size = Math.min(canvas.width, canvas.height) / 2;
|
|
const grid = {
|
|
current: new Array(size * size).fill(0),
|
|
next: new Array(size * size).fill(0)
|
|
};
|
|
|
|
// Initialize grid
|
|
function initGrid() {
|
|
for (let i = 0; i < size * size; i++) {
|
|
grid.current[i] = Math.random() < density ? 1 : 0;
|
|
}
|
|
}
|
|
|
|
// Update grid
|
|
function updateGrid() {
|
|
const { current, next } = grid;
|
|
const seed = Math.random();
|
|
|
|
for (let y = 1; y < size - 1; y++) {
|
|
for (let x = 1; x < size - 1; x++) {
|
|
const idx = x + y * size;
|
|
|
|
// Neighborhood checks
|
|
const tl = current[idx - size - 1];
|
|
const t = current[idx - size];
|
|
const tr = current[idx - size + 1];
|
|
const l = current[idx - 1];
|
|
const r = current[idx + 1];
|
|
const bl = current[idx + size - 1];
|
|
const b = current[idx + size];
|
|
const br = current[idx + size + 1];
|
|
|
|
const count = tl + t + tr + l + r + bl + b + br;
|
|
|
|
// Reaction-diffusion equation
|
|
next[idx] = current[idx] +
|
|
(scale * (l + r + t + b - 4 * current[idx])) +
|
|
(current[idx] * (k - (current[idx] + 1) * f) +
|
|
(1 - current[idx]) * f * (1 + params.pulse.avg * 0.1));
|
|
|
|
// Clamp values
|
|
next[idx] = Math.max(0, Math.min(1, next[idx]));
|
|
}
|
|
}
|
|
|
|
// Swap grids
|
|
[grid.current, grid.next] = [grid.next, grid.current];
|
|
}
|
|
|
|
// Draw grid
|
|
function drawGrid() {
|
|
const imageData = ctx.createImageData(canvas.width, canvas.height);
|
|
const data = imageData.data;
|
|
|
|
for (let y = 0; y < size; y++) {
|
|
for (let x = 0; x < size; x++) {
|
|
const idx = x + y * size;
|
|
const val = grid.current[idx];
|
|
|
|
if (val > 0.1) {
|
|
const bright = Math.min(255, Math.floor(val * 255 * 2));
|
|
const pixelIdx = (x + (y - size/2) * canvas.width) * 4;
|
|
|
|
data[pixelIdx] = r;
|
|
data[pixelIdx + 1] = g;
|
|
data[pixelIdx + 2] = b;
|
|
data[pixelIdx + 3] = bright;
|
|
}
|
|
}
|
|
}
|
|
|
|
ctx.putImageData(imageData, 0, 0);
|
|
}
|
|
|
|
// Animation loop
|
|
function animate() {
|
|
updateGrid();
|
|
drawGrid();
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
initGrid();
|
|
animate();
|
|
</script>
|
|
</body>
|
|
</html>
|
|
``` |