Deformation is the process of transforming an image by changing its shape or perspective. It is often used for image correction, such as fixing distortions caused by camera lenses, or to create special effects in images. Additionally, we will explore the feedback technique, which involves iteratively applying image processing to create more complex and interesting effects.

変形とは画像の形状や視点を変えることによって画像を変換するプロセスで、カメラレンズによって引き起こされる歪みを直すといった画像補正や、画像に特殊効果を加えるためによく使用されます。このページでは、画像処理を反復的に適用してより複雑で面白い効果を作り出すフィードバックも扱います。

<aside> 💡 Many examples on this page use GLSL shaders. To learn more about shaders, please read The Book of Shaders. The page on 2D Matrices ******will be particularly useful. このページでは多くのサンプルでGLSLシェーダを使用しています。シェーダについて詳しく知りたい場合は、The Book of Shadersを読んでください。特に二次元行列のページが役立つと思います。

</aside>

Deformation 変形

https://codepen.io/kynd/pen/abRdvwN

We saw this example above at the end of the Convolution page. As you can see in the demo, this filter shifts the entire picture one pixel to the left. Because the cells in the filter with a value of zero have no effect, this simply copies the color of the pixel to the right of the current position. In other words, this filter copies the color of $(x+1, y)$ from the original image to the coordinate $(x, y)$.

畳み込みのページの最後で上の例を見ました。デモでわかるように、このフィルターは画像全体を1ピクセル左にずらします。値がゼロの部分は何もしないので、このフィルタは単に現在の位置から右にあるピクセルの色をコピーする働きをします。言い換えるとこのフィルターは座標$(x, y)$に元の画像の$(x + 1, y)$の色をコピーします。

Let's take a look at the following equation. $(x, y)$ is the destination coordinates and $(x', y')$ is the source coordinates. Instead of using pixels as the unit, we map the top-left corner to $(0,0)$ and the bottom-right corner to $(1,1)$.

次の式を見てみましょう。$(x, y)$ はコピー先、$(x', y')$ はコピー元の座標です。ピクセル単位ではなく左上を$(0,0)$、右下を$(1,1)$とします。

$(x', y') = (x + \frac{y}{2}, y)$

This equation causes the image to slant, as shown in the demo below.

この式を用いると下のデモのように画像が斜めに傾きます。