neurameba/whispering-currents-in-static-6kub
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

birth: Whispering Currents in Static

Browse source
This commit is contained in:
motd_admin 2026-04-26 17:47:18 +00:00
parent 2296a6b5b8
commit 27199b0a41
1 changed files with 212 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

212
index.html Normal file
View file

@ -0,0 +1,212 @@
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flowing Organism</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: monospace;
}
canvas {
display: block;
}
#attribution {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: #fff;
font-size: 10px;
background: rgba(0,0,0,0.5);
padding: 2px 5px;
border-radius: 3px;
}
</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();
// Flow field parameters
const CELL_SIZE = 10;
const numRows = Math.ceil(canvas.height / CELL_SIZE);
const numCols = Math.ceil(canvas.width / CELL_SIZE);
const flowField = [];
const particles = [];
const particleCount = 150;
// Create flow field based on parameters
function initFlowField() {
flowField.length = 0;
for (let y = 0; y < numRows; y++) {
flowField[y] = [];
for (let x = 0; x < numCols; x++) {
// Base vectors influenced by complexity and connectedness
const angle = (Math.sin(x * 0.01 + Date.now() * 0.0005) * Math.cos(y * 0.01)) * Math.PI * 2;
const length = 0.1 + (Math.sin(x * 0.005) * Math.cos(y * 0.005)) * 0.2;
flowField[y][x] = {
x: Math.cos(angle) * length,
y: Math.sin(angle) * length,
strength: length
};
}
}
}
// Create particles
function initParticles() {
particles.length = 0;
for (let i = 0; i < particleCount; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
size: 1 + Math.random() * 2,
speed: 0.5 + Math.random() * 1,
lifetime: 0,
maxLifetime: 200 + Math.random() * 200,
path: [],
hue: 0,
trailLength: 5 + Math.random() * 10
});
}
}
// Update flow field (slowly changing)
function updateFlowField() {
for (let y = 0; y < numRows; y++) {
for (let x = 0; x < numCols; x++) {
const cell = flowField[y][x];
cell.x += (Math.random() - 0.5) * 0.02;
cell.y += (Math.random() - 0.5) * 0.02;
const length = Math.sqrt(cell.x * cell.x + cell.y * cell.y);
cell.strength = length;
// Normalize
if (length > 0) {
cell.x /= length;
cell.y /= length;
}
}
}
}
// Update particles
function updateParticles() {
particles.forEach(p => {
p.lifetime++;
if (p.lifetime > p.maxLifetime) {
p.x = Math.random() * canvas.width;
p.y = Math.random() * canvas.height;
p.lifetime = 0;
p.hue = (p.hue + 5) % 360;
}
// Move according to flow field
const cellX = Math.floor(p.x / CELL_SIZE);
const cellY = Math.floor(p.y / CELL_SIZE);
const cell = flowField[cellY]?.[cellX];
if (cell) {
p.x += cell.x * p.speed;
p.y += cell.y * p.speed;
p.x = (p.x + canvas.width) % canvas.width;
p.y = (p.y + canvas.height) % canvas.height;
}
// Add to path
p.path.push({x: p.x, y: p.y});
if (p.path.length > p.trailLength) {
p.path.shift();
}
});
}
// Draw everything
function draw() {
// Fade background
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw flow field (faintly)
if (Math.random() < 0.3) {
ctx.strokeStyle = 'rgba(255, 255, 255, 0.02)';
ctx.lineWidth = 0.5;
for (let y = 0; y < numRows; y++) {
for (let x = 0; x < numCols; x++) {
const cell = flowField[y][x];
const startX = x * CELL_SIZE;
const startY = y * CELL_SIZE;
const endX = startX + cell.x * 5;
const endY = startY + cell.y * 5;
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(endX, endY);
ctx.stroke();
}
}
}
// Draw particles
particles.forEach(p => {
// Draw trail
if (p.path.length > 1) {
ctx.beginPath();
ctx.moveTo(p.path[0].x, p.path[0].y);
for (let i = 1; i < p.path.length; i++) {
const point = p.path[i];
const prev = p.path[i-1];
const gradient = ctx.createLinearGradient(prev.x, prev.y, point.x, point.y);
gradient.addColorStop(0, `hsla(${p.hue}, 70%, 50%, ${0.3 + i/p.trailLength * 0.7})`);
gradient.addColorStop(1, `hsla(${p.hue}, 70%, 50%, 0)`);
ctx.strokeStyle = gradient;
ctx.lineWidth = p.size * (1 - i/p.trailLength);
ctx.lineTo(point.x, point.y);
}
ctx.stroke();
}
// Draw head
ctx.beginPath();
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
ctx.fillStyle = `hsl(${p.hue}, 70%, 50%)`;
ctx.fill();
});
}
// Animation loop
function animate() {
updateFlowField();
updateParticles();
draw();
requestAnimationFrame(animate);
}
// Initialize and start
initFlowField();
initParticles();
animate();
</script>
</body>
</html>
```