diff --git a/docs/basics/images/workingWithImages/coordinatesImage.jpg b/docs/basics/images/workingWithImages/coordinatesImage.jpg deleted file mode 100644 index 8ac660e5..00000000 Binary files a/docs/basics/images/workingWithImages/coordinatesImage.jpg and /dev/null differ diff --git a/docs/basics/images/workingWithImages/imageCoordOrigin.svg b/docs/basics/images/workingWithImages/imageCoordOrigin.svg new file mode 100644 index 00000000..142e7b01 --- /dev/null +++ b/docs/basics/images/workingWithImages/imageCoordOrigin.svg @@ -0,0 +1,1948 @@ + + + +originyyx diff --git a/docs/basics/working-with-images.md b/docs/basics/working-with-images.md index cce6a9d5..f7944cdc 100644 --- a/docs/basics/working-with-images.md +++ b/docs/basics/working-with-images.md @@ -26,7 +26,7 @@ In the context of digital technology and computing, images are represented as a The origin point has coordinates (0,0) and is located in the top-left corner of an image. -![Image coordinates](./images/workingWithImages/coordinatesImage.jpg) +![Image coordinates](./images/workingWithImages/imageCoordOrigin.svg) So, if we want to get a certain pixel on the image we will be counting the distance from image's top-left corner. diff --git a/docs/tutorials/applying-transform-function-on-images.md b/docs/tutorials/applying-transform-function-on-images.md index 329e1a6a..f13c7843 100644 --- a/docs/tutorials/applying-transform-function-on-images.md +++ b/docs/tutorials/applying-transform-function-on-images.md @@ -103,10 +103,10 @@ const transformationMatrix = [ [0, 2, 0], // d=0, e=2 (vertical scale), f=0 ]; -const scaledImage = image.transform(transformationMatrix); +const scaledImage = image.transform(transformationMatrix, { fullImage: true }); ``` -![Scaled image](./images/transformations/lennaScaled.png) +![Scaled image](./images/transformations/barbaraScaleDemo.png) ### Non-uniform Scaling @@ -116,11 +116,11 @@ const transformationMatrix = [ [3, 0, 0], // Horizontal stretch [0, 0.5, 0], // Vertical compression ]; - -const stretchedImage = image.transform(transformationMatrix); +// Added trueImage to include all pixels into a destination image +const stretchedImage = image.transform(transformationMatrix,, { fullImage: true }); ``` -![Stretched image](./images/transformations/lennaStretched.png) +![Stretched image](./images/transformations/barbaraStretchDemo.png) :::note ImageJS also has [`resize`](../features/geometry/resize.md) function that allows to scale an image. @@ -135,10 +135,10 @@ const shrinkMatrix = [ [0.5, 0, 0], [0, 0.5, 0], ]; -const shrunkImage = image.transform(shrinkMatrix); +const shrunkImage = image.transform(shrinkMatrix, { fullImage: true }); ``` -![Shrunk image](./images/transformations/lennaShrunk.png) +![Shrunk image](./images/transformations/barbaraShrinkDemo.png) ```ts // Mirror horizontally (flip left-right) @@ -146,10 +146,10 @@ const mirrorMatrix = [ [-1, 0, 0], [0, 1, 0], ]; -const mirroredImage = image.transform(mirrorMatrix); +const mirroredImage = image.transform(mirrorMatrix, { fullImage: true }); ``` -![Mirrored image](./images/transformations/lennaMirrorred.png) +![Mirrored image](./images/transformations/barbaraMirrorDemo.png) ```ts // Mirror vertically (flip up-down) @@ -157,10 +157,10 @@ const flipMatrix = [ [1, 0, 0], [0, -1, 0], ]; -const flippedImage = image.transform(flipMatrix); +const flippedImage = image.transform(flipMatrix, { fullImage: true }); ``` -![Flipped image](./images/transformations/lennaFlipped.png) +![Flipped image](./images/transformations/barbaraFlipDemo.png) :::note ImageJS also has [`flip`](../features/geometry/flip.md) function that allows to flip an image. Current tutorial just demonstrates the basic principle behind transformation of such kind. @@ -180,7 +180,7 @@ const translationMatrix = [ const translatedImage = image.transform(translationMatrix); ``` -![Translated image](./images/transformations/lennaTranslated.png) +![Translated image](./images/transformations/barbaraTranslateDemo.png) ### Rotation @@ -204,7 +204,7 @@ const rotationMatrix = [ const rotatedImage = image.transform(rotationMatrix); ``` -![Rotated image](./images/transformations/lennaRotated.png) +![Rotated image](./images/transformations/barbaraRotateBy45Demo.png) ### Shearing @@ -222,7 +222,7 @@ const horizontalShearMatrix = [ const horizontalShearImage = image.transform(horizontalShearMatrix); ``` -![Horizontally sheared image](./images/transformations/lennaHorizontalShear.png) +![Horizontally sheared image](./images/transformations/barbaraHorizontalShearDemo.png) #### Vertical shearing @@ -236,7 +236,7 @@ const verticalShearMatrix = [ const verticalShearImage = image.transform(verticalShearMatrix); ``` -![Vertically sheared image](./images/transformations/lennaVerticalShear.png) +![Vertically sheared image](./images/transformations/barbaraVerticalShearDemo.png) #### Combined shearing @@ -250,7 +250,7 @@ const combinedShearMatrix = [ const combinedShearImage = image.transform(combinedShearMatrix); ``` -![Combined shearing](./images/transformations/lennaCombinedShear.png) +![Combined shearing](./images/transformations/barbaraCombinedShearDemo.png) ### Complex Affine Transformations @@ -299,7 +299,7 @@ const rotateAroundCenterImage = image.transform( ); ``` -![Rotated by center image](./images/transformations/lennaRotatedCenter.png) +![Rotated by center image](./images/transformations/barbaraRotateAroundCenterDemo.png) :::note Image-js also has [`rotate()`](../features/geometry/rotate.md) and [`transformRotate()`](../features/geometry/transform-and-rotate.md) functions. `rotate()` function allows rotating an image by multiple of 90 degrees. diff --git a/docs/tutorials/images/transformations/barbaraCombinedShearDemo.png b/docs/tutorials/images/transformations/barbaraCombinedShearDemo.png new file mode 100644 index 00000000..29281d5d Binary files /dev/null and b/docs/tutorials/images/transformations/barbaraCombinedShearDemo.png differ diff --git a/docs/tutorials/images/transformations/barbaraFlipDemo.png b/docs/tutorials/images/transformations/barbaraFlipDemo.png new file mode 100644 index 00000000..a1a771f4 Binary files /dev/null and b/docs/tutorials/images/transformations/barbaraFlipDemo.png differ diff --git a/docs/tutorials/images/transformations/barbaraHorizontalShearDemo.png b/docs/tutorials/images/transformations/barbaraHorizontalShearDemo.png new file mode 100644 index 00000000..07553578 Binary files /dev/null and b/docs/tutorials/images/transformations/barbaraHorizontalShearDemo.png differ diff --git a/docs/tutorials/images/transformations/barbaraMirrorDemo.png b/docs/tutorials/images/transformations/barbaraMirrorDemo.png new file mode 100644 index 00000000..ca36184f Binary files /dev/null and b/docs/tutorials/images/transformations/barbaraMirrorDemo.png differ diff --git a/docs/tutorials/images/transformations/barbaraRotateAroundCenterDemo.png b/docs/tutorials/images/transformations/barbaraRotateAroundCenterDemo.png new file mode 100644 index 00000000..056fe24a Binary files /dev/null and b/docs/tutorials/images/transformations/barbaraRotateAroundCenterDemo.png differ diff --git a/docs/tutorials/images/transformations/barbaraRotateBy45Demo.png b/docs/tutorials/images/transformations/barbaraRotateBy45Demo.png new file mode 100644 index 00000000..f42c319f Binary files /dev/null and b/docs/tutorials/images/transformations/barbaraRotateBy45Demo.png differ diff --git a/docs/tutorials/images/transformations/barbaraScaleDemo.png b/docs/tutorials/images/transformations/barbaraScaleDemo.png new file mode 100644 index 00000000..87ac8d1a Binary files /dev/null and b/docs/tutorials/images/transformations/barbaraScaleDemo.png differ diff --git a/docs/tutorials/images/transformations/barbaraShrinkDemo.png b/docs/tutorials/images/transformations/barbaraShrinkDemo.png new file mode 100644 index 00000000..0fa703ff Binary files /dev/null and b/docs/tutorials/images/transformations/barbaraShrinkDemo.png differ diff --git a/docs/tutorials/images/transformations/barbaraStretchDemo.png b/docs/tutorials/images/transformations/barbaraStretchDemo.png new file mode 100644 index 00000000..032d5dc2 Binary files /dev/null and b/docs/tutorials/images/transformations/barbaraStretchDemo.png differ diff --git a/docs/tutorials/images/transformations/barbaraTranslateDemo.png b/docs/tutorials/images/transformations/barbaraTranslateDemo.png new file mode 100644 index 00000000..069b9f53 Binary files /dev/null and b/docs/tutorials/images/transformations/barbaraTranslateDemo.png differ diff --git a/docs/tutorials/images/transformations/barbaraVerticalShearDemo.png b/docs/tutorials/images/transformations/barbaraVerticalShearDemo.png new file mode 100644 index 00000000..f4a9d95d Binary files /dev/null and b/docs/tutorials/images/transformations/barbaraVerticalShearDemo.png differ diff --git a/docs/tutorials/images/transformations/lennaCombinedShear.png b/docs/tutorials/images/transformations/lennaCombinedShear.png deleted file mode 100644 index 3c966ab9..00000000 Binary files a/docs/tutorials/images/transformations/lennaCombinedShear.png and /dev/null differ diff --git a/docs/tutorials/images/transformations/lennaFlipped.png b/docs/tutorials/images/transformations/lennaFlipped.png deleted file mode 100644 index 0c59a861..00000000 Binary files a/docs/tutorials/images/transformations/lennaFlipped.png and /dev/null differ diff --git a/docs/tutorials/images/transformations/lennaHorizontalShear.png b/docs/tutorials/images/transformations/lennaHorizontalShear.png deleted file mode 100644 index 33f79711..00000000 Binary files a/docs/tutorials/images/transformations/lennaHorizontalShear.png and /dev/null differ diff --git a/docs/tutorials/images/transformations/lennaMirrorred.png b/docs/tutorials/images/transformations/lennaMirrorred.png deleted file mode 100644 index 7396137b..00000000 Binary files a/docs/tutorials/images/transformations/lennaMirrorred.png and /dev/null differ diff --git a/docs/tutorials/images/transformations/lennaRotated.png b/docs/tutorials/images/transformations/lennaRotated.png deleted file mode 100644 index c6dd4ef7..00000000 Binary files a/docs/tutorials/images/transformations/lennaRotated.png and /dev/null differ diff --git a/docs/tutorials/images/transformations/lennaRotatedCenter.png b/docs/tutorials/images/transformations/lennaRotatedCenter.png deleted file mode 100644 index 0b5a1978..00000000 Binary files a/docs/tutorials/images/transformations/lennaRotatedCenter.png and /dev/null differ diff --git a/docs/tutorials/images/transformations/lennaScaled.png b/docs/tutorials/images/transformations/lennaScaled.png deleted file mode 100644 index e49bf26c..00000000 Binary files a/docs/tutorials/images/transformations/lennaScaled.png and /dev/null differ diff --git a/docs/tutorials/images/transformations/lennaShrunk.png b/docs/tutorials/images/transformations/lennaShrunk.png deleted file mode 100644 index 25e20a06..00000000 Binary files a/docs/tutorials/images/transformations/lennaShrunk.png and /dev/null differ diff --git a/docs/tutorials/images/transformations/lennaStretched.png b/docs/tutorials/images/transformations/lennaStretched.png deleted file mode 100644 index 12a17b26..00000000 Binary files a/docs/tutorials/images/transformations/lennaStretched.png and /dev/null differ diff --git a/docs/tutorials/images/transformations/lennaTranslated.png b/docs/tutorials/images/transformations/lennaTranslated.png deleted file mode 100644 index e3a753f8..00000000 Binary files a/docs/tutorials/images/transformations/lennaTranslated.png and /dev/null differ diff --git a/docs/tutorials/images/transformations/lennaVerticalShear.png b/docs/tutorials/images/transformations/lennaVerticalShear.png deleted file mode 100644 index 5c1892b8..00000000 Binary files a/docs/tutorials/images/transformations/lennaVerticalShear.png and /dev/null differ diff --git a/docs/useful-tips/blurring-techniques-and-their-differences.md b/docs/useful-tips/blurring-techniques-and-their-differences.md index 2ac507c4..0f82d64e 100644 --- a/docs/useful-tips/blurring-techniques-and-their-differences.md +++ b/docs/useful-tips/blurring-techniques-and-their-differences.md @@ -11,7 +11,7 @@ To be precise blur is a general term that refers to a reduction in the sharpness The key advantage of box blur compared to other filters is its speed. It is slightly faster than Gaussian Blur, and it doesn't need to sort all values within the cells, like median. However, this also means that every pixel has the same weight to the algorithm regardless of its position. Therefore the blurring quality drops compared to the gaussian blur and the output gets relatively blocky. -![Difference in quality](./images/blurring/MBvsGB.png) +![Difference in quality](./images/blurring/blurVsGaussianBlur.png) ## Gaussian Blur diff --git a/docs/useful-tips/images/blurring/MBvsGB.png b/docs/useful-tips/images/blurring/MBvsGB.png deleted file mode 100644 index 37a0f253..00000000 Binary files a/docs/useful-tips/images/blurring/MBvsGB.png and /dev/null differ diff --git a/docs/useful-tips/images/blurring/blurVsGaussianBlur.png b/docs/useful-tips/images/blurring/blurVsGaussianBlur.png new file mode 100644 index 00000000..ba82b0e1 Binary files /dev/null and b/docs/useful-tips/images/blurring/blurVsGaussianBlur.png differ diff --git a/src/demo/contexts/demo/defaultImages.ts b/src/demo/contexts/demo/defaultImages.ts index dde759b6..8f134d57 100644 --- a/src/demo/contexts/demo/defaultImages.ts +++ b/src/demo/contexts/demo/defaultImages.ts @@ -7,38 +7,62 @@ const morphologyMaskUrl = 'https://demo-dataset.image-js.org/morphology_mask'; export const defaultImages: UrlOption[] = [ { type: 'url', - value: `${standardUrl}/mandrill.png`, - label: 'Mandrill', + value: `${standardUrl}/jellybeans.png`, + label: 'Jelly beans (256x256)', imageType: 'image', }, { type: 'url', - value: `${standardUrl}/barbara.jpg`, - label: 'Barbara', + value: `${standardUrl}/female.png`, + label: 'Female (256x256)', imageType: 'image', }, { type: 'url', - value: `${standardUrl}/boat.png`, - label: 'Standard boat', + value: `${standardUrl}/femaleBellLabs.png`, + label: 'Female from Bell Labs (256x256)', imageType: 'image', }, { type: 'url', - value: `${standardUrl}/peppers.png`, - label: 'Peppers', + value: `${standardUrl}/mandrill.png`, + label: 'Mandrill (267x256)', imageType: 'image', }, { type: 'url', value: `${standardUrl}/house.png`, - label: 'House', + label: 'House (267x256)', + imageType: 'image', + }, + { + type: 'url', + value: `${standardUrl}/peppers.png`, + label: 'Peppers (267x267)', + imageType: 'image', + }, + { + type: 'url', + value: `${standardUrl}/barbara.jpg`, + label: 'Barbara (512x512)', + imageType: 'image', + }, + { + type: 'url', + value: `${standardUrl}/boat.png`, + label: 'Standard boat (512x512)', imageType: 'image', }, { type: 'url', - value: `${standardUrl}/lenna.png`, - label: 'Lenna', + value: `${standardUrl}/male.png`, + label: 'Male (1024x1024)', + imageType: 'image', + }, + { + type: 'url', + value: `${standardUrl}/airport.png`, + label: 'Airport (1024x1024)', imageType: 'image', }, ]; @@ -47,55 +71,56 @@ export const defaultMasks: UrlOption[] = [ { type: 'url', value: `${morphologyMaskUrl}/circles.png`, - label: 'Circles', + label: 'Circles (507x509)', imageType: 'mask', }, { type: 'url', - value: `${morphologyMaskUrl}/star.png`, - label: 'Star', + value: `${morphologyMaskUrl}/shapes.png`, + label: 'Shapes (640x612)', imageType: 'mask', }, { type: 'url', - value: `${morphologyMaskUrl}/shapes.png`, - label: 'Shapes', + value: `${morphologyMaskUrl}/star.png`, + label: 'Star (716x716)', imageType: 'mask', }, { type: 'url', - value: `${standardMaskUrl}/lenna.png`, - label: 'Lenna', + value: `${standardMaskUrl}/house.png`, + label: 'House (267x256)', imageType: 'mask', }, { type: 'url', - value: `${standardMaskUrl}/barbara.png`, - label: 'Barbara', + value: `${standardMaskUrl}/mandrill.png`, + label: 'Mandrill (267x256)', imageType: 'mask', }, { type: 'url', - value: `${standardMaskUrl}/boat.png`, - label: 'Standard boat', + value: `${standardMaskUrl}/peppers.png`, + label: 'Peppers (267x267)', imageType: 'mask', }, { type: 'url', - value: `${standardMaskUrl}/mandrill.png`, - label: 'Mandrill', + value: `${standardMaskUrl}/barbara.png`, + label: 'Barbara (512x512)', imageType: 'mask', }, { type: 'url', - value: `${standardMaskUrl}/peppers.png`, - label: 'Peppers', + value: `${standardMaskUrl}/boat.png`, + label: 'Standard boat (512x512)', imageType: 'mask', }, + { type: 'url', - value: `${standardMaskUrl}/house.png`, - label: 'House', + value: `${standardMaskUrl}/male.png`, + label: 'Male (1024x1024)', imageType: 'mask', }, ];