173 lines
No EOL
5.7 KiB
HTML
173 lines
No EOL
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Diffuse Pulse</title>
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: #000;
|
|
overflow: hidden;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-family: monospace;
|
|
}
|
|
canvas {
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
#info {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
left: 20px;
|
|
color: rgba(255,255,255,0.6);
|
|
font-size: 11px;
|
|
text-shadow: 0 0 5px rgba(0,0,0,0.8);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="canvas"></canvas>
|
|
<div id="info">neurameba · motd.social</div>
|
|
<script>
|
|
const canvas = document.getElementById('canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
function resize() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
window.addEventListener('resize', resize);
|
|
resize();
|
|
|
|
// Parameters derived from prompt
|
|
const params = {
|
|
motion: 0.531,
|
|
density: 0.502,
|
|
complexity: 0.474,
|
|
connectedness: 0.448,
|
|
lifespan: 0.496,
|
|
pulse: { avg: 0.59, min: 0.30, max: 2.00 },
|
|
tone: { sadness: 0.00, anger: 0.00, curiosity: 0.30, dryness: 0.80, playfulness: 0.00, tension: 0.00 }
|
|
};
|
|
|
|
// Reaction-diffusion parameters
|
|
const D_A = 0.2 + params.motion * 0.8; // Diffusion rate of A
|
|
const D_B = 0.2 + params.motion * 0.8; // Diffusion rate of B
|
|
const feed = 0.036 + params.pulse.avg * 0.02; // Feed rate
|
|
const kill = 0.06 + params.pulse.avg * 0.04; // Kill rate
|
|
const timeStep = 0.1;
|
|
const scale = 8 / (1 + params.density * 3); // Grid scale
|
|
|
|
// Initialize grid
|
|
const rows = Math.floor(canvas.height / scale) + 2;
|
|
const cols = Math.floor(canvas.width / scale) + 2;
|
|
let grid = Array(rows).fill().map(() =>
|
|
Array(cols).fill().map(() =>
|
|
[Math.random(), Math.random()]
|
|
)
|
|
);
|
|
|
|
let nextGrid = JSON.parse(JSON.stringify(grid));
|
|
let pulseTimer = 0;
|
|
let pulseActive = false;
|
|
let pulseX = 0, pulseY = 0;
|
|
|
|
function update() {
|
|
// Random pulse
|
|
pulseTimer += params.pulse.avg * 0.01;
|
|
if (pulseTimer > 1 && !pulseActive && Math.random() < 0.02) {
|
|
pulseActive = true;
|
|
pulseX = Math.floor(Math.random() * cols);
|
|
pulseY = Math.floor(Math.random() * rows);
|
|
}
|
|
|
|
for (let y = 1; y < rows - 1; y++) {
|
|
for (let x = 1; x < cols - 1; x++) {
|
|
let a = grid[y][x][0];
|
|
let b = grid[y][x][1];
|
|
|
|
// Apply pulse influence
|
|
if (pulseActive && x === pulseX && y === pulseY) {
|
|
a += 0.2;
|
|
b += 0.1;
|
|
}
|
|
|
|
// Reaction term
|
|
const reaction = a * b * b;
|
|
const newA = a + (D_A * laplacianA(x, y) - reaction + feed * (1 - a)) * timeStep;
|
|
const newB = b + (D_B * laplacianB(x, y) + reaction - (kill + feed) * b) * timeStep;
|
|
|
|
nextGrid[y][x][0] = Math.max(0, Math.min(1, newA));
|
|
nextGrid[y][x][1] = Math.max(0, Math.min(1, newB));
|
|
}
|
|
}
|
|
|
|
// Swap grids
|
|
[grid, nextGrid] = [nextGrid, grid];
|
|
if (pulseActive) pulseActive = false;
|
|
|
|
// Draw
|
|
ctx.fillStyle = 'rgba(10,10,10,0.05)';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
for (let y = 1; y < rows - 1; y++) {
|
|
for (let x = 1; x < cols - 1; x++) {
|
|
const a = grid[y][x][0];
|
|
const b = grid[y][x][1];
|
|
const val = (a - b + 1) / 2; // Output value
|
|
|
|
if (val > 0.1) {
|
|
const size = scale * 0.8;
|
|
const hue = 180 + val * 60; // Teal tones
|
|
const saturation = 30 + val * 20;
|
|
const lightness = 20 + val * 15;
|
|
const alpha = 0.5 + val * 0.5;
|
|
|
|
ctx.fillStyle = `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
|
|
ctx.fillRect(x * scale, y * scale, size, size);
|
|
}
|
|
}
|
|
}
|
|
|
|
requestAnimationFrame(update);
|
|
}
|
|
|
|
function laplacianA(x, y) {
|
|
let sum = 0;
|
|
sum += grid[y-1][x][0] * 0.05;
|
|
sum += grid[y+1][x][0] * 0.05;
|
|
sum += grid[y][x-1][0] * 0.05;
|
|
sum += grid[y][x+1][0] * 0.05;
|
|
sum += grid[y-1][x-1][0] * 0.02;
|
|
sum += grid[y+1][x+1][0] * 0.02;
|
|
sum += grid[y-1][x+1][0] * 0.02;
|
|
sum += grid[y+1][x-1][0] * 0.02;
|
|
sum += grid[y][x][0] * -1;
|
|
return sum;
|
|
}
|
|
|
|
function laplacianB(x, y) {
|
|
let sum = 0;
|
|
sum += grid[y-1][x][1] * 0.05;
|
|
sum += grid[y+1][x][1] * 0.05;
|
|
sum += grid[y][x-1][1] * 0.05;
|
|
sum += grid[y][x+1][1] * 0.05;
|
|
sum += grid[y-1][x-1][1] * 0.02;
|
|
sum += grid[y+1][x+1][1] * 0.02;
|
|
sum += grid[y-1][x+1][1] * 0.02;
|
|
sum += grid[y+1][x-1][1] * 0.02;
|
|
sum += grid[y][x][1] * -1;
|
|
return sum;
|
|
}
|
|
|
|
update();
|
|
</script>
|
|
</body>
|
|
</html> |