166 lines
No EOL
5.7 KiB
HTML
166 lines
No EOL
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Diffused Echoes</title>
|
|
<style>
|
|
body { margin: 0; overflow: hidden; background: #000; color: #fff; font-family: monospace; }
|
|
canvas { display: block; }
|
|
#attribution { position: absolute; bottom: 10px; right: 10px; font-size: 10px; opacity: 0.5; }
|
|
</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');
|
|
|
|
function resize() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
window.addEventListener('resize', resize);
|
|
resize();
|
|
|
|
// Parameters
|
|
const params = {
|
|
motion: 0.5,
|
|
density: 0.5,
|
|
complexity: 0.5,
|
|
connectedness: 0.5,
|
|
lifespan: 0.5,
|
|
pulse: { avg: 1.25, min: 1.0, max: 1.55 },
|
|
tone: { anger: 0.0, sadness: 0.0, curiosity: 0.1, dryness: 0.9, playfulness: 0.0, tension: 0.0 }
|
|
};
|
|
|
|
// Simulation parameters
|
|
const gridSize = 64;
|
|
const cellSize = Math.max(1, Math.min(2, Math.floor(Math.min(canvas.width, canvas.height) / gridSize)));
|
|
|
|
const cols = Math.floor(canvas.width / cellSize);
|
|
const rows = Math.floor(canvas.height / cellSize);
|
|
|
|
// Reaction-diffusion parameters (Gray-Scott model adapted)
|
|
let U = new Array(cols * rows).fill(0.5);
|
|
let V = new Array(cols * rows).fill(0.25);
|
|
let U_prev = new Array(cols * rows).fill(0);
|
|
let V_prev = new Array(cols * rows).fill(0);
|
|
|
|
// Initialize with random patterns
|
|
for (let i = 0; i < cols * rows; i++) {
|
|
U[i] = 0.5 + (Math.random() * 0.1 - 0.05);
|
|
V[i] = 0.25 + (Math.random() * 0.1 - 0.05);
|
|
}
|
|
|
|
// Flow field influence
|
|
let flowField = new Array(cols * rows).fill(0);
|
|
let flowTime = 0;
|
|
|
|
function initFlowField() {
|
|
for (let i = 0; i < cols * rows; i++) {
|
|
const x = i % cols;
|
|
const y = Math.floor(i / cols);
|
|
flowField[i] = Math.random() * Math.PI * 2;
|
|
}
|
|
}
|
|
initFlowField();
|
|
|
|
function updateFlowField() {
|
|
flowTime += 0.005 * (params.pulse.avg * 1.5);
|
|
for (let i = 0; i < cols * rows; i++) {
|
|
const x = i % cols;
|
|
const y = Math.floor(i / cols);
|
|
|
|
// Perlin-like flow
|
|
const nx = x / cols;
|
|
const ny = y / rows;
|
|
const angle = (Math.sin(nx * 10 + flowTime) * Math.cos(ny * 10 + flowTime)) * Math.PI * 0.5;
|
|
flowField[i] = angle;
|
|
}
|
|
}
|
|
|
|
function step() {
|
|
updateFlowField();
|
|
|
|
// Apply flow field influence
|
|
for (let i = 0; i < cols * rows; i++) {
|
|
const x = i % cols;
|
|
const y = Math.floor(i / cols);
|
|
|
|
let newU = U[i];
|
|
let newV = V[i];
|
|
|
|
// Neighborhood in flow direction
|
|
const angle = flowField[i];
|
|
const dx = Math.cos(angle);
|
|
const dy = Math.sin(angle);
|
|
|
|
const nx1 = Math.floor(x + dx * 1.5);
|
|
const ny1 = Math.floor(y + dy * 1.5);
|
|
const idx1 = Math.max(0, Math.min(cols-1, nx1)) + Math.max(0, Math.min(rows-1, ny1)) * cols;
|
|
|
|
// Gray-Scott reaction
|
|
const du = 0.16 * U[idx1] * V[idx1] * V[idx1];
|
|
const dv = 0.16 * U[idx1] * V[idx1] * V[idx1] - 0.08 * V[idx1];
|
|
|
|
newU -= du;
|
|
newV += dv;
|
|
|
|
// Diffusion
|
|
if (x > 0) newU += 0.05 * (U_prev[i - 1] - U_prev[i]);
|
|
if (x < cols - 1) newU += 0.05 * (U_prev[i + 1] - U_prev[i]);
|
|
if (y > 0) newU += 0.05 * (U_prev[i - cols] - U_prev[i]);
|
|
if (y < rows - 1) newU += 0.05 * (U_prev[i + cols] - U_prev[i]);
|
|
|
|
if (x > 0) newV += 0.05 * (V_prev[i - 1] - V_prev[i]);
|
|
if (x < cols - 1) newV += 0.05 * (V_prev[i + 1] - V_prev[i]);
|
|
if (y > 0) newV += 0.05 * (V_prev[i - cols] - V_prev[i]);
|
|
if (y < rows - 1) newV += 0.05 * (V_prev[i + cols] - V_prev[i]);
|
|
|
|
// Boundary conditions
|
|
newU = Math.max(0, Math.min(1, newU));
|
|
newV = Math.max(0, Math.min(1, newV));
|
|
|
|
U[i] = newU;
|
|
V[i] = newV;
|
|
}
|
|
|
|
// Swap buffers
|
|
[U_prev, U] = [U, U_prev];
|
|
[V_prev, V] = [V, V_prev];
|
|
}
|
|
|
|
function draw() {
|
|
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
const scale = 255 * params.tone.dryness;
|
|
|
|
for (let y = 0; y < rows; y++) {
|
|
for (let x = 0; x < cols; x++) {
|
|
const i = x + y * cols;
|
|
|
|
// Use V (activator) for color - creates organic patterns
|
|
let intensity = V[i];
|
|
intensity = Math.pow(intensity, 0.7) * scale;
|
|
|
|
if (intensity > 5) {
|
|
const hue = 0; // Red channel only for dryness
|
|
ctx.fillStyle = `rgb(${intensity}, ${intensity * 0.1}, ${intensity * 0.1})`;
|
|
ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function animate() {
|
|
step();
|
|
draw();
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
animate();
|
|
</script>
|
|
</body>
|
|
</html> |