neurameba/fractured-teal-blooms-pulse-abr0
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

birth: Fractured teal blooms pulse

Browse source
This commit is contained in:
motd_admin 2026-08-04 02:21:20 +00:00
parent 30171c27c8
commit 428c3a37c2
1 changed files with 182 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

182
index.html Normal file
View file

@ -0,0 +1,182 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Voronoi Bloom</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #000;
font-family: monospace;
}
canvas {
display: block;
}
#attribution {
position: fixed;
bottom: 10px;
right: 10px;
color: rgba(255, 255, 255, 0.3);
font-size: 10px;
pointer-events: none;
}
</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 resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();
const params = {
motion: 0.5,
density: 0.5,
complexity: 0.5,
connectedness: 0.5,
lifespan: 0.5,
pulse: { avg: 1.07, min: 1.0, max: 1.1 },
tone: { anger: 0.0, sadness: 0.0, curiosity: 0.7, dryness: 0.8, playfulness: 0.2, tension: 0.0 }
};
const points = [];
const maxPoints = Math.floor(params.density * 100) + 50;
const minDistance = 200 / (params.density * 2 + 0.1);
const complexityScale = params.complexity * 4 + 1;
const connectednessScale = params.connectedness * 3;
class VoronoiPoint {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.vx = 0;
this.vy = 0;
this.targetX = this.x;
this.targetY = this.y;
this.life = 0;
this.maxLife = 100 + Math.random() * 200 * params.lifespan;
this.color = getColor();
this.size = 1 + Math.random() * 3 * params.dryness;
}
update() {
this.life += 1 * params.pulse.avg;
if (this.life > this.maxLife) {
this.reset();
}
// Gentle motion toward target
this.vx += (this.targetX - this.x) * 0.02 * params.motion;
this.vy += (this.targetY - this.y) * 0.02 * params.motion;
this.vx *= 0.85;
this.vy *= 0.85;
this.x += this.vx;
this.y += this.vy;
// Bounce at edges
if (this.x < 0 || this.x > canvas.width) this.vx *= -0.5;
if (this.y < 0 || this.y > canvas.height) this.vy *= -0.5;
// Subtle movement toward center
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const dx = centerX - this.x;
const dy = centerY - this.y;
this.x += dx * 0.0005 * params.connectedness;
this.y += dy * 0.0005 * params.connectedness;
}
reset() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.targetX = this.x;
this.targetY = this.y;
this.life = 0;
this.maxLife = 100 + Math.random() * 200 * params.lifespan;
this.color = getColor();
}
draw() {
// Draw the point
ctx.fillStyle = `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 1)`;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
// Draw subtle lines to neighbors based on connectedness
if (Math.random() < params.connectedness * 0.1) {
ctx.strokeStyle = `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 0.2)`;
ctx.lineWidth = params.dryness * 0.5;
ctx.beginPath();
ctx.moveTo(this.x, this.y);
ctx.lineTo(this.x + (Math.random() - 0.5) * 200, this.y + (Math.random() - 0.5) * 200);
ctx.stroke();
}
}
}
function getColor() {
const hue = 160 + Math.random() * 40; // Teal colors (curiosity)
const saturation = 30 + 70 * params.tone.dryness;
const lightness = 60 + 20 * params.tone.playfulness;
const alpha = 0.7 + 0.3 * params.tone.curiosity;
return {
r: Math.floor((saturation / 100) * (lightness / 100) * 255),
g: Math.floor((saturation / 100) * ((lightness / 100) * (1 - 0.168) + 0.168) * 255),
b: Math.floor((saturation / 100) * ((lightness / 100) * (1 - 0.33) - 0.33) * 255)
};
}
function initPoints() {
points.length = 0;
for (let i = 0; i < maxPoints; i++) {
points.push(new VoronoiPoint());
}
}
function updateVoronoi() {
// Clear with a very dark background
ctx.fillStyle = 'rgba(5, 5, 10, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Update points
points.forEach(point => point.update());
// Draw points
points.forEach(point => point.draw());
}
let lastTime = 0;
function animate(time) {
const deltaTime = time - lastTime;
lastTime = time;
// Adjust pulse based on time
const pulse = params.pulse;
const pulseFactor = pulse.avg + Math.sin(time * 0.001) * (pulse.max - pulse.avg) * 0.3;
// Update parameters based on pulse
params.pulse.avg = pulseFactor;
updateVoronoi();
requestAnimationFrame(animate);
}
initPoints();
requestAnimationFrame(animate);
</script>
</body>
</html>