birth: Hexagonal Pulse Fields
This commit is contained in:
parent
f56def48f7
commit
42b1cb77f6
1 changed files with 197 additions and 0 deletions
197
index.html
Normal file
197
index.html
Normal file
|
|
@ -0,0 +1,197 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Generative Tessellation</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #000;
|
||||||
|
font-family: 'Courier New', monospace;
|
||||||
|
}
|
||||||
|
canvas {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
#attribution {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10px;
|
||||||
|
right: 10px;
|
||||||
|
color: #333;
|
||||||
|
font-size: 10px;
|
||||||
|
mix-blend-mode: difference;
|
||||||
|
}
|
||||||
|
</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 resizeCanvas() {
|
||||||
|
canvas.width = window.innerWidth;
|
||||||
|
canvas.height = window.innerHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('resize', resizeCanvas);
|
||||||
|
resizeCanvas();
|
||||||
|
|
||||||
|
// Parameters derived from input
|
||||||
|
const params = {
|
||||||
|
motion: 0.5,
|
||||||
|
density: 0.5,
|
||||||
|
complexity: 0.5,
|
||||||
|
connectedness: 0.5,
|
||||||
|
lifespan: 0.5,
|
||||||
|
pulse_avg: 1.16,
|
||||||
|
pulse_min: 0.3,
|
||||||
|
pulse_max: 2.0,
|
||||||
|
dryness: 0.9
|
||||||
|
};
|
||||||
|
|
||||||
|
// Generate palette based on tone parameters
|
||||||
|
const palette = {
|
||||||
|
bg: '#000000',
|
||||||
|
fg: params.dryness > 0.8 ? '#333333' : '#cccccc',
|
||||||
|
accent: '#888888'
|
||||||
|
};
|
||||||
|
|
||||||
|
// Tessellation system
|
||||||
|
const cells = [];
|
||||||
|
const cellSize = 20 + (15 * params.density);
|
||||||
|
const cols = Math.ceil(canvas.width / cellSize);
|
||||||
|
const rows = Math.ceil(canvas.height / cellSize);
|
||||||
|
|
||||||
|
// Initialize hexagonal grid
|
||||||
|
for (let y = 0; y < rows; y++) {
|
||||||
|
for (let x = 0; x < cols; x++) {
|
||||||
|
cells.push({
|
||||||
|
x: x * cellSize * 1.5,
|
||||||
|
y: y * cellSize * Math.sqrt(3),
|
||||||
|
state: Math.random() < 0.5 ? 0 : 1,
|
||||||
|
targetState: 0,
|
||||||
|
neighbors: [],
|
||||||
|
size: cellSize * (0.5 + Math.random() * 0.5)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Connect neighbors
|
||||||
|
cells.forEach(cell => {
|
||||||
|
const neighborOffsets = [
|
||||||
|
[-1, 0], [1, 0], [0, -1], [0, 1],
|
||||||
|
[-1, -1], [1, -1], [-1, 1], [1, 1]
|
||||||
|
];
|
||||||
|
|
||||||
|
neighborOffsets.forEach(([ox, oy]) => {
|
||||||
|
const nx = cell.x / (cellSize * 1.5) + ox;
|
||||||
|
const ny = cell.y / (cellSize * Math.sqrt(3)) + oy;
|
||||||
|
|
||||||
|
if (nx >= 0 && nx < cols && ny >= 0 && ny < rows) {
|
||||||
|
const neighbor = cells[Math.floor(ny) * cols + Math.floor(nx)];
|
||||||
|
if (neighbor) cell.neighbors.push(neighbor);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Animation state
|
||||||
|
let time = 0;
|
||||||
|
let pulse = params.pulse_avg;
|
||||||
|
|
||||||
|
function animate() {
|
||||||
|
// Background
|
||||||
|
ctx.fillStyle = palette.bg;
|
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
// Update pulse
|
||||||
|
pulse = params.pulse_avg + Math.sin(time * 0.001) * (params.pulse_max - params.pulse_avg);
|
||||||
|
if (params.motion < 0.3) pulse = params.pulse_avg;
|
||||||
|
|
||||||
|
// Update cell states
|
||||||
|
cells.forEach(cell => {
|
||||||
|
if (Math.random() < 0.02 * params.motion * pulse) {
|
||||||
|
cell.targetState = cell.state === 0 ? 1 : 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (cell.state !== cell.targetState) {
|
||||||
|
const changeSpeed = 0.05 * params.motion * pulse;
|
||||||
|
cell.state += cell.targetState > cell.state ? changeSpeed : -changeSpeed;
|
||||||
|
if (Math.abs(cell.state - cell.targetState) < changeSpeed * 2) {
|
||||||
|
cell.state = cell.targetState;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update size based on state
|
||||||
|
cell.size = cellSize * (0.5 + cell.state * (0.5 + Math.sin(time * 0.002) * 0.2));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Draw connections
|
||||||
|
if (params.connectedness > 0.3) {
|
||||||
|
ctx.strokeStyle = palette.fg;
|
||||||
|
ctx.lineWidth = 0.5;
|
||||||
|
|
||||||
|
cells.forEach(cell => {
|
||||||
|
cell.neighbors.forEach(neighbor => {
|
||||||
|
if (cell.state > 0.1 && neighbor.state > 0.1) {
|
||||||
|
const dist = Math.sqrt(
|
||||||
|
Math.pow(cell.x - neighbor.x, 2) +
|
||||||
|
Math.pow(cell.y - neighbor.y, 2)
|
||||||
|
);
|
||||||
|
if (dist < cellSize * 2 * params.connectedness) {
|
||||||
|
const alpha = (cell.state + neighbor.state) * 0.5 * Math.min(1, dist / (cellSize * 1.5));
|
||||||
|
ctx.globalAlpha = alpha * 0.3;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(cell.x, cell.y);
|
||||||
|
ctx.lineTo(neighbor.x, neighbor.y);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
ctx.globalAlpha = 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Draw cells
|
||||||
|
cells.forEach(cell => {
|
||||||
|
const alpha = cell.state * (0.7 + Math.sin(time * 0.003 + cell.x * 0.01) * 0.3);
|
||||||
|
ctx.fillStyle = `rgba(${Math.floor(180 + cell.state * 75)}, ${Math.floor(180 + cell.state * 75)}, ${Math.floor(180 + cell.state * 75)}, ${alpha})`;
|
||||||
|
|
||||||
|
// Hexagon shape
|
||||||
|
ctx.beginPath();
|
||||||
|
for (let i = 0; i < 6; i++) {
|
||||||
|
const angle = (Math.PI / 3) * i + Math.sin(time * 0.001 + cell.x * 0.01) * 0.2;
|
||||||
|
const px = cell.x + Math.cos(angle) * cell.size;
|
||||||
|
const py = cell.y + Math.sin(angle) * cell.size;
|
||||||
|
if (i === 0) ctx.moveTo(px, py);
|
||||||
|
else ctx.lineTo(px, py);
|
||||||
|
}
|
||||||
|
ctx.closePath();
|
||||||
|
ctx.fill();
|
||||||
|
|
||||||
|
// Inner glow
|
||||||
|
if (cell.state > 0.8) {
|
||||||
|
ctx.fillStyle = `rgba(255, 255, 255, ${(cell.state - 0.8) * 5})`;
|
||||||
|
ctx.beginPath();
|
||||||
|
for (let i = 0; i < 6; i++) {
|
||||||
|
const angle = (Math.PI / 3) * i + Math.sin(time * 0.001 + cell.x * 0.01) * 0.2;
|
||||||
|
const px = cell.x + Math.cos(angle) * (cell.size * 0.7);
|
||||||
|
const py = cell.y + Math.sin(angle) * (cell.size * 0.7);
|
||||||
|
if (i === 0) ctx.moveTo(px, py);
|
||||||
|
else ctx.lineTo(px, py);
|
||||||
|
}
|
||||||
|
ctx.closePath();
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
time += 16;
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
}
|
||||||
|
|
||||||
|
animate();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Add table
Reference in a new issue