birth: fluid neural murmurings
This commit is contained in:
parent
8a9c4ebd32
commit
2bcfc6e6b6
1 changed files with 223 additions and 0 deletions
223
index.html
Normal file
223
index.html
Normal file
|
|
@ -0,0 +1,223 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>neural meander</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background: #0a0a0a;
|
||||
font-family: monospace;
|
||||
color: #333;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
font-size: 10px;
|
||||
color: #444;
|
||||
text-shadow: 0 0 5px rgba(255,255,255,0.1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas"></canvas>
|
||||
<div class="footer">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();
|
||||
|
||||
// Flow field with varying density and complexity
|
||||
const fields = [];
|
||||
const fieldCount = 5; // Reduced from 10 for lower density
|
||||
const particleCount = 300; // Reduced from 500 for lower density
|
||||
|
||||
// Palette: dryness=monochrome with slight playfulness
|
||||
const palette = {
|
||||
bg: '#0a0a0a',
|
||||
particles: '#d0d0d0',
|
||||
trails: '#555',
|
||||
highlights: '#ffffff'
|
||||
};
|
||||
|
||||
// Flow field class
|
||||
class FlowField {
|
||||
constructor() {
|
||||
this.width = canvas.width;
|
||||
this.height = canvas.height;
|
||||
this.columns = Math.floor(10 + fieldCount * 2); // 10-20 columns
|
||||
this.rows = Math.floor(10 + fieldCount * 2); // 10-20 rows
|
||||
this.cellWidth = this.width / this.columns;
|
||||
this.cellHeight = this.height / this.rows;
|
||||
this.vectors = [];
|
||||
this.initVectors();
|
||||
}
|
||||
|
||||
initVectors() {
|
||||
for (let y = 0; y < this.rows; y++) {
|
||||
for (let x = 0; x < this.columns; x++) {
|
||||
// Base vector with slight rotation
|
||||
const angle = Math.sin(x * 0.1) * Math.PI * 0.2;
|
||||
const len = 0.5 + Math.sin(y * 0.2) * 0.3;
|
||||
this.vectors.push({
|
||||
x: Math.cos(angle) * len,
|
||||
y: Math.sin(angle) * len,
|
||||
baseAngle: angle
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
update() {
|
||||
// Slowly evolve the field
|
||||
this.vectors.forEach(vec => {
|
||||
vec.baseAngle += (Math.random() - 0.5) * 0.01;
|
||||
const len = 0.5 + Math.sin(Date.now() * 0.0005) * 0.1;
|
||||
vec.x = Math.cos(vec.baseAngle) * len;
|
||||
vec.y = Math.sin(vec.baseAngle) * len;
|
||||
});
|
||||
}
|
||||
|
||||
getVector(x, y) {
|
||||
const col = Math.floor(x / this.cellWidth);
|
||||
const row = Math.floor(y / this.cellHeight);
|
||||
const index = row * this.columns + col;
|
||||
return this.vectors[index % this.vectors.length];
|
||||
}
|
||||
}
|
||||
|
||||
// Particle class
|
||||
class Particle {
|
||||
constructor() {
|
||||
this.reset();
|
||||
this.size = 1 + Math.random() * 0.5;
|
||||
this.life = 0;
|
||||
this.maxLife = 50 + Math.random() * 100;
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.x = Math.random() * canvas.width;
|
||||
this.y = Math.random() * canvas.height;
|
||||
this.prevX = this.x;
|
||||
this.prevY = this.y;
|
||||
this.speed = 0.2 + Math.random() * 0.3;
|
||||
this.angle = Math.random() * Math.PI * 2;
|
||||
}
|
||||
|
||||
update(field) {
|
||||
this.prevX = this.x;
|
||||
this.prevY = this.y;
|
||||
|
||||
// Get flow field vector
|
||||
const vector = field.getVector(this.x, this.y);
|
||||
this.angle += (vector.x + vector.y) * 0.1;
|
||||
|
||||
this.x += Math.cos(this.angle) * this.speed;
|
||||
this.y += Math.sin(this.angle) * this.speed;
|
||||
|
||||
// Boundary check
|
||||
if (this.x < 0) this.x = canvas.width;
|
||||
if (this.x > canvas.width) this.x = 0;
|
||||
if (this.y < 0) this.y = canvas.height;
|
||||
if (y > canvas.height) this.y = 0;
|
||||
|
||||
this.life++;
|
||||
if (this.life > this.maxLife) {
|
||||
this.reset();
|
||||
this.life = 0;
|
||||
}
|
||||
}
|
||||
|
||||
draw() {
|
||||
const progress = Math.min(this.life / this.maxLife, 1);
|
||||
const alpha = progress * 0.8;
|
||||
const size = this.size * (0.5 + progress * 0.5);
|
||||
|
||||
// Trail
|
||||
ctx.strokeStyle = `${palette.trails}${Math.floor(alpha * 255).toString(16).padStart(2, '0')}`;
|
||||
ctx.lineWidth = size * 0.5;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(this.prevX, this.prevY);
|
||||
ctx.lineTo(this.x, this.y);
|
||||
ctx.stroke();
|
||||
|
||||
// Particle
|
||||
ctx.fillStyle = `${palette.particles}${Math.floor(alpha * 255).toString(16).padStart(2, '0')}`;
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, size, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize particles
|
||||
const particles = [];
|
||||
for (let i = 0; i < particleCount; i++) {
|
||||
particles.push(new Particle());
|
||||
}
|
||||
|
||||
// Create flow fields
|
||||
for (let i = 0; i < fieldCount; i++) {
|
||||
fields.push(new FlowField());
|
||||
}
|
||||
|
||||
function animate() {
|
||||
// Clear with slight fade
|
||||
ctx.fillStyle = `${palette.bg}05`;
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Update and draw fields
|
||||
fields.forEach(field => {
|
||||
field.update();
|
||||
field.vectors.forEach(vec => {
|
||||
const x = vec.x * 50 + canvas.width/2;
|
||||
const y = vec.y * 50 + canvas.height/2;
|
||||
const len = Math.sqrt(vec.x*vec.x + vec.y*vec.y) * 20;
|
||||
|
||||
ctx.strokeStyle = `${palette.highlights}22`;
|
||||
ctx.lineWidth = 1;
|
||||
|
||||
// Draw velocity indicators
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, y);
|
||||
ctx.lineTo(x + vec.x * 10, y + vec.y * 10);
|
||||
ctx.stroke();
|
||||
|
||||
// Draw small circles
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, 3, 0, Math.PI * 2);
|
||||
ctx.fillStyle = `${palette.highlights}44`;
|
||||
ctx.fill();
|
||||
});
|
||||
});
|
||||
|
||||
// Update and draw particles
|
||||
particles.forEach(particle => {
|
||||
particle.update(fields[Math.floor(Math.random() * fields.length)]);
|
||||
particle.draw();
|
||||
});
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
animate();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue