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