Skip to content

Commit f72454a

Browse files
EscapedGibbonEscapedGibbon
authored
docs: add watershed and other related pages in features category (#78)
* docs wip add watershed filter page * docs: add example of watershed * docs: minor fixes * docs: small fix in formatting * docs: add exception in cspell * docs: temporarily put watershed demo in comments * docs: expand watershed explanation * docs: add a better example of blurring * docs: specify points in the watershed example * docs: finalize watershed pr * docs: add links to watershed options * docs: fix spellcheck * docs: add links to github io and improve phrasing * docs: remove duplicated image * docs: clarify nd reformat text for watershed
1 parent 5b0a970 commit f72454a

File tree

13 files changed

+153
-28
lines changed

13 files changed

+153
-28
lines changed

‎docs/Features/Operations/Get extrema.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
sidebar_position: 20
3+
---
4+
5+
_Finds extreme pixel values in the image._
6+
7+
`getExtrema`, as the name suggests, finds extreme intensity values of the image. If user looks for minimum values it finds the darkest points, when maximum - the brightest.
8+
9+
The principle is straight-forward: the function iterates through each point and compares values around it. If all the values around point in question is smaller then the point is considered a minimum. Same algorithm for maximum values.
10+
11+
:::info
12+
By choosing different algorithm option you can change the size of the neighboring area where the extrema is search.
13+
:::
14+
:::tip
15+
You can add a mask as an option to specify locations where to look for extrema.
16+
:::
17+
18+
| Minimum | Maximum |
19+
| ------------------------------------------------------------------ | ------------------------------------------------------------------ |
20+
| ![Minimum](./images/extremaOutput/CellsOutputcrossMinISODATA5.jpg) | ![Maximum](./images/extremaOutput/CellsOutputcrossMaxISODATA5.jpg) |
21+
22+
### Parameters and default values
23+
24+
- `image`
25+
26+
- `options`
27+
28+
#### Options
29+
30+
| Property | Required | Default value |
31+
| --------------------------------------------------------------------------------------------------------------- | -------- | ------------- |
32+
| [`kind`](https://image-js.github.io/image-js-typescript/interfaces/RemoveClosePointsOptions.html#distance) | no | `'maximum'` |
33+
| [`mask`](https://image-js.github.io/image-js-typescript/interfaces/RemoveClosePointsOptions.html#distance) | no | - |
34+
| [`algorithm`](https://image-js.github.io/image-js-typescript/interfaces/RemoveClosePointsOptions.html#distance) | no | `star` |
35+
| [`maxEquals`](https://image-js.github.io/image-js-typescript/interfaces/RemoveClosePointsOptions.html#distance) | no | `2` |

‎docs/Features/Operations/Operations.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
sidebar_position: 0
3+
---
4+
5+
Operations section is dedicated to elements of ImageJS that are mostly used to help with or to transition from one image data type to another.
6+
For instance, threshold is used to go from Image to Mask, while watershed is used to create ROI map.
7+
8+
### Methods
9+
10+
| Can be applied on | Images | Masks |
11+
| ------------------------------------------------------------------------------------- | ------- | -------- |
12+
| [Get extrema(`getExtrema`)](./Get%20extrema.md 'internal link on getExtrema') | ✅ | ❌ |
13+
| [Filter points(`filterPoints`)](./Remove%20points.md 'internal link on filterPoints') | ✅ | ❌ |
14+
| [Threshold(`erode`)](./Threshold.md 'internal link on threshold') | ✅ | ❌ |
15+
| [Watershed(`dilate`)](./Watershed.md 'internal link on watershed') | ✅ | ❌ |

‎docs/Features/Operations/Remove points.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
sidebar_position: 30
3+
---
4+
5+
_Filters close points by minimum distance between each other._
6+
7+
`removeClosePoints` function is used for filtering points that are close to each other.
8+
9+
This function sorts an array of points by intensity and then calculates euclidean distance between the points. If the distance between points is smaller than the `removeClosePoints` option the compared point gets removed.
10+
11+
| Extrema without `removeClosePoints` | Extrema with `removeClosePoints` |
12+
| ---------------------------------------------------------------------- | --------------------------------------------------------------------------- |
13+
| ![Image Input](./images/extremaOutput/CellsOutputcrossMinISODATA5.jpg) | ![Image Output](./images/filterPointsOutput/CellsOutputcross17ISODATA5.jpg) |
14+
15+
### Parameters and default values
16+
17+
- `points`
18+
19+
- `image`
20+
21+
- `options`
22+
23+
#### Options
24+
25+
| Property | Required | Default value |
26+
| -------------------------------------------------------------------------------------------------------------- | -------- | ------------- |
27+
| [`distance`](https://image-js.github.io/image-js-typescript/interfaces/RemoveClosePointsOptions.html#distance) | yes | - |
28+
| [`kind`](https://image-js.github.io/image-js-typescript/interfaces/RemoveClosePointsOptions.html#distance) | yes | - |
29+
| [`channel`](https://image-js.github.io/image-js-typescript/interfaces/RemoveClosePointsOptions.html#channel) | no | `0` |

‎docs/Features/Operations/Threshold.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
---
2+
sidebar_position: 0
3+
---
4+
15
import ThresholdDemo from './demos/threshold.demo.tsx'
26

37
_Grayscale image into a binary image by setting a specific threshold value or algorithm._

‎docs/Features/Operations/Watershed.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
sidebar_position: 40
3+
---
4+
5+
_Separates and identifies distinct regions or objects within an image through gradient information and marker-based segmentation._
6+
7+
[🖼️ Image options and parameters of `waterShed` function](https://image-js.github.io/image-js-typescript/functions/waterShed.html 'github io link')
8+
9+
[Watershed filter](<https://en.wikipedia.org/wiki/Watershed_(image_processing)> 'wikipedia link on watershed') is a way of identifying objects by finding image's extreme points (minima or maxima) in terms of intensity and filling these spaces with color (label). The process reminds geological [watershed](https://en.wikipedia.org/wiki/Drainage_divide 'wikipedia link on drainage divide'), which is the origin of algorithm's name. In order for the "water" not to go overboard and stay within the limits of the region, these limits must be set.
10+
11+
There are two ways to do so. One way is to limit the [intensity](../../Glossary.md#intensity 'internal link on glossary') by threshold value. Another way is to apply a mask which can set the area where watershed will be implemented.
12+
13+
The watershed algorithm is particularly useful for segmenting objects in images, especially when objects are close to each other.
14+
15+
:::caution
16+
If you look for bright-colored ROIs, then either look for maximum points or invert image before applying watershed.
17+
:::
18+
19+
| Input image with given minima | What watershed finds |
20+
| -------------------------------------------------------------------------- | ----------------------------------------------------------------- |
21+
| ![Image Input](./images/filterPointsOutput/CellsOutputcross17ISODATA5.jpg) | ![Image Output](./images/watershedOutput/CellsOutputISODATA5.jpg) |
22+
23+
### Parameters and default values
24+
25+
- `image`
26+
27+
- `options`
28+
29+
#### Options
30+
31+
| Property | Required | Default value |
32+
| -------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------ |
33+
| [`mask`](https://image-js.github.io/image-js-typescript/interfaces/WaterShedOptions.html#mask) | no | - |
34+
| [`points`](https://image-js.github.io/image-js-typescript/interfaces/WaterShedOptions.html#points) | no | minimum points from [`getExtrema()`](./Get%20extrema.md 'internal link on get extrema') function |
35+
| [`threshold`](https://image-js.github.io/image-js-typescript/interfaces/WaterShedOptions.html#threshold) | no | `1` |

‎docs/Features/Operations/images/extremaOutput/CellsOutputcrossMaxISODATA5.jpg

45.7 KB
Loading

‎docs/Features/Operations/images/extremaOutput/CellsOutputcrossMinISODATA5.jpg

44.5 KB
Loading

‎docs/Features/Operations/images/filterPointsOutput/CellsOutputcross17ISODATA5.jpg

44.5 KB
Loading

‎docs/Features/Operations/images/watershedOutput/CellsDivision.jpg

11.2 KB
Loading

‎docs/Features/Operations/images/watershedOutput/CellsOutputISODATA5.jpg

42.6 KB
Loading

0 commit comments

Comments
 (0)