init'

2026-03-10 21:01:46 +00:00
commit 9006b2e06a
242 changed files with 30823 additions and 0 deletions
--- a/tutorials/summed_area/summed-area.html
+++ b/tutorials/summed_area/summed-area.html
@@ -0,0 +1,106 @@
+<!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>