106 lines
3.4 KiB
HTML
106 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<script src="../../syntax_styles/highlight.pack.js"></script>
|
|
<link rel="stylesheet" href="../styles/atom-one-dark.css" />
|
|
<link rel="stylesheet" href="style.css" />
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.min.js"
|
|
integrity="sha512-b/htz6gIyFi3dwSoZ0Uv3cuv3Ony7EeKkacgrcVg8CMzu90n777qveu0PBcbZUA7TzyENGtU+qZRuFAkfqgyoQ=="
|
|
crossorigin="anonymous"></script>
|
|
<script src="script.js"></script>
|
|
<script>
|
|
hljs.initHighlightingOnLoad();
|
|
</script>
|
|
|
|
<head>
|
|
<h1>Summed-area Table</h1>
|
|
<p>
|
|
A Summed-area table is a data structure and algorithm for quickly and
|
|
efficiently generating the sum of values in a rectangular grid. In image
|
|
processing it is also known as an integral image.
|
|
</p>
|
|
</head>
|
|
|
|
<body>
|
|
<p>
|
|
To generate a summed-area table, each cell is given a value which is the
|
|
sum of all values in a rectangular subset where the top left corner is the
|
|
first cell in the grid and where the bottom right cell is the cell you're
|
|
calculating the value for (assumuing the array starts top left).
|
|
</p>
|
|
<pre>
|
|
<code class="js">
|
|
function defineCount(br)
|
|
{
|
|
let c = 0;
|
|
//where br is the cell we're calculating
|
|
//br.x is the column number
|
|
//br.y is the row number
|
|
for (y = 0; y <= br.y; y++) {
|
|
//loop through all rows above br (and the row br is on)
|
|
for (x = 0; x <= br.x; x++) {
|
|
//loop through all columns to the left of br (and br column)
|
|
var i = x + n * y; //convert 2d array format to 1d index
|
|
|
|
if (t[i].s){ //if cell[i].status == true then increase count
|
|
c++;
|
|
}
|
|
}
|
|
}
|
|
return c;
|
|
}
|
|
</code>
|
|
</pre>
|
|
|
|
<p>
|
|
Now each cell has its own count value. This isn't much help on it's own,
|
|
however we can use it to calculate the sum value of any subset of the grid
|
|
by interrogating 4 cells and performing only 4 additions. NOTE: we have to
|
|
add the 'top left' region as it as been subtracted twice.
|
|
</p>
|
|
|
|
<pre>
|
|
<code class="js">
|
|
function countSquares(tl, br) {
|
|
//where tl and br are the top left and bottom right cell respectively
|
|
|
|
let topLeft, left, top, whole;
|
|
//these are the four cells to interrogate
|
|
|
|
//1d index = x + #rows * y
|
|
topLeft = t[(tl.x-1) + n * (tl.y-1)].count;
|
|
left = t[(tl.x-1) + n * bry ].count;
|
|
top = t[br.x + n * (tl.y-1)].count;
|
|
whole = t[br.x + n * br.y ].count;
|
|
|
|
return whole + topLeft - top - left;
|
|
}
|
|
</code>
|
|
</pre>
|
|
<p><b>Click</b> a sqaure on the grid to turn it on or off.</p>
|
|
<p><b>Shift+Click</b> two square to define a rectangle.</p>
|
|
<p>
|
|
Press the <b>show count</b> button to display the sum value of each cell
|
|
(in this example a cell's value can only be 0 or 1).
|
|
</p>
|
|
<p>
|
|
Press <b>show rectangles</b> to see the different regions simplified and
|
|
see how
|
|
it changes the sum below.
|
|
</p>
|
|
<div id="sumDiv">
|
|
<a id="subsetOutput">0</a>
|
|
<a> = </a>
|
|
<a id="wholeOutput"> 0</a>
|
|
<a> + </a>
|
|
<a id="tlOutput"> 0</a>
|
|
<a> - </a>
|
|
<a id="lOutput"> 0</a>
|
|
<a> - </a>
|
|
<a id="tOutput"> 0</a>
|
|
</div>
|
|
|
|
<button onclick="showCountToggle()">Show count</button>
|
|
<button onclick="toggleRectMode()">Show rectangles</button>
|
|
</body>
|
|
|
|
</html> |