245 lines
No EOL
8.7 KiB
HTML
245 lines
No EOL
8.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Voronoi Fractal Field</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
background: #0a0a1a;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
canvas {
|
|
display: block;
|
|
}
|
|
#attribution {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
color: #555;
|
|
font-size: 10px;
|
|
text-shadow: 0 0 5px rgba(0,0,0,0.5);
|
|
}
|
|
</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: 1.06,
|
|
tone: {
|
|
anger: 0.00,
|
|
sadness: 0.00,
|
|
curiosity: 0.10,
|
|
dryness: 0.90,
|
|
playfulness: 0.00,
|
|
tension: 0.00
|
|
}
|
|
};
|
|
|
|
// Voronoi implementation
|
|
class VoronoiCell {
|
|
constructor(x, y, baseSize, seed) {
|
|
this.x = x;
|
|
this.y = y;
|
|
this.baseSize = baseSize;
|
|
this.seed = seed;
|
|
this.points = [];
|
|
this.age = 0;
|
|
this.maxAge = 1000 + (Math.random() * 2000);
|
|
this.targetPoints = Math.floor(5 + Math.random() * 10 * params.complexity);
|
|
this.color = `hsl(0, 0%, ${80 + Math.random() * 20}%)`;
|
|
this.noiseOffset = Math.random() * 1000;
|
|
}
|
|
|
|
update() {
|
|
this.age++;
|
|
if (this.age > this.maxAge && params.lifespan < 0.7) {
|
|
return false;
|
|
}
|
|
|
|
// Add new points based on complexity and connectedness
|
|
const growthFactor = params.complexity * params.connectedness * 0.5;
|
|
if (Math.random() < 0.05 * params.motion * growthFactor && this.points.length < this.targetPoints) {
|
|
const angle = Math.random() * Math.PI * 2;
|
|
const dist = this.baseSize * 0.3 * (0.5 + Math.random() * 0.5);
|
|
this.points.push({
|
|
x: this.x + Math.cos(angle) * dist,
|
|
y: this.y + Math.sin(angle) * dist,
|
|
size: this.baseSize * (0.5 + Math.random() * 0.5),
|
|
alive: true
|
|
});
|
|
}
|
|
|
|
// Update existing points
|
|
this.points.forEach(p => {
|
|
p.size *= 0.98;
|
|
if (p.size < 0.5) {
|
|
p.alive = false;
|
|
}
|
|
});
|
|
|
|
// Remove dead points
|
|
this.points = this.points.filter(p => p.alive);
|
|
return true;
|
|
}
|
|
|
|
draw(ctx) {
|
|
if (this.points.length === 0) return;
|
|
|
|
// Create voronoi-like structure by connecting points
|
|
ctx.strokeStyle = this.color;
|
|
ctx.lineWidth = 1;
|
|
|
|
// Draw main cell
|
|
ctx.beginPath();
|
|
ctx.arc(this.x, this.y, this.baseSize * 0.5, 0, Math.PI * 2);
|
|
ctx.stroke();
|
|
|
|
// Draw connections between points
|
|
for (let i = 0; i < this.points.length; i++) {
|
|
for (let j = i + 1; j < Math.min(i + 3, this.points.length); j++) {
|
|
const p1 = this.points[i];
|
|
const p2 = this.points[j];
|
|
|
|
if (p1.size > 1 && p2.size > 1) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(p1.x, p1.y);
|
|
ctx.lineTo(p2.x, p2.y);
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
}
|
|
|
|
// Draw points
|
|
this.points.forEach(p => {
|
|
if (p.size > 1) {
|
|
ctx.beginPath();
|
|
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
|
|
ctx.fillStyle = this.color;
|
|
ctx.fill();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
class VoronoiSystem {
|
|
constructor() {
|
|
this.cells = [];
|
|
this.cellCount = Math.floor(30 + params.density * 150);
|
|
this.seed = 0;
|
|
}
|
|
|
|
init() {
|
|
this.cells = [];
|
|
const centerX = canvas.width / 2;
|
|
const centerY = canvas.height / 2;
|
|
|
|
// Create cells in a grid pattern
|
|
for (let i = 0; i < this.cellCount; i++) {
|
|
const angle = (i / this.cellCount) * Math.PI * 2;
|
|
const radius = Math.min(canvas.width, canvas.height) * 0.4;
|
|
const dist = Math.sqrt(Math.random()) * radius;
|
|
const x = centerX + Math.cos(angle) * dist;
|
|
const y = centerY + Math.sin(angle) * dist;
|
|
|
|
const baseSize = 10 + Math.random() * 30;
|
|
this.cells.push(new VoronoiCell(x, y, baseSize, this.seed++));
|
|
}
|
|
}
|
|
|
|
update() {
|
|
// Update all cells
|
|
this.cells = this.cells.filter(cell => cell.update());
|
|
|
|
// Add new cells based on density and lifespan
|
|
if (this.cells.length < this.cellCount * 0.8 ||
|
|
(this.cells.length < this.cellCount && Math.random() < 0.01)) {
|
|
const angle = Math.random() * Math.PI * 2;
|
|
const radius = Math.min(canvas.width, canvas.height) * 0.4;
|
|
const dist = Math.sqrt(Math.random()) * radius;
|
|
const x = canvas.width / 2 + Math.cos(angle) * dist;
|
|
const y = canvas.height / 2 + Math.sin(angle) * dist;
|
|
|
|
const baseSize = 10 + Math.random() * 30;
|
|
this.cells.push(new VoronoiCell(x, y, baseSize, this.seed++));
|
|
}
|
|
|
|
// Slight movement based on motion
|
|
this.cells.forEach(cell => {
|
|
cell.x += (Math.random() - 0.5) * 0.5 * params.motion;
|
|
cell.y += (Math.random() - 0.5) * 0.5 * params.motion;
|
|
});
|
|
}
|
|
|
|
draw(ctx) {
|
|
// Background with subtle noise
|
|
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
// Draw cells with pulsing effect
|
|
this.cells.forEach(cell => {
|
|
cell.draw(ctx);
|
|
});
|
|
|
|
// Draw center glow
|
|
const glowSize = 100 + Math.sin(Date.now() * 0.001) * 20;
|
|
const gradient = ctx.createRadialGradient(
|
|
canvas.width/2, canvas.height/2, 0,
|
|
canvas.width/2, canvas.height/2, glowSize
|
|
);
|
|
gradient.addColorStop(0, 'rgba(255, 255, 255, 0.1)');
|
|
gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
|
|
ctx.fillStyle = gradient;
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
}
|
|
}
|
|
|
|
const system = new VoronoiSystem();
|
|
system.init();
|
|
|
|
function animate() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
// Update and draw system
|
|
system.update();
|
|
system.draw(ctx);
|
|
|
|
// Reset occasional cells to maintain density
|
|
if (Math.random() < 0.05) {
|
|
const centerX = canvas.width / 2;
|
|
const centerY = canvas.height / 2;
|
|
const angle = Math.random() * Math.PI * 2;
|
|
const radius = Math.min(canvas.width, canvas.height) * 0.4;
|
|
const dist = Math.sqrt(Math.random()) * radius;
|
|
const x = centerX + Math.cos(angle) * dist;
|
|
const y = centerY + Math.sin(angle) * dist;
|
|
system.cells.push(new VoronoiCell(x, y, 10 + Math.random() * 30, system.seed++));
|
|
}
|
|
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
animate();
|
|
</script>
|
|
</body>
|
|
</html> |