docs: add level and hypotenuse documentation

Author: EscapedGibbon

docs/Features/Filters/hypotenuse.md

@@ -0,0 +1,30 @@
+[Check options and parameters of hypotenuse method](https://image-js.github.io/image-js-typescript/classes/Image.html#hypotenuse 'github.io link')
+
+:::caution
+This method works only with images.
+:::
+
+A "hypotenuse filter" is using two compatible images to change values of each pixel by calculating [Euclidean distance](https://en.wikipedia.org/wiki/Euclidean_distance 'wikipedia link on Euclidean distance') with the formula:
+
+$$
+NewValue = \sqrt{Value1^2+Value2^2}
+$$
+
+Where $$Value1$$ is a value of the pixel in the first image and $$Value2$$ is the value in the second one. The goal is to identify which points in one image correspond to points in another image, which is essential for various computer vision and image processing applications. Calculating hypotenuse value between two pixels is necessary for image aligning, feature matching.
+
+:::caution
+Images must be compatible by size, bit depth, number of channels and number of alpha channels. However, for the resulting image the bit depth and number of channels depends on the input options.
+:::
+
+### Parameters and default values
+
+- `otherImage`
+
+- `options`
+
+#### Options
+
+| Property                                                                                                | Required | Default value    |
+| ------------------------------------------------------------------------------------------------------- | -------- | ---------------- |
+| [`bitDepth`](https://image-js.github.io/image-js-typescript/interfaces/HypotenuseOptions.html#bitDepth) | no       | `image.bitDepth` |
+| [`channels`](https://image-js.github.io/image-js-typescript/interfaces/HypotenuseOptions.html#channels) | no       | -                |

docs/Features/Filters/level.demo.tsx

@@ -1,5 +1,12 @@
 import { Image } from 'image-js';
 
 export default function level(image: Image) {
-  return image.level({ outputMin: 0, outputMax: 500, gamma: 1 });
+  image = image.grey();
+  return image.level({
+    inputMin: image.maxValue - 200,
+    inputMax: image.maxValue,
+    outputMin: 0,
+    outputMax: 300,
+    gamma: 1,
+  });
 }

docs/Features/Filters/level.md

@@ -2,10 +2,54 @@ import LevelDemo from './level.demo.tsx'
 
 [Check options and parameters of level method](https://image-js.github.io/image-js-typescript/classes/Image.html#level 'github.io link')
 
-`level` method
-Level method
-enhances contrasts of the image
+:::caution
+This method only works with images.
+:::
+
+`level` method applies process called ["histogram equalization"](https://en.wikipedia.org/wiki/Histogram_equalization 'wikipedia link on histogram equalization').
+Histogram equalization is a technique used in image processing to enhance the contrast and visibility of details in an image by redistributing the pixel intensity values.
+This process can make details in both dark and bright regions of the image more visible.
 
 <LevelDemo />
 
-how it works:
+### Parameters and default values
+
+- `options`
+
+#### Options
+
+| Property                                                                                             | Required | Default value    |
+| ---------------------------------------------------------------------------------------------------- | -------- | ---------------- |
+| [`channels`](https://image-js.github.io/image-js-typescript/interfaces/LevelOptions.html#channels)   | no       | -                |
+| [`gamma`](https://image-js.github.io/image-js-typescript/interfaces/LevelOptions.html#gamma)         | no       | `1`              |
+| [`inputMin`](https://image-js.github.io/image-js-typescript/interfaces/LevelOptions.html#inputMin)   | no       | `0`              |
+| [`inputMax`](https://image-js.github.io/image-js-typescript/interfaces/LevelOptions.html#inputMax)   | no       | `image.maxValue` |
+| [`out`](https://image-js.github.io/image-js-typescript/interfaces/LevelOptions.html#out)             | no       | -                |
+| [`outputMin`](https://image-js.github.io/image-js-typescript/interfaces/LevelOptions.html#outputMin) | no       | `0`              |
+| [`outputMax`](https://image-js.github.io/image-js-typescript/interfaces/LevelOptions.html#outputMax) | no       | `image.maxValue` |
+
+<details>
+<summary><b>Implementation</b></summary>
+
+Here's how level filter is implemented in ImageJS:
+
+_Input border values selection_: The first step is to choose the range of values where the filter must be applied.
+
+_Output border values selection_: Then the range of output values must be chosen. It is necessary to understand in what output limits should lie pixels that belong to the input values set.
+
+_Calculation of the values_: After getting input and output values each pixel's gets compared with it and a ratio is calculated by using formula:
+
+$$
+(value - inputMin)/(inputMax - inputMin)
+$$
+
+where $$value$$ is a value of a pixel which is within the input borders. Otherwise it is equal to maximum input value.
+From there the formula is reciprocated to compute new output value.
+
+:::caution
+`gamma` option allows choosing the curve by which points will be connected. It uses [Bezier curves](https://en.wikipedia.org/wiki/B%C3%A9zier_curve 'wikipedia link on bezier curves') to manipulate this shape. The bigger the value, the smoother the connection is.
+:::
+
+_Setting the values_: After calculating it, the filter replaces the original pixel value with this levelled value. This process is repeated for every pixel in the image, as the window moves over the entire image.
+
+</details>

project-words.txt

@@ -16,4 +16,5 @@ isodata
 renyi
 shanbhag
 thresholded
-RGBA
+RGBA
+bezier