91 lines
3.0 KiB
HTML
91 lines
3.0 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/atom-one-dark.min.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>
|
|
fetch("snippets/defineCount.js")
|
|
.then((r) => r.text())
|
|
.then((code) => {
|
|
document.getElementById("define-count").textContent = code;
|
|
if (window.hljs)
|
|
hljs.highlightElement(document.getElementById("define-count"));
|
|
});
|
|
fetch("snippets/countSquares.js")
|
|
.then((r) => r.text())
|
|
.then((code) => {
|
|
document.getElementById("count-squares").textContent = code;
|
|
if (window.hljs)
|
|
hljs.highlightElement(document.getElementById("count-squares"));
|
|
});
|
|
</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 id="define-count" class="js">
|
|
</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 id="count-squares" class="js">
|
|
</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>
|