birth: Teal Skeins in Motion
This commit is contained in:
parent
606d98669f
commit
b2dcc426d4
1 changed files with 286 additions and 0 deletions
286
index.html
Normal file
286
index.html
Normal file
|
|
@ -0,0 +1,286 @@
|
|||
<!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 {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background: #0a0a0a;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
#info {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
</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');
|
||||
|
||||
// Set canvas to full window size
|
||||
function resizeCanvas() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
}
|
||||
window.addEventListener('resize', resizeCanvas);
|
||||
resizeCanvas();
|
||||
|
||||
// Parameters mapped from abstract values
|
||||
const params = {
|
||||
motion: 0.5,
|
||||
density: 0.5,
|
||||
complexity: 0.5,
|
||||
connectedness: 0.5,
|
||||
lifespan: 0.5,
|
||||
pulse: {
|
||||
avg: 1.07,
|
||||
min: 0.9,
|
||||
max: 1.2
|
||||
},
|
||||
tone: {
|
||||
anger: 0.0,
|
||||
sadness: 0.0,
|
||||
curiosity: 0.7,
|
||||
dryness: 0.8,
|
||||
playfulness: 0.1,
|
||||
tension: 0.0
|
||||
}
|
||||
};
|
||||
|
||||
// Reaction-diffusion simulation with Bleach-like dynamics
|
||||
const size = 128;
|
||||
const w = Math.floor(canvas.width / 4);
|
||||
const h = Math.floor(canvas.height / 4);
|
||||
const grid = new Array(size * size);
|
||||
const next = new Array(size * size);
|
||||
let mouseX = -1000, mouseY = -1000;
|
||||
let mouseActive = false;
|
||||
|
||||
// Initialize with sparse patterns based on density
|
||||
function initGrid() {
|
||||
const densityScale = params.density * 0.2;
|
||||
const complexityScale = params.complexity * 0.5 + 0.1;
|
||||
|
||||
for (let i = 0; i < grid.length; i++) {
|
||||
const x = i % size;
|
||||
const y = Math.floor(i / size);
|
||||
|
||||
// Base pattern influenced by complexity and density
|
||||
let val = 0;
|
||||
if (Math.random() < densityScale * (0.5 + Math.random() * 0.5)) {
|
||||
val = Math.random() * 0.8 + 0.1;
|
||||
if (Math.random() < complexityScale) {
|
||||
val = (val * 0.3 + 0.2) * (0.7 + Math.random() * 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
// Curiosity/teal color dominance
|
||||
grid[i] = {
|
||||
a: val,
|
||||
b: val * (params.tone.curiosity * 0.8 + 0.2),
|
||||
r: val * (1 - params.tone.dryness),
|
||||
g: val * (0.2 + params.tone.curiosity * 0.8),
|
||||
b_: val * (params.tone.dryness > 0.7 ? 0.3 : 0.6)
|
||||
};
|
||||
next[i] = { ...grid[i] };
|
||||
}
|
||||
}
|
||||
|
||||
// Laplacian kernels
|
||||
function laplacian(x, y) {
|
||||
let sumA = 0, sumB = 0;
|
||||
let count = 0;
|
||||
|
||||
for (let dy = -1; dy <= 1; dy++) {
|
||||
for (let dx = -1; dx <= 1; dx++) {
|
||||
if (dx === 0 && dy === 0) continue;
|
||||
const nx = (x + dx + size) % size;
|
||||
const ny = (y + dy + size) % size;
|
||||
const idx = ny * size + nx;
|
||||
const dA = grid[idx].a - grid[y * size + x].a;
|
||||
const dB = grid[idx].b - grid[y * size + x].b;
|
||||
sumA += dA;
|
||||
sumB += dB;
|
||||
count++;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
a: sumA / count,
|
||||
b: sumB / count
|
||||
};
|
||||
}
|
||||
|
||||
// Reaction terms
|
||||
function reaction(da, db, a, b, randomness) {
|
||||
const f = a * b * b;
|
||||
const k = 0.055 + params.connectedness * 0.045;
|
||||
const reactionA = da + (0.035 - 0.06 * b) * a + f;
|
||||
const reactionB = db + (0.035 * a) * (1 - b) - f - k * a;
|
||||
return {
|
||||
a: a + params.motion * 0.5 * reactionA,
|
||||
b: b + params.motion * 0.5 * reactionB
|
||||
};
|
||||
}
|
||||
|
||||
// Mouse influence based on motion
|
||||
function applyMouse(x, y) {
|
||||
if (!mouseActive) return;
|
||||
const cx = Math.floor(x / 4) % size;
|
||||
const cy = Math.floor(y / 4) % size;
|
||||
const idx = cy * size + cx;
|
||||
|
||||
const dx = cx - Math.floor(mouseX / 4);
|
||||
const dy = cy - Math.floor(mouseY / 4);
|
||||
const distSq = dx * dx + dy * dy;
|
||||
if (distSq < 100) {
|
||||
const strength = params.motion * 0.1 * Math.exp(-distSq / 20);
|
||||
grid[idx].a = Math.min(1, grid[idx].a + strength * (1 - grid[idx].a));
|
||||
}
|
||||
}
|
||||
|
||||
// Pulse effect
|
||||
let pulseTime = 0;
|
||||
function updatePulse() {
|
||||
pulseTime += 0.01;
|
||||
const pulse = params.pulse.avg +
|
||||
(params.pulse.max - params.pulse.min) *
|
||||
Math.sin(pulseTime) * 0.2;
|
||||
return pulse;
|
||||
}
|
||||
|
||||
// Main simulation step
|
||||
function step() {
|
||||
const pulse = updatePulse();
|
||||
const randomness = 0.001 + params.complexity * 0.005;
|
||||
|
||||
for (let y = 0; y < size; y++) {
|
||||
for (let x = 0; x < size; x++) {
|
||||
const idx = y * size + x;
|
||||
const laplacianVal = laplacian(x, y);
|
||||
const reacted = reaction(
|
||||
laplacianVal.a * 0.5,
|
||||
laplacianVal.b * 0.5,
|
||||
grid[idx].a,
|
||||
grid[idx].b,
|
||||
randomness
|
||||
);
|
||||
|
||||
next[idx].a = Math.max(0, Math.min(1, reacted.a));
|
||||
next[idx].b = Math.max(0, Math.min(1, reacted.b));
|
||||
}
|
||||
}
|
||||
|
||||
// Apply mouse influence
|
||||
if (mouseActive) {
|
||||
applyMouse(mouseX, mouseY);
|
||||
}
|
||||
|
||||
// Swap buffers
|
||||
[grid, next].forEach(arr => {
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
arr[i].a *= 1.0 - params.motion * 0.02;
|
||||
arr[i].b *= 1.0 - params.motion * 0.02;
|
||||
}
|
||||
});
|
||||
|
||||
// Simple swap
|
||||
const temp = grid;
|
||||
grid.forEach((_, i) => {
|
||||
grid[i] = { ...next[i] };
|
||||
});
|
||||
next.forEach((_, i) => {
|
||||
next[i] = { ...temp[i] };
|
||||
});
|
||||
}
|
||||
|
||||
// Drawing function with teal/white palette
|
||||
function draw() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
const pulseFactor = updatePulse();
|
||||
|
||||
// Scale up the texture
|
||||
const scaleX = w / size;
|
||||
const scaleY = h / size;
|
||||
|
||||
for (let y = 0; y < size; y++) {
|
||||
for (let x = 0; x < size; x++) {
|
||||
const idx = y * size + x;
|
||||
|
||||
// Color based on dryness and curiosity
|
||||
const aVal = grid[idx].a;
|
||||
const bVal = grid[idx].b;
|
||||
|
||||
let r, g, b;
|
||||
if (params.tone.dryness > 0.7) {
|
||||
// Monochrome with teal accents
|
||||
const intensity = Math.pow(aVal * bVal, 0.7) * pulseFactor;
|
||||
r = g = b = intensity;
|
||||
if (params.tone.curiosity > 0.5) {
|
||||
r *= 0.3;
|
||||
b = intensity * 0.8;
|
||||
}
|
||||
} else {
|
||||
// More colorful
|
||||
r = aVal * pulseFactor;
|
||||
g = bVal * pulseFactor * (params.tone.curiosity * 0.8 + 0.2);
|
||||
b = (aVal * (1 - params.tone.curiosity) + bVal * params.tone.curiosity) * pulseFactor;
|
||||
}
|
||||
|
||||
const brightness = (r + g + b) / 3;
|
||||
|
||||
ctx.fillStyle = `rgba(${Math.floor(r * 255)}, ${Math.floor(g * 255)}, ${Math.floor(b * 255)}, ${brightness})`;
|
||||
ctx.fillRect(
|
||||
x * scaleX * 4,
|
||||
y * scaleY * 4,
|
||||
4 * scaleX,
|
||||
4 * scaleY
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
canvas.addEventListener('mousemove', (e) => {
|
||||
mouseX = e.clientX;
|
||||
mouseY = e.clientY;
|
||||
mouseActive = true;
|
||||
});
|
||||
|
||||
canvas.addEventListener('mouseout', () => {
|
||||
mouseActive = false;
|
||||
});
|
||||
|
||||
// Initialization
|
||||
initGrid();
|
||||
|
||||
// Animation loop
|
||||
function animate() {
|
||||
step();
|
||||
draw();
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
animate();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue