StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Check this out: <a href="http://jsfiddle.net/ZXjAM/2/" rel="nofollow">http://jsfiddle.net/ZXjAM/2/</a></p> <pre><code>// points 0,1,2,3 front face var fAvgZ = (cube.processPoints[0].colorZ + cube.processPoints[1].colorZ + cube.processPoints[2].colorZ + cube.processPoints[3].colorZ) / 4 / 20; // points 0,2,4,6 top var tAvgZ = (cube.processPoints[0].colorZ + cube.processPoints[2].colorZ + cube.processPoints[4].colorZ + cube.processPoints[6].colorZ) / 4 / 20; // points 4,5,6,7 rear var reAvgZ = (cube.processPoints[4].colorZ + cube.processPoints[5].colorZ + cube.processPoints[6].colorZ + cube.processPoints[7].colorZ) / 4 / 20; // points 1,3,5,7 bottom var bAvgZ = (cube.processPoints[1].colorZ + cube.processPoints[3].colorZ + cube.processPoints[5].colorZ + cube.processPoints[7].colorZ) / 4 / 20; // points 2,3,6,7 right side var rAvgZ = (cube.processPoints[2].colorZ + cube.processPoints[3].colorZ + cube.processPoints[6].colorZ + cube.processPoints[7].colorZ) / 4 / 20; // points 0,1,4,5 left side var lAvgZ = (cube.processPoints[0].colorZ + cube.processPoints[1].colorZ + cube.processPoints[4].colorZ + cube.processPoints[5].colorZ) / 4 / 20; var layers = [{key:0, val:fAvgZ}, {key:1, val:fAvgZ}, {key:2, val:tAvgZ}, {key:3, val:tAvgZ}, {key:4, val:reAvgZ}, {key:5, val:reAvgZ}, {key:6, val:bAvgZ}, {key:7, val:bAvgZ}, {key:8, val:rAvgZ}, {key:9, val:rAvgZ}, {key:10, val:lAvgZ}, {key:11, val:lAvgZ}]; var outLay = layers.sort(function(a,b){ return (a.val - b.val); }); for(var i = 0; i < outLay.length; i++) { var k = outLay[i].key; ... } </code></pre> <p>This is, by no means, the most efficient way to average/sort the point values, and it can probably be done with fewer lines of code using the cube's pre-existing properties, but the basic concept remains the same.</p> <p>I'm finding the average z-index and using that to assume layering order. Obviously, this won't work for everything ever, but for simple polyhedra, it should suffice. </p> <p>This can be simplified to:</p> <pre><code>var layers = []; for (var i = 0; i < cube.sides.length; i++){ var side = cube.sides[i]; var avg = (cube.processPoints[side.a].colorZ + cube.processPoints[side.b].colorZ + cube.processPoints[side.c].colorZ) / 3 / 20; layers.push({key:i, val:avg}); } var outLay = layers.sort(function(a,b){ return (a.val - b.val); }); </code></pre> <p>There do seem to be some fringe-cases where there is a quick ordering-problem.</p> <p>This seems to be more accurate: <a href="http://jsfiddle.net/ZXjAM/4/" rel="nofollow">http://jsfiddle.net/ZXjAM/4/</a></p> <pre><code>var layers = []; for (var i = 0; i < 12; ++i){ var side1 = cube.sides[i]; var side2 = cube.sides[++i]; var avg = (cube.processPoints[side1.a].colorZ + cube.processPoints[side1.b].colorZ + cube.processPoints[side1.c].colorZ + cube.processPoints[side2.a].colorZ + cube.processPoints[side2.b].colorZ + cube.processPoints[side2.c].colorZ) / 6; layers.push({key:i-1, val:avg}); layers.push({key:i, val:avg}); } var outLay = layers.sort(function(a,b){ return (a.val - b.val); }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload