docs: implement feedback to getting started and basic section (#99)

Author: EscapedGibbon

docs/Basics/Working with Images.md

@@ -6,6 +6,8 @@ import ImageDemo from './image.demo.tsx'
 
 In the context of digital technology and computing, images are represented as a grid of pixels, with each pixel containing information about color and intensity.
 
+<ImageDemo />
+
 ### Types of images supported by ImagesJS
 
 - Currently ImageJS supports images with these characteristics:
@@ -43,15 +45,17 @@ In ImageJS main properties of an image are:
 
 - data: typed array with information about image's pixels.
 
-- [Color model](../Glossary.md#color-model 'internal link on glossary'): the abstract model of how pixel colors are formed.
+- [Color model](../Glossary.md#color-model 'internal link on color model'): the abstract model of how pixel colors are formed.
 
-- [Bit depth](../Glossary.md#bit-depth 'internal link on glossary'): number of bits allocated to each channel.
+- [Bit depth](../Glossary.md#bit-depth 'internal link on bit depth'): number of bits allocated to each channel.
 
-- [Number of channels/components](../Glossary.md#channel 'internal link on glossary'): number of color channels that each pixel has. Grey image has one, RGB-type of image has three.
+- [Number of channels](../Glossary.md#channel 'internal link on channels'): number of color channels that each pixel has. Grey image has one, RGB-type of image has three.
 
-- [Metadata](../Glossary.md#metadata 'internal link on metadata'): data about data.
+- [Number of components](../Glossary.md#component 'internal link on components'): number of color channels that each pixel has but without alpha channel.
 
-The latter ones matter most in features that involve two images, like [hypotenuse method](../Features/Comparison/Hypotenuse.md 'internal link on hypotenuse') or [subtraction method](../Features/Comparison/Subtraction.md 'internal link on subtraction method'). It simply will not work if images are not compatible by bit depth, color model or size.
+- [Alpha channel](../Glossary.md#alpha-channel 'internal link on alpha-channel'): channel that represents the transparency or opacity levels of pixels.
+
+- [Metadata](../Glossary.md#metadata 'internal link on metadata'): data about data. A basic example would be date and time when an image was taken
 
 ### Features
 
@@ -65,4 +69,4 @@ Currently, there are several ways of processing an image:
 
 - [Morphology](../Features/Morphology/Morphology.md 'internal link on morphology'): enables shape analysis and shape identification.
 
-<ImageDemo />
+- [ROI analysis](../Features/Regions%20of%20interest/Regions%20of%20interest.md 'internal link on roi analysis'): these features allow targeting and extracting relevant information from specific regions of interest.

docs/Basics/Working with Masks.md

@@ -24,7 +24,7 @@ const mask = new Mask(500, 500); // Creates a simple mask filled with 0s of size
 Another approach is to obtain a mask by using [`threshold` method](../Features/Operations/Threshold.md 'internal link on threshold') on an image.
 
 ```ts
-image = image.threshold(); // returns a mask
+const mask = image.threshold(); // returns a mask
 ```
 
 In most cases, thresholding is your go-to method to get a mask from an image.
@@ -40,7 +40,7 @@ In most cases, thresholding is your go-to method to get a mask from an image.
 There is also a third way to get a mask. It is to use [`cannyEdgeDetector` method](../Features/Morphology/Canny%20Edge%20Detector.md).
 
 ```ts
-image = image.cannyEdgeDetector(); // returns a mask
+const mask = image.cannyEdgeDetector(); // returns a mask
 ```
 
 <CannyMaskDemo />

docs/Basics/Working with ROIs.md

@@ -15,7 +15,7 @@ import { fromMask } from 'image-js';
 const rois = fromMask(mask).getRois();
 ```
 
-In general you don't need to worry about the intermediate object returned by `fromMask()`. You will mostly be working with the list of ROIs returned by `getRois()`. It contains all the useful properties which characterize the regions of interest, such as surface, perimeter, centroid etc.
+In general you don't need to worry about the intermediate object returned by `fromMask()`. You will mostly be working with the list of ROIs returned by `getRois()`. It contains all the properties which characterize the region of interest, such as surface, perimeter, fill ratio, etc.
 
 :::tip
 In the options parameter,`getRois()` has a `kind` option which tells what kind of regions to return.
@@ -28,7 +28,8 @@ In the options parameter,`getRois()` has a `kind` option which tells what kind o
 
 :::
 Let's take a look at a real life example.  
-Here you have an image of particles under electron microscopy magnified where 1px = 0.2727 nm. Let's say we want to get the data about all the regions presented on the image and calculate their Feret diameters.
+Here you have an image of particles under electron microscopy magnified at 1px = 0.2727 nm. Let's say we want to sort the data by size and observe its distribution.
+It can be use in various fields, whether it is for quality control to see if all products have the same features and characteristics or for physical properties of material such as surface area and reactivity.
 
 ![input image](./roiImages/inputImage.png)
 
@@ -37,27 +38,41 @@ It can be done with with following code:
 ```ts
 import { Image, fromMask } from 'image-js';
 
-//Convert image to grayscale, then apply a blur on it. This will smooth out the noise and avoid creating many small ROIs in the next steps(image 1).
+//Convert image to grayscale, then apply a blur on it. This will
+// smooth out the noise and avoid creating many small ROIs in the next steps(image 1).
 const image = sourceImage.grey().blur({ width: 5, height: 5 });
-//Use threshold to convert the grayscale image to a Mask. The default threshold algorithm is Otsu which  will automatically determine the threshold between black and white pixels by minimizing intra-class intensity variance(image 2).
-const mask = image.threshold();
+//Clear border excludes border regions from mask if they don't
+//fit completely on an image.
+const mask = clearBorder(image.threshold(), { color: 'black' });
 
 //Receive all the regions of interest from mask(colored on image 3).
 const roiMap = fromMask(mask);
 const rois = roiMap.getRois({ kind: 'black' });
 
-for (const roi of rois) {
-  //Get Feret diameters for each ROI(colored on image 4)
-  const feret = roi.feret;
+//Distribute regions by size(surface).
+//First we find limits and intervals for our size classes.
+const maxSurface = Math.max(...rois.map((roi) => roi.surface));
+const minSurface = Math.min(...rois.map((roi) => roi.surface));
+const span = maxSurface - minSurface;
+const interval = Math.round(span / Math.sqrt(rois.length));
+
+const bySizeDistribution = new Map();
+//We count number of regions that belong to each interval separately.
+for (let i = minSurface; i < maxSurface; i += interval) {
+  const count = rois.filter((roi) => {
+    return roi.surface >= i && roi.surface < i + interval;
+  }).length;
+  const intervalString = i + '-' + (i + interval - 1);
+
+  bySizeDistribution.set(intervalString, {
+    frequency: count,
+    percentage: ((count / rois.length) * 100).toFixed(2),
+  });
 }
 ```
 
-Each region of interest possesses many properties and characteristics (ROIs are highlighted in blue on Image 3).
-Feret diameter is a rather advanced property, but there are also more general and basic ones, like surface or perimeter.
+This will give us a map with stored number of regions per each size interval. This may be a basic example but such analysis is widely used in biology and medicine. It can provide valuable information about predominant cell size or find abnormalities in cells ratio.
 
-![combination of images](./roiImages/comboImage.png)
+![Combination of images](./roiImages/comboImage2.png)
 
-If you need a further insight on ROIs level of elongation and shape, however, you can use Feret diameter by calling it with `roi.feret`.
-In our current example, they are represented as two green segments(Image 4).
-
-Properties shown here only represent a part of what ImageJS analysis is capable of. To learn more about our analysis tools you can visit Analysis section.
+To learn more about our analysis tools you can visit our ROI Analysis section.

docs/Basics/roi.demo.tsx

@@ -1,4 +1,4 @@
-This section is dedicated to analysis of mask and its specific regions. ImageJS is first and foremost an analyzer of particles and analysis of regions of interest. Therefore there are tools that help detecting particles as well as determining their size, shape position and direction.
+This section is dedicated to regions' analysis of mask and its specific regions. Regions of Interest (ROI) are areas or regions within an image that are selected for further analysis, processing, or attention due to their relevance to a particular task or objective. ImageJS can be an analyzer of particles and analysis of regions of interest. Therefore there are tools that help detecting particles as well as determining their size, shape position and direction.
 
 ### Methods
 

docs/Basics/roiImages/comboImage2.png

@@ -39,24 +39,23 @@ Local loading uses `readSync` function with indicated filepath:
 ```ts
 import { readSync } from 'image-js';
 
-let parsedImage = readSync('../example.jpg');
+const parsedImage = readSync('../example.jpg');
 ```
 
-It gets an image
 :::tip
 Node.js can also load an image via `fetch` function. To get more information take a look at "Browser" part of this section.
 :::
 
-Once the image is loaded, it returns an instance of the `Image` class, so its methods can be applied. For example, if you want to apply an [invert filter](/Features/Filters/Invert.md 'internal link on invert filter') you can use the invert method:
+Once the image is loaded, it returns an instance of the `Image` class, so its methods can be applied.
 
 ```ts
-image = image.invert();
+const image = parsedImage.invert();
 ```
 
 To save an image use `writeSync` function:
 
 ```ts
-writeSync('example.jpg', image);
+writeSync('../example.jpg', image);
 ```
 
 Image format is automatically identified based on the extension typed by the user. In this case it's `'.jpg'`.
@@ -66,9 +65,9 @@ So, in the end you should get a code like this.
 ```ts
 import { readSync, writeSync, Image } from 'image-js';
 
-let image = readSync('../example.jpg');
-image = image.invert();
-writeSync('example.jpg', image);
+const parsedImage = readSync('../example.jpg');
+const image = parsedImage.invert();
+writeSync('../example.jpg', image);
 ```
 
 ### Loading your first image in browser
@@ -78,23 +77,14 @@ To load an image via browser, in order to instantiate it, you need to get an `ar
 ```ts
 const data = await fetch('https:://example.com/image.jpg');
 const bufferedData = await data.arrayBuffer();
-const image = decode(new DataView(bufferedData)); // image is ready for usage
+let image = decode(new DataView(bufferedData)); // image is ready for usage
 
 image = image.grey();
 ```
 
+:::info
 To see more methods visit ["Features"](./Features/Features.md 'internal link on features') category.
-
-An image can also be loaded from a local host through a local filepath. You can use the `read` function
-
-```ts
-import { read } from 'image-js';
-
-const data = async () => {
-  const data = await read('file:///path/to/file.jpg');
-  data = image.invert();
-};
-```
+:::
 
 ### Bundling your image with Vite
 
@@ -144,7 +134,6 @@ In the `<body>` part of your code insert your `image-js` script. For instance, h
   let image = decode(new DataView(bufferedData)); // image is ready for usage
 
   image = image.grey();
-  console.log(Image);
   const canvas = document.getElementById('my_canvas');
   writeCanvas(image, canvas);
 </script>