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