157 lines
No EOL
5 KiB
HTML
157 lines
No EOL
5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Diffusive Gestures</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
background: #000;
|
|
color: #fff;
|
|
font-family: monospace;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
}
|
|
canvas {
|
|
flex: 1;
|
|
}
|
|
#attribution {
|
|
text-align: center;
|
|
padding: 8px;
|
|
font-size: 10px;
|
|
opacity: 0.7;
|
|
}
|
|
</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();
|
|
|
|
// Parameters mapped from generative art builder inputs
|
|
const params = {
|
|
motion: 0.5,
|
|
density: 0.5,
|
|
complexity: 0.5,
|
|
connectedness: 0.5,
|
|
lifespan: 0.5,
|
|
pulse: { avg: 1.1, min: 1.0, max: 1.2 },
|
|
tone: { anger: 0.0, sadness: 0.0, curiosity: 0.1, dryness: 0.9, playfulness: 0.0, tension: 0.0 }
|
|
};
|
|
|
|
// Reaction-diffusion simulation
|
|
const size = 128;
|
|
const grid = Array.from({ length: size }, () =>
|
|
Array.from({ length: size }, () => ({
|
|
a: 1.0,
|
|
b: 0.0,
|
|
tempA: 0,
|
|
tempB: 0
|
|
}))
|
|
);
|
|
|
|
// Reaction parameters tuned to generative input
|
|
const Da = 0.16;
|
|
const Db = 0.08;
|
|
const feed = 0.055 + (params.motion * 0.02);
|
|
const kill = 0.062 - (params.connectedness * 0.02);
|
|
const iterations = 3 + Math.floor(params.complexity * 5);
|
|
|
|
// Color palette from tone analysis
|
|
const bgColor = '#0a0a0a';
|
|
const color1 = '#dddddd';
|
|
const color2 = '#aaaaaa';
|
|
|
|
function init() {
|
|
for (let y = 0; y < size; y++) {
|
|
for (let x = 0; x < size; x++) {
|
|
grid[y][x].a = 1.0;
|
|
grid[y][x].b = 0.0;
|
|
}
|
|
}
|
|
|
|
// Add initial patterns based on density
|
|
const count = Math.floor(50 + params.density * 200);
|
|
for (let i = 0; i < count; i++) {
|
|
const x = Math.floor(Math.random() * size);
|
|
const y = Math.floor(Math.random() * size);
|
|
grid[y][x].b = 1.0;
|
|
}
|
|
}
|
|
|
|
function update() {
|
|
for (let iter = 0; iter < iterations; iter++) {
|
|
for (let y = 1; y < size - 1; y++) {
|
|
for (let x = 1; x < size - 1; x++) {
|
|
const cell = grid[y][x];
|
|
const a = cell.a;
|
|
const b = cell.b;
|
|
|
|
// Laplacian diffusion
|
|
cell.tempA = a +
|
|
(Da * (grid[y-1][x].a + grid[y+1][x].a + grid[y][x-1].a + grid[y][x+1].a - 4*a));
|
|
cell.tempB = b +
|
|
(Db * (grid[y-1][x].b + grid[y+1][x].b + grid[y][x-1].b + grid[y][x+1].b - 4*b));
|
|
|
|
// Reaction
|
|
cell.tempA += cell.tempA * (1 - cell.tempA) * feed - cell.tempB * cell.tempA;
|
|
cell.tempB += cell.tempA * cell.tempB * cell.tempB - (feed + kill) * cell.tempB;
|
|
}
|
|
}
|
|
|
|
// Swap buffers
|
|
for (let y = 0; y < size; y++) {
|
|
for (let x = 0; x < size; x++) {
|
|
grid[y][x].a = grid[y][x].tempA;
|
|
grid[y][x].b = grid[y][x].tempB;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function draw() {
|
|
const imageData = ctx.createImageData(canvas.width, canvas.height);
|
|
const data = imageData.data;
|
|
|
|
const scaleX = canvas.width / size;
|
|
const scaleY = canvas.height / size;
|
|
|
|
for (let y = 0; y < size; y++) {
|
|
for (let x = 0; x < size; x++) {
|
|
const cell = grid[y][x];
|
|
const idx = (y * size + x) * 4;
|
|
|
|
// Color mapping based on tone (dryness = monochrome)
|
|
const intensity = Math.max(0, Math.min(1, cell.b * 0.8));
|
|
data[idx] = data[idx+1] = data[idx+2] = Math.floor(255 * intensity);
|
|
data[idx+3] = 255;
|
|
}
|
|
}
|
|
|
|
ctx.putImageData(imageData, 0, 0);
|
|
}
|
|
|
|
function animate() {
|
|
update();
|
|
draw();
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
init();
|
|
animate();
|
|
</script>
|
|
</body>
|
|
</html> |