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:
gikf
2021-06-28 09:46:25 +02:00
committed by GitHub
parent 35f8295d7a
commit 052173e502

View File

@ -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,14 +72,12 @@ 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.
**Iteration:** **Iteration:**
@ -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--