257 lines
No EOL
8.4 KiB
HTML
257 lines
No EOL
8.4 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 Fracture</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
background: #0a0a0a;
|
|
font-family: monospace;
|
|
}
|
|
#canvas {
|
|
display: block;
|
|
background: #0a0a0a;
|
|
}
|
|
#attribution {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
color: #333;
|
|
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 resizeCanvas() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
|
|
resizeCanvas();
|
|
window.addEventListener('resize', resizeCanvas);
|
|
|
|
const params = {
|
|
motion: 0.5,
|
|
density: 0.5,
|
|
complexity: 0.5,
|
|
connectedness: 0.5,
|
|
lifespan: 0.5,
|
|
pulse: 1.07,
|
|
tones: {
|
|
curiosity: 0.5,
|
|
dryness: 0.7,
|
|
playfulness: 0.2
|
|
}
|
|
};
|
|
|
|
const points = [];
|
|
const colors = [];
|
|
const speeds = [];
|
|
const ages = [];
|
|
|
|
function init() {
|
|
const count = Math.floor(200 + params.density * 800);
|
|
for (let i = 0; i < count; i++) {
|
|
points.push({
|
|
x: Math.random() * canvas.width,
|
|
y: Math.random() * canvas.height,
|
|
baseX: Math.random() * canvas.width,
|
|
baseY: Math.random() * canvas.height
|
|
});
|
|
|
|
// Tone-based color
|
|
const hue = 160 + params.tones.curiosity * 40;
|
|
const saturation = 50 + params.tones.playfulness * 50;
|
|
const lightness = 40 + Math.sin(Date.now() * 0.001) * 10 * params.tones.playfulness;
|
|
colors.push(`hsl(${hue}, ${saturation}%, ${lightness}%)`);
|
|
|
|
speeds.push({
|
|
x: (Math.random() - 0.5) * 2 * params.motion,
|
|
y: (Math.random() - 0.5) * 2 * params.motion
|
|
});
|
|
|
|
ages.push(Math.random());
|
|
}
|
|
}
|
|
|
|
function updatePoints() {
|
|
for (let i = 0; i < points.length; i++) {
|
|
const p = points[i];
|
|
const speed = speeds[i];
|
|
|
|
p.baseX += speed.x * (0.5 + Math.sin(Date.now() * 0.001 * params.pulse) * 0.1);
|
|
p.baseY += speed.y * (0.5 + Math.cos(Date.now() * 0.001 * params.pulse) * 0.1);
|
|
|
|
p.x = p.baseX + Math.sin(Date.now() * 0.0005 * params.motion) * 10 * Math.sin(i * 0.1);
|
|
p.y = p.baseY + Math.cos(Date.now() * 0.0005 * params.motion) * 10 * Math.cos(i * 0.1);
|
|
}
|
|
}
|
|
|
|
function drawVoronoi() {
|
|
const diagram = new Voronoi();
|
|
const bbox = {xl: 0, xr: canvas.width, yt: 0, yb: canvas.height};
|
|
const sites = points.map(p => ({x: p.x, y: p.y}));
|
|
const cells = diagram.compute(sites, bbox);
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
cells.forEach((cell, i) => {
|
|
if (!cell || !cell.halfedges || cell.halfedges.length === 0) return;
|
|
|
|
const path = new Path2D();
|
|
cell.halfedges.forEach(he => {
|
|
const p1 = he.getStartpoint();
|
|
const p2 = he.getEndpoint();
|
|
if (!p1 || !p2) return;
|
|
|
|
if (!path._path) path._path = [];
|
|
path._path.push(p1.x, p1.y);
|
|
});
|
|
|
|
if (path._path && path._path.length > 0) {
|
|
ctx.fillStyle = colors[i % colors.length];
|
|
ctx.strokeStyle = `rgba(255, 255, 255, ${0.3 + params.tones.playfulness * 0.3})`;
|
|
ctx.lineWidth = 0.5 + params.complexity * 1.5;
|
|
|
|
ctx.fill(path);
|
|
ctx.stroke(path);
|
|
}
|
|
});
|
|
}
|
|
|
|
function animate() {
|
|
updatePoints();
|
|
drawVoronoi();
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
init();
|
|
animate();
|
|
|
|
// Simple Voronoi implementation
|
|
function Voronoi() {
|
|
this.beachsectionJunkyard = [];
|
|
this.circleEventJunkyard = [];
|
|
this.beachline = null;
|
|
this.circleEvents = null;
|
|
this.edges = [];
|
|
this.vertexIndex = 0;
|
|
}
|
|
|
|
Voronoi.prototype = {
|
|
compute: function(sites, bbox) {
|
|
this.edges = [];
|
|
this.vertexIndex = 0;
|
|
|
|
const siteEvents = sites.map(site => ({site: site, x: site.x, y: site.y, voronoiId: site.voronoiId}));
|
|
|
|
this.beachline = null;
|
|
this.circleEvents = new Heap();
|
|
siteEvents.forEach(site => this.circleEvents.push(site));
|
|
|
|
let newSite = this.circleEvents.pop();
|
|
|
|
while (true) {
|
|
if (!newSite) break;
|
|
if (newSite.added) break;
|
|
|
|
const site = newSite.site;
|
|
const vertex = {x: site.x, y: site.y};
|
|
vertex.voronoiId = "vertex" + this.vertexIndex++;
|
|
|
|
if (this.beachline) {
|
|
const {edge, bisector} = this.insertBeachsection(site);
|
|
const {v0, v1} = this.createEdge(edge, site, bisector);
|
|
if (v0) this.checkCircleEvent(v0);
|
|
if (v1) this.checkCircleEvent(v1);
|
|
} else {
|
|
this.beachline = {site: site, edge: null, bisector: null};
|
|
}
|
|
|
|
newSite = this.circleEvents.pop();
|
|
}
|
|
|
|
this.clipEdges(bbox);
|
|
return this.edges;
|
|
},
|
|
|
|
insertBeachsection: function(site) {
|
|
// Simplified for brevity - actual implementation would handle beachline
|
|
return {edge: null, bisector: null};
|
|
},
|
|
|
|
createEdge: function(edge, site, bisector) {
|
|
// Simplified for brevity
|
|
return {v0: null, v1: null};
|
|
},
|
|
|
|
checkCircleEvent: function(vertex) {
|
|
// Simplified for brevity
|
|
},
|
|
|
|
clipEdges: function(bbox) {
|
|
// Simplified for brevity
|
|
}
|
|
};
|
|
|
|
// Minimal Heap implementation
|
|
function Heap() {
|
|
this.items = [];
|
|
}
|
|
|
|
Heap.prototype = {
|
|
push: function(item) {
|
|
this.items.push(item);
|
|
this.bubbleUp(this.items.length - 1);
|
|
},
|
|
pop: function() {
|
|
if (this.items.length === 0) return null;
|
|
const popped = this.items[0];
|
|
const bottom = this.items.pop();
|
|
if (this.items.length > 0) {
|
|
this.items[0] = bottom;
|
|
this.sinkDown(0);
|
|
}
|
|
return popped;
|
|
},
|
|
resize: function(newSize) {
|
|
this.items.length = newSize;
|
|
},
|
|
bubbleUp: function(pos) {
|
|
const item = this.items[pos];
|
|
while (pos > 0) {
|
|
const parentPos = Math.floor((pos - 1) / 2);
|
|
if (this.items[parentPos].y <= item.y) break;
|
|
this.items[pos] = this.items[parentPos];
|
|
pos = parentPos;
|
|
}
|
|
this.items[pos] = item;
|
|
},
|
|
sinkDown: function(pos) {
|
|
const item = this.items[pos];
|
|
while (pos * 2 + 1 < this.items.length) {
|
|
let childPos = pos * 2 + 1;
|
|
if (childPos + 1 < this.items.length &&
|
|
this.items[childPos + 1].y < this.items[childPos].y) {
|
|
childPos++;
|
|
}
|
|
if (item.y <= this.items[childPos].y) break;
|
|
this.items[pos] = this.items[childPos];
|
|
pos = childPos;
|
|
}
|
|
this.items[pos] = item;
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |