fix(curriculum): improve description and tests descriptions (#42546)
* fix: replace html with markdown and MathJax * fix: replace html with markdown and MathJax * fix: replace example * fix: clarify expected input and output * fix: add another test * fix: change image in seed code * fix: grammar Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
This commit is contained in:
@ -10,77 +10,61 @@ dashedName: zhang-suen-thinning-algorithm
|
|||||||
|
|
||||||
This is an algorithm used to thin a black and white i.e. one bit per pixel images. For example, with an input image of:
|
This is an algorithm used to thin a black and white i.e. one bit per pixel images. For example, with an input image of:
|
||||||
|
|
||||||
<!-- TODO write fully in markdown>
|
```js
|
||||||
<!-- markdownlint-disable -->
|
const testImage1 = [
|
||||||
|
' ',
|
||||||
<pre>
|
'######### ######## ',
|
||||||
################# #############
|
'### #### #### #### ',
|
||||||
################## ################
|
'### ### ### ### ',
|
||||||
################### ##################
|
'### #### ### ',
|
||||||
######## ####### ###################
|
'######### ### ',
|
||||||
###### ####### ####### ######
|
'### #### ### ### ',
|
||||||
###### ####### #######
|
'### #### ### #### #### ### ',
|
||||||
################# #######
|
'### #### ### ######## ### ',
|
||||||
################ #######
|
' '
|
||||||
################# #######
|
];
|
||||||
###### ####### #######
|
```
|
||||||
###### ####### #######
|
|
||||||
###### ####### ####### ######
|
|
||||||
######## ####### ###################
|
|
||||||
######## ####### ###### ################## ######
|
|
||||||
######## ####### ###### ################ ######
|
|
||||||
######## ####### ###### ############# ######
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
It produces the thinned output:
|
It produces the thinned output:
|
||||||
|
|
||||||
<pre>
|
```js
|
||||||
|
[ ' ',
|
||||||
|
'######## ###### ',
|
||||||
|
'# # ## ',
|
||||||
|
'# # # ',
|
||||||
|
'# # # ',
|
||||||
|
'###### # # ',
|
||||||
|
'# ## # ',
|
||||||
|
'# # # ## ## # ',
|
||||||
|
'# # #### ',
|
||||||
|
' ' ];
|
||||||
|
```
|
||||||
|
|
||||||
# ########## #######
|
## Algorithm
|
||||||
## # #### #
|
|
||||||
# # ##
|
|
||||||
# # #
|
|
||||||
# # #
|
|
||||||
# # #
|
|
||||||
############ #
|
|
||||||
# # #
|
|
||||||
# # #
|
|
||||||
# # #
|
|
||||||
# # #
|
|
||||||
# ##
|
|
||||||
# ############
|
|
||||||
### ###
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<h2>Algorithm</h2>
|
|
||||||
|
|
||||||
Assume black pixels are one and white pixels zero, and that the input image is a rectangular N by M array of ones and zeroes. The algorithm operates on all black pixels P1 that can have eight neighbours. The neighbours are, in order, arranged as:
|
Assume black pixels are one and white pixels zero, and that the input image is a rectangular N by M array of ones and zeroes. The algorithm operates on all black pixels P1 that can have eight neighbours. The neighbours are, in order, arranged as:
|
||||||
|
|
||||||
<table border="3">
|
$$\begin{array}{|c|c|c|}
|
||||||
<tr><td style="text-align: center;">P9</td><td style="text-align: center;">P2</td><td style="text-align: center;">P3</td></tr>
|
\\hline
|
||||||
<tr><td style="text-align: center;">P8</td><td style="text-align: center;"><strong>P1</strong></td><td style="text-align: center;">P4</td></tr>
|
P9 & P2 & P3\\\\ \\hline
|
||||||
<tr><td style="text-align: center;">P7</td><td style="text-align: center;">P6</td><td style="text-align: center;">P5</td></tr>
|
P8 & \boldsymbol{P1} & P4\\\\ \\hline
|
||||||
</table>
|
P7 & P6 & P5\\\\ \\hline
|
||||||
|
\end{array}$$
|
||||||
|
|
||||||
Obviously the boundary pixels of the image cannot have the full eight neighbours.
|
Obviously the boundary pixels of the image cannot have the full eight neighbours.
|
||||||
|
|
||||||
<ul>
|
- Define $A(P1)$ = the number of transitions from white to black, ($0 \to 1$) in the sequence P2, P3, P4, P5, P6, P7, P8, P9, P2. (Note the extra P2 at the end - it is circular).
|
||||||
<li>Define $A(P1)$ = the number of transitions from white to black, (0 -> 1) in the sequence P2, P3, P4, P5, P6, P7, P8, P9, P2. (Note the extra P2 at the end - it is circular).</li>
|
- Define $B(P1)$ = the number of black pixel neighbours of P1. ($= \\sum(P2 \ldots P9)$)
|
||||||
<li>Define $B(P1)$ = the number of black pixel neighbours of P1. ( = sum(P2 .. P9) )</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
**Step 1:**
|
**Step 1:**
|
||||||
|
|
||||||
All pixels are tested and pixels satisfying all the following conditions (simultaneously) are just noted at this stage.
|
All pixels are tested and pixels satisfying all the following conditions (simultaneously) are just noted at this stage.
|
||||||
|
|
||||||
<ol>
|
1. The pixel is black and has eight neighbours
|
||||||
<li>The pixel is black and has eight neighbours</li>
|
2. $2 \le B(P1) \le 6$
|
||||||
<li>$2 <= B(P1) <= 6$</li>
|
3. $A(P1) = 1$
|
||||||
<li>$A(P1) = 1$</li>
|
4. At least one of $P2$, $P4$ and $P6$ is white
|
||||||
<li>At least one of <strong>P2, P4 and P6</strong> is white</li>
|
5. At least one of $P4$, $P6$ and $P8$ is white
|
||||||
<li>At least one of <strong>P4, P6 and P8</strong> is white</li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
After iterating over the image and collecting all the pixels satisfying all step 1 conditions, all these condition satisfying pixels are set to white.
|
After iterating over the image and collecting all the pixels satisfying all step 1 conditions, all these condition satisfying pixels are set to white.
|
||||||
|
|
||||||
@ -88,13 +72,11 @@ After iterating over the image and collecting all the pixels satisfying all step
|
|||||||
|
|
||||||
All pixels are again tested and pixels satisfying all the following conditions are just noted at this stage.
|
All pixels are again tested and pixels satisfying all the following conditions are just noted at this stage.
|
||||||
|
|
||||||
<ol>
|
1. The pixel is black and has eight neighbours
|
||||||
<li>The pixel is black and has eight neighbours</li>
|
2. $2 \le B(P1) \le 6$
|
||||||
<li>$2 <= B(P1) <= 6$</li>
|
3. $A(P1) = 1$
|
||||||
<li>$A(P1) = 1$</li>
|
4. At least one of $P2$, $P4$ and $P8$ is white
|
||||||
<li>At least one of <strong>P2, P4 and P8</strong> is white</li>
|
5. At least one of $P2$, $P6$ and $P8$ is white
|
||||||
<li>At least one of <strong>P2, P6 and P8</strong> is white</li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
After iterating over the image and collecting all the pixels satisfying all step 2 conditions, all these condition satisfying pixels are again set to white.
|
After iterating over the image and collecting all the pixels satisfying all step 2 conditions, all these condition satisfying pixels are again set to white.
|
||||||
|
|
||||||
@ -104,7 +86,7 @@ If any pixels were set in this round of either step 1 or step 2 then all steps a
|
|||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
Write a routine to perform Zhang-Suen thinning on the provided image matrix.
|
Write a routine to perform Zhang-Suen thinning on the provided `image`, an array of strings, where each string represents single line of the image. In the string, `#` represents black pixel, and whitespace represents white pixel. Function should return thinned image, using the same representation.
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
@ -117,19 +99,25 @@ assert.equal(typeof thinImage, 'function');
|
|||||||
`thinImage` should return an array.
|
`thinImage` should return an array.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(Array.isArray(result));
|
assert(Array.isArray(thinImage(_testImage1)));
|
||||||
```
|
```
|
||||||
|
|
||||||
`thinImage` should return an array of strings.
|
`thinImage` should return an array of strings.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert.equal(typeof result[0], 'string');
|
assert.equal(typeof thinImage(_testImage1)[0], 'string');
|
||||||
```
|
```
|
||||||
|
|
||||||
`thinImage` should return an array of strings.
|
`thinImage(testImage1)` should return a thinned image as in the example.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert.deepEqual(result, expected);
|
assert.deepEqual(thinImage(_testImage1), expected1);
|
||||||
|
```
|
||||||
|
|
||||||
|
`thinImage(testImage2)` should return a thinned image.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert.deepEqual(thinImage(_testImage2), expected2);
|
||||||
```
|
```
|
||||||
|
|
||||||
# --seed--
|
# --seed--
|
||||||
@ -137,7 +125,31 @@ assert.deepEqual(result, expected);
|
|||||||
## --after-user-code--
|
## --after-user-code--
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const imageForTests = [
|
const _testImage1 = [
|
||||||
|
' ',
|
||||||
|
'######### ######## ',
|
||||||
|
'### #### #### #### ',
|
||||||
|
'### ### ### ### ',
|
||||||
|
'### #### ### ',
|
||||||
|
'######### ### ',
|
||||||
|
'### #### ### ### ',
|
||||||
|
'### #### ### #### #### ### ',
|
||||||
|
'### #### ### ######## ### ',
|
||||||
|
' '
|
||||||
|
];
|
||||||
|
const expected1 = [
|
||||||
|
' ',
|
||||||
|
'######## ###### ',
|
||||||
|
'# # ## ',
|
||||||
|
'# # # ',
|
||||||
|
'# # # ',
|
||||||
|
'###### # # ',
|
||||||
|
'# ## # ',
|
||||||
|
'# # # ## ## # ',
|
||||||
|
'# # #### ',
|
||||||
|
' '
|
||||||
|
];
|
||||||
|
const _testImage2 = [
|
||||||
' ',
|
' ',
|
||||||
' ################# ############# ',
|
' ################# ############# ',
|
||||||
' ################## ################ ',
|
' ################## ################ ',
|
||||||
@ -156,7 +168,7 @@ const imageForTests = [
|
|||||||
' ######## ####### ###### ################ ###### ',
|
' ######## ####### ###### ################ ###### ',
|
||||||
' ######## ####### ###### ############# ###### ',
|
' ######## ####### ###### ############# ###### ',
|
||||||
' '];
|
' '];
|
||||||
const expected = [
|
const expected2 = [
|
||||||
' ',
|
' ',
|
||||||
' ',
|
' ',
|
||||||
' # ########## ####### ',
|
' # ########## ####### ',
|
||||||
@ -176,35 +188,27 @@ const expected = [
|
|||||||
' ',
|
' ',
|
||||||
' '
|
' '
|
||||||
];
|
];
|
||||||
const result = thinImage(imageForTests);
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## --seed-contents--
|
## --seed-contents--
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const testImage = [
|
|
||||||
' ',
|
|
||||||
' ################# ############# ',
|
|
||||||
' ################## ################ ',
|
|
||||||
' ################### ################## ',
|
|
||||||
' ######## ####### ################### ',
|
|
||||||
' ###### ####### ####### ###### ',
|
|
||||||
' ###### ####### ####### ',
|
|
||||||
' ################# ####### ',
|
|
||||||
' ################ ####### ',
|
|
||||||
' ################# ####### ',
|
|
||||||
' ###### ####### ####### ',
|
|
||||||
' ###### ####### ####### ',
|
|
||||||
' ###### ####### ####### ###### ',
|
|
||||||
' ######## ####### ################### ',
|
|
||||||
' ######## ####### ###### ################## ###### ',
|
|
||||||
' ######## ####### ###### ################ ###### ',
|
|
||||||
' ######## ####### ###### ############# ###### ',
|
|
||||||
' '];
|
|
||||||
|
|
||||||
function thinImage(image) {
|
function thinImage(image) {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const testImage1 = [
|
||||||
|
' ',
|
||||||
|
'######### ######## ',
|
||||||
|
'### #### #### #### ',
|
||||||
|
'### ### ### ### ',
|
||||||
|
'### #### ### ',
|
||||||
|
'######### ### ',
|
||||||
|
'### #### ### ### ',
|
||||||
|
'### #### ### #### #### ### ',
|
||||||
|
'### #### ### ######## ### ',
|
||||||
|
' '
|
||||||
|
];
|
||||||
```
|
```
|
||||||
|
|
||||||
# --solutions--
|
# --solutions--
|
||||||
|
Reference in New Issue
Block a user