jay/havox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

formatting

Browse Source
This commit is contained in:
Jay
2026-03-21 15:05:08 +00:00
parent 2100334f1f
commit 13c8b0a28e
26 changed files with 3176 additions and 2631 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
tutorials/summed_area/index.html
View File

@@ -1,43 +1,49 @@
<!DOCTYPE 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"
<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>
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"));
});
.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>
.then((r) => r.text())
.then((code) => {
document.getElementById("count-squares").textContent = code;
if (window.hljs)
hljs.highlightElement(document.getElementById("count-squares"));
});
</script>
<head>
<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.
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>
</head>
<body>
<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).
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">
@@ -45,10 +51,10 @@
</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.
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>
@@ -59,28 +65,26 @@
<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).
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.
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>
<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>
</body>
</html>

57
tutorials/summed_area/style.css
View File

@@ -1,43 +1,54 @@
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
html {
background-color: #2e3440; }
background-color: #2e3440;
}
h1 {
color: #eceff4;
font-family: "Roboto", sans-serif;
font-size: 48pt; }
font-size: 48pt;
}
p {
color: #d8dee9;
font-family: "Roboto", sans-serif;
font-size: 16pt; }
font-size: 16pt;
}
code {
font-size: 14pt;
border: 4px solid #ebcb8b; }
border: 4px solid #ebcb8b;
}
a {
color: #d8dee9;
font-family: "Roboto", sans-serif;
font-size: 24pt; }
font-size: 24pt;
}
#subsetOutput {
color: #88c0d0; }
color: #88c0d0;
}
#wholeOutput {
color: #b48ead; }
color: #b48ead;
}
#tlOutput {
color: #d08770; }
color: #d08770;
}
#tOutput {
color: #ebcb8b; }
color: #ebcb8b;
}
#lOutput {
color: #a3be8c; }
color: #a3be8c;
}
#sumDiv {
text-align: center; }
text-align: center;
}
button {
display: inline-block;
@@ -47,22 +58,26 @@ button {
border: 4px solid #88c0d0;
box-sizing: border-box;
text-decoration: none;
font-family: 'Roboto',sans-serif;
font-family: "Roboto", sans-serif;
font-size: 14pt;
color: #434c5e;
background-color: #eceff4;
text-align: center;
position: relative;
transition: all 0.15s; }
button:hover {
background-color: #4c566a;
color: #eceff4;
border-color: #5e81ac; }
button:focus {
border: 4px solid #88c0d0;
box-sizing: border-box; }
transition: all 0.15s;
}
button:hover {
background-color: #4c566a;
color: #eceff4;
border-color: #5e81ac;
}
button:focus {
border: 4px solid #88c0d0;
box-sizing: border-box;
}
#chillin {
display: none; }
display: none;
}
/*# sourceMappingURL=style.css.map */