AI_Assistant/grid-apps-cmms
Watch
1
0
Fork
You've already forked grid-apps-cmms
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

create polys from detected edge points

Browse source
This commit is contained in:
Stewart Allen 2019-01-20 21:14:28 -05:00
commit 2c7496fc83
1 changed files with 118 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

147
web/kiri/gyroid-test.html
View file

@ -28,11 +28,14 @@
outline: none; outline: none;
width: 5em; width: 5em;
} }
svg {
border: 1px solid #888;
}
</style> </style>
<script> <script>
let PI2 = Math.PI * 2; let PI2 = Math.PI * 2;
let rez = 150; let rez = 200;
let inc = PI2/rez; let inc = PI2 / rez;
let zcache = {}; let zcache = {};
function $(id) { function $(id) {
@ -81,12 +84,12 @@
} }
// left-right threshold search (red) // left-right threshold search (red)
vals.forEach((vrow, rowi) => { vals.forEach((vrow, y) => {
let erow = edge[rowi]; let erow = edge[y];
let lval = vrow[vrow.length - 1]; let lval = vrow[vrow.length - 1];
vrow.forEach((val, vali) => { vrow.forEach((val, x) => {
if (lval <= 0 && val >= 0) { if (lval <= 0 && val >= 0) {
erow[vali] = 1; erow[x] = 1;
points++; points++;
points_lr++; points_lr++;
} }
@ -112,34 +115,124 @@
} }
} }
// left-right poly create let dir = points_td > points_lr ? 'lr' : 'td';
// top-down poly create // 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;
});
return zcache[zkey] = {edge, points, points_lr, points_td}; // 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) { function render(z) {
let html = []; let size = 800;
let { edge, points, points_lr, points_td } = generate(z); let wh = size / rez;
console.log({z, points, points_lr, points_td}); let html = [`<svg width=${size} height=${size}>`];
let { edge, points, dir, polys } = generate(z);
console.log({z, points, dir, polys });
$('points').value = points; $('points').value = points;
$('points_lr').value = points_lr; $('direction').value = dir;
$('points_td').value = points_td; $('polys').value = polys.length;
$('direction').value = points_td > points_lr ? 'lr' : 'td';
edge.forEach(row => { polys.forEach(poly => {
html.push('<div>'); let points = poly
row.forEach(val => { .map(point => [point.x * wh + wh / 2, point.y * wh + wh / 2]
let {r, g, b} = {r: 0, b: 0, g: 0}; .join(',')).join(' ');
if (val === 1) r = 255; let x = poly[0].x - 1;
if (val === 2) g = 255; let y = poly[0].y - 1;
if (val === 3) b = 255; html.push(`<rect x="${x*wh}" y="${y*wh}" width="${wh*3}" height="${wh*3}" style="fill:purple;stroke-width:0"/>`);
let style = `background-color: rgb(${r},${g},${b})`; html.push(`<polyline points="${points}"/ fill="none" stroke="black" />`);
html.push(`<div style="${style}""></div>`);
});
html.push('</div>');
}); });
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"/>`);
});
});
// edge.forEach((row,y) => {
// row.forEach((val,x) => {
// let color = 'black';
// if (val === 1) color = 'red';
// if (val === 2) color = 'green';
// if (val === 3) color = 'blue';
// if (val === 0) return;
// html.push(`<rect 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(''); $('gyroid').innerHTML = html.join('');
} }
</script> </script>
@ -150,8 +243,6 @@
<input id="zval" type="range" min="0" max="200" value="0" oninput="update()"/> <input id="zval" type="range" min="0" max="200" value="0" oninput="update()"/>
<div id="stats"> <div id="stats">
<input id="points"></input> <input id="points"></input>
<input id="points_lr"></input>
<input id="points_td"></input>
<input id="direction"></input> <input id="direction"></input>
<input id="polys"></input> <input id="polys"></input>
</div> </div>