docs: add getting started section and more (#70)

Author: EscapedGibbon

.gitignore

@@ -18,6 +18,10 @@
 .vscode
 frontmatter.json
 
+.vscode
+.frontmatter
+frontmatter.json
+
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

docs/Basics/Basics.md

@@ -0,0 +1,3 @@
+import DocCardList from '@theme/DocCardList';
+
+<DocCardList />

docs/Basics/Working with Images.md

@@ -0,0 +1,54 @@
+import ImageDemo from './image.demo.tsx'
+
+<!-- TODO add analysis section once it is merged -->
+
+### What is an Image?
+
+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.
+
+### Types of images supported by ImagesJS
+
+- Currently ImageJS supports images with these characteristics:
+
+|                                  | TIFF                       | JPEG                   | PNG               |
+| -------------------------------- | -------------------------- | ---------------------- | ----------------- |
+| **Bits per channel**             | 8 or 16 bits               | 8 bits                 | 8 or 16 bits      |
+| **Bits per Alpha**               | 8 or 16 bits               | N/A                    | 8 or 16 bits      |
+| **Compression**                  | yes/no(may be destructive) | no(may be destructive) | yes               |
+| **Color Model**                  | RGB and grayscale          | RGB and grayscale      | RGB and grayscale |
+| **Can be loaded in this format** | &#9989;                    | &#9989;                | &#9989;           |
+| **Can be saved in this format**  | &#10060;                   | &#9989;                | &#9989;           |
+
+### Properties
+
+In ImageJS main properties of an image are:
+
+- width
+
+- height
+
+- 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.
+
+- [Bit depth](../Glossary.md#bit-depth 'internal link on glossary'): 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.
+
+- [Metadata](../Glossary.md#metadata 'internal link on metadata'): data about data.
+
+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.
+
+### Features
+
+Currently, there are several ways of processing an image:
+
+- [Filtering](../Features/Filters/Filters.md 'internal link on filters'): filters usually apply some sort of [kernel](../Glossary.md#kernel 'internal link on kernel') to change an image.
+
+- [Comparison](../Features/Comparison/Comparison.md 'internal link on comparison'): these features compare two images for further feature matching between the two.
+
+- [Geometry](../Features/Geometry/Geometry.md 'internal link on geometry'): this part of ImageJS allows rotating and resizing an image.
+
+- [Morphology](../Features/Morphology/Morphology.md 'internal link on morphology'): enables shape analysis and shape identification.
+
+<ImageDemo />

docs/Basics/Working with Masks.md

@@ -0,0 +1,48 @@
+import ThresholdMaskDemo from './thresholdMask.demo.tsx'
+import CannyMaskDemo from './cannyEdgeMask.demo.tsx'
+
+Masks are binary images which are used for filtering or isolating specific regions of interest within an image for processing and analysis.
+
+### Create a Mask object
+
+In ImageJS there are three ways of creating a mask.
+First method for creating a mask is creating a Mask object. It is the easiest way, but once applied on the image, such mask will not affect it in any way, so it needs to be additionally customized by user.
+
+```ts
+const mask = new Mask(500, 500); // Creates a simple mask filled with 0s of size 500x500.
+```
+
+#### Options
+
+| Property                                                                                      | Required | Default value          |
+| --------------------------------------------------------------------------------------------- | -------- | ---------------------- |
+| [`origin`](https://image-js.github.io/image-js-typescript/interfaces/MaskOptions.html#origin) | no       | `{row: 0, column: 0 }` |
+| [`data`](https://image-js.github.io/image-js-typescript/interfaces/MaskOptions.html#data)     | no       | -                      |
+
+### Use `threshold()` method
+
+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
+```
+
+In most cases, thresholding is your go-to method to get a mask from an image.
+
+<ThresholdMaskDemo />
+
+:::tip
+`threshold()`method possesses different algorithms which can affect the mask output. It is better to try several of them to see which one fits your needs best. For instance the demo above uses [`'otsu'`](https://en.wikipedia.org/wiki/Otsu%27s_method 'wikipedia link on otsu') algorithm.
+:::
+
+### Use `cannyEdgeDetector()` method
+
+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
+```
+
+<CannyMaskDemo />
+
+Canny Edge detection is useful when there is a need to determine edges of the elements. Elements with a change of intensity are colored white, while regions with no change are colored black.

docs/Basics/Working with ROIs.md

@@ -0,0 +1,63 @@
+_A region of interest (ROI) represents an area of contiguous pixels within the dimensions of an image._
+
+There are currently two ways ROIs can be generated in ImageJS:
+
+- From [masks](./Working%20with%20Masks.md 'internal link on working with mask') by identifying contiguous black or white pixels within it.
+<!-- TODO: add links to the relevant sections once they exist -->
+- By identifying starting points of interest (for example by finding and filtering local extrema) and running the watershed algorithm on them.
+
+ROIs identify and characterize regions within images, which has wide applications in image analysis.
+
+```ts
+import { fromMask } from 'image-js';
+
+// Get the list of ROIs representing the white regions of the mask
+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.
+
+:::tip
+In the options parameter,`getRois()` has a `kind` option which tells what kind of regions to return.
+
+| `kind` option | What it does               |
+| ------------- | -------------------------- |
+| `'bw'`        | returns all the regions    |
+| `'black'`     | returns only black regions |
+| `'white'`     | returns only white regions |
+
+:::
+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.
+
+![input image](./roiImages/inputImage.png)
+
+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).
+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();
+
+//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;
+}
+```
+
+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.
+
+![combination of images](./roiImages/comboImage.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.

docs/Basics/_category_.json

@@ -0,0 +1,3 @@
+{
+  "position": 10
+}

docs/Basics/cannyEdgeMask.demo.tsx

@@ -0,0 +1,6 @@
+import { Image } from 'image-js';
+
+export default function maskDemo(image: Image) {
+  let mask = image.grey().cannyEdgeDetector();
+  return mask;
+}

docs/Basics/image.demo.tsx

@@ -0,0 +1,6 @@
+import { Image } from 'image-js';
+
+export default function ImageDemo(image: Image) {
+  let mask = image.invert();
+  return mask;
+}

docs/Basics/roi.demo.tsx

@@ -0,0 +1,15 @@
+import { Image, fromMask } from 'image-js';
+
+export default function roiDemo(image: Image) {
+  let mask = image.blur({ width: 3, height: 3 }).grey().threshold();
+  let roiMap = fromMask(mask);
+  let rois = roiMap.getRois();
+  for (let roi of rois) {
+    image = image.paintMask(roi.getMask(), {
+      origin: { column: roi.origin.column, row: roi.origin.row },
+      color: [0, 0, 255],
+    });
+  }
+
+  return image;
+}