Skip to content

Commit 2712e93

Browse files
committed
docs: resolve conversations
1 parent fe5a02e commit 2712e93

File tree

2 files changed

+8
-37
lines changed

2 files changed

+8
-37
lines changed

docs/Features/Geometry/Transform.md

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,6 @@ If 2x3 matrix is passed, the algorithm will consider it as [affine transformatio
3030

3131
For more information take a look at the tutorial about [image transformations](../../Tutorials/Applying%20transform%20function%20on%20images.md)
3232

33-
:::note
34-
`transform()` function can accept 2x3 as well as 3x3 matrix. If matrix's size is 2x3 that it becomes an affine transformation. This means that transformation happens on the same
35-
:::
3633
:::caution
3734
Matrix cannot be singular. Otherwise it cannot be inverted. Click [here](https://en.wikipedia.org/wiki/Invertible_matrix 'wikipedia link on invertible matrices') to learn more.
3835
:::

docs/Tutorials/Applying transform function on images.md

Lines changed: 8 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -253,39 +253,8 @@ const combinedShearImage = image.transform(combinedShearMatrix);
253253
### Complex Affine Transformations
254254

255255
You can combine multiple transformations by multiplying matrices or applying them sequentially:
256-
For example, to rotate around the image center instead of the origin, combine translation with rotation:
257-
258-
```ts
259-
const angle = Math.PI / 4; //45 degrees
260-
const center = image.getCoordinates('center');
261-
262-
const cos = Math.cos(angle);
263-
const sin = Math.sin(angle);
264-
265-
// Translate to origin, rotate, translate back
266-
const matrix = [
267-
[cos, -sin, center.column * (1 - cos) + center.row * sin],
268-
[sin, cos, center.row * (1 - cos) - center.column * sin],
269-
];
270-
271-
return image.transform(matrix);
272-
```
273-
274-
![Rotated by center image](./images/transformations/lennaRotatedCenter.png)
275-
276-
:::note
277-
Image-js also has [`rotate()`](../Features/Geometry/Rotate.md) and [`transformRotate()`](../Features/Geometry/Transform%20and%20Rotate.md) functions. `rotate()` function allows rotating an image by multiple of 90 degrees.
278-
`transformRotate()` allows rotating an image by any degree. It also allows choosing the axe of rotation. So, for rotation, you have other functions that allow you to perform it.
279-
:::
280-
281-
<details>
282-
<summary>
283-
<b> Example of matrix multiplication</b>
284-
</summary>
285-
As mentioned previously, to rotate an image around its center, you need to translate your image to the origin, rotate it, and translate it back to its original position.
286-
287-
Performing these operations separately would require three different matrix multiplications on your image, which is computationally expensive. The optimal solution is to combine all three transformations into a single matrix by multiplying the transformation matrices together first, then applying the result to your image, as was shown in the previous example.
288-
256+
For example, to rotate around the image center instead of the origin, combine translation with rotation. So, you need to translate the image to the center, rotate it and translate it back. You can obviously use a separate matrix for each of the transformations.
257+
But a more optimized approach is to create a matrix which combines all three transformations into one.
289258
To accomplish this, you can use the [`ml-matrix`](https://mljs.github.io/matrix/index.html 'link on ml-matrix api') package. It facilitates basic matrix operations in ImageJS, as well as more advanced operations like matrix inversion.
290259

291260
Here's a step-by-step code example showing how to create a complex transformation matrix:
@@ -328,7 +297,12 @@ const rotateAroundCenterImage = image.transform(
328297
);
329298
```
330299

331-
</details>
300+
![Rotated by center image](./images/transformations/lennaRotatedCenter.png)
301+
302+
:::note
303+
Image-js also has [`rotate()`](../Features/Geometry/Rotate.md) and [`transformRotate()`](../Features/Geometry/Transform%20and%20Rotate.md) functions. `rotate()` function allows rotating an image by multiple of 90 degrees.
304+
`transformRotate()` allows rotating an image by any degree. It also allows choosing the axe of rotation. So, for rotation, you have other functions that allow you to perform it.
305+
:::
332306

333307
## Projective Transformations
334308

0 commit comments

Comments
 (0)