birth: ) &&
html.includes(
This commit is contained in:
parent
c1627f22ec
commit
ebedb22934
1 changed files with 257 additions and 0 deletions
257
index.html
Normal file
257
index.html
Normal file
|
|
@ -0,0 +1,257 @@
|
|||
<!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>
|
||||
Loading…
Add table
Reference in a new issue