birth: Rust Red Patterns
This commit is contained in:
parent
8c4242a156
commit
59223eb6d6
1 changed files with 166 additions and 0 deletions
166
index.html
Normal file
166
index.html
Normal file
|
|
@ -0,0 +1,166 @@
|
|||
<!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>
|
||||
Loading…
Add table
Reference in a new issue