241 lines
7.5 KiB
HTML
241 lines
7.5 KiB
HTML
<html>
|
|
<head>
|
|
<style>
|
|
body {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
#test {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: stretch;
|
|
}
|
|
#gyroid > div {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
#gyroid > div > div {
|
|
min-width: 3px;
|
|
min-height: 3px;
|
|
}
|
|
#stats {
|
|
text-align: center;
|
|
}
|
|
#stats > input {
|
|
pointer-events: none;
|
|
outline: none;
|
|
width: 5em;
|
|
}
|
|
svg {
|
|
border: 1px solid #888;
|
|
}
|
|
</style>
|
|
<script>
|
|
let PI2 = Math.PI * 2;
|
|
let rez = 200;
|
|
let inc = PI2 / rez;
|
|
let zcache = {};
|
|
|
|
function $(id) {
|
|
return document.getElementById(id);
|
|
}
|
|
|
|
function init() {
|
|
$('zval').max = rez;
|
|
for (let z=0; z<PI2; z += inc) {
|
|
generate(z);
|
|
}
|
|
render(0);
|
|
}
|
|
|
|
function update() {
|
|
let z = $('zval').value;
|
|
render((z / rez) * PI2);
|
|
}
|
|
|
|
function generate(z) {
|
|
let zkey = z.toFixed(8);
|
|
let cached = zcache[zkey];
|
|
|
|
if (cached) {
|
|
return cached;
|
|
}
|
|
|
|
let edge = [];
|
|
let vals = [];
|
|
let points = 0;
|
|
let points_lr = 0;
|
|
let points_td = 0;
|
|
for (let x=0; x<PI2; x += inc) {
|
|
let vrow = []; // raw values row
|
|
let erow = []; // edge values row
|
|
edge.push(erow);
|
|
vals.push(vrow);
|
|
for (let y=0; y<PI2; y += inc) {
|
|
erow.push(0);
|
|
vrow.push(
|
|
Math.sin(x) * Math.cos(y) +
|
|
Math.sin(y) * Math.cos(z) +
|
|
Math.sin(z) * Math.cos(x)
|
|
);
|
|
}
|
|
}
|
|
|
|
// left-right threshold search (red)
|
|
vals.forEach((vrow, y) => {
|
|
let erow = edge[y];
|
|
let lval = vrow[vrow.length - 1];
|
|
vrow.forEach((val, x) => {
|
|
if (lval <= 0 && val >= 0) {
|
|
erow[x] = 1;
|
|
points++;
|
|
points_lr++;
|
|
}
|
|
lval = val;
|
|
})
|
|
});
|
|
|
|
// top-down threshold search (green)
|
|
for (let x=0; x<rez; x++) {
|
|
let lval = vals[vals.length-1][x];
|
|
for (let y=0; y<rez; y++) {
|
|
let val = vals[y][x];
|
|
if (lval <= 0 && val >= 0) {
|
|
if (edge[y][x]) {
|
|
edge[y][x] = 3;
|
|
} else {
|
|
edge[y][x] = 2;
|
|
points++
|
|
}
|
|
points_td++;
|
|
}
|
|
lval = val;
|
|
}
|
|
}
|
|
|
|
let dir = points_td > points_lr ? 'lr' : 'td';
|
|
|
|
// create sparse representation
|
|
let sparse = [];
|
|
let center = rez / 2;
|
|
edge.forEach((row,y) => {
|
|
row.forEach((val,x) => {
|
|
if (val) {
|
|
let dx = Math.abs(x - center);
|
|
let dy = Math.abs(y - center);
|
|
sparse.push({x, y, val, dist: Math.max(dx,dy)});
|
|
}
|
|
});
|
|
});
|
|
sparse.sort((a,b) => {
|
|
return b.dist - a.dist;
|
|
});
|
|
|
|
// join sparse by distance
|
|
let polys = [];
|
|
let chain;
|
|
let added;
|
|
let cleared = 0;
|
|
let maxdist = rez * 0.05;
|
|
if (true) do {
|
|
chain = null;
|
|
for (let i=0; i<sparse.length; i++) {
|
|
if (sparse[i]) {
|
|
chain = [ sparse[i] ];
|
|
polys.push(chain);
|
|
sparse[i] = null;
|
|
cleared++;
|
|
break;
|
|
}
|
|
}
|
|
do {
|
|
added = false;
|
|
let target = chain[chain.length - 1];
|
|
let cl_elm = null;
|
|
let cl_idx = null;
|
|
let cl_dst = Infinity;
|
|
for (let i=0; i<sparse.length; i++) {
|
|
let test_el = sparse[i];
|
|
if (test_el) {
|
|
let dst = dist(target, test_el, dir);
|
|
if (cl_idx === null || dst < cl_dst) {
|
|
cl_idx = i;
|
|
cl_elm = test_el;
|
|
cl_dst = dst;
|
|
}
|
|
}
|
|
}
|
|
if (cl_elm) {
|
|
if (cl_dst > maxdist) {
|
|
break;
|
|
}
|
|
sparse[cl_idx] = null;
|
|
cleared++;
|
|
chain.push(cl_elm);
|
|
added = true;
|
|
}
|
|
} while (added);
|
|
} while (cleared < sparse.length);
|
|
|
|
return zcache[zkey] = {edge, points, dir, polys};
|
|
}
|
|
|
|
function dist(a, b, dir) {
|
|
let dx = a.x - b.x;
|
|
let dy = a.y - b.y;
|
|
if (dir === 'lr') dx = dx / 2;
|
|
if (dir === 'td') dy = dy / 2;
|
|
return Math.sqrt(dx * dx + dy * dy);
|
|
}
|
|
|
|
function render(z) {
|
|
let size = 800;
|
|
let wh = size / rez;
|
|
let html = [`<svg width=${size} height=${size}>`];
|
|
let { edge, points, dir, polys } = generate(z);
|
|
console.log({z, points, dir, polys });
|
|
$('points').value = points;
|
|
$('direction').value = dir;
|
|
$('polys').value = polys.length;
|
|
|
|
polys.forEach(poly => {
|
|
let points = poly
|
|
.map(point => [point.x * wh + wh / 2, point.y * wh + wh / 2]
|
|
.join(',')).join(' ');
|
|
let x = poly[0].x - 1;
|
|
let y = poly[0].y - 1;
|
|
html.push(`<rect x="${x*wh}" y="${y*wh}" width="${wh*3}" height="${wh*3}" style="fill:purple;stroke-width:0"/>`);
|
|
html.push(`<polyline points="${points}"/ fill="none" stroke="black" />`);
|
|
});
|
|
|
|
html.push('<g>');
|
|
polys.forEach(poly => {
|
|
poly.forEach(point => {
|
|
let x = point.x;
|
|
let y = point.y;
|
|
let color = ['black','red','green','blue'][point.val];
|
|
html.push(`<rect dist="${point.dist}" x="${x*wh}" y="${y*wh}" width="${wh}" height="${wh}" style="fill:${color};stroke-width:0"/>`);
|
|
});
|
|
});
|
|
html.push('</g>');
|
|
|
|
html.push('</svg>');
|
|
|
|
$('gyroid').innerHTML = html.join('');
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="init()">
|
|
<div id="test">
|
|
<div id="gyroid"></div>
|
|
<input id="zval" type="range" min="0" max="200" value="0" oninput="update()"/>
|
|
<div id="stats">
|
|
<input id="points"></input>
|
|
<input id="direction"></input>
|
|
<input id="polys"></input>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|