Let's visualize distances using GLSL. A black-and-white stripe pattern like a contour line is drawn based on the distance from the center of the screen. I will leave the technical details of GLSL to the Book of Shaders, but let’s pay attention only to the equation that defines the distance.
GLSLを使って距離を視覚化してみます。画面の中心からの距離を元に等高線のような白黒の縞模様を描きました。GLSLについての技術的な説明は The Book of Shaders に譲るとして、ここでは距離を定義する式だけに注目しましょう。
In Euclidean space, points at the same distance from a given point form a circle. Remember that the formula for the Euclidean distance looked like this:
ユークリッド空間では、ある一点から等距離にある点を集めると円になります。ユークリッド距離の式を思い出しましょう。
${d={\sqrt {(x_{1}-x_{2})^{2}+(y_{1}-y_{2})^{2}}}}$
The above formula, written in GLSL, looks like this
上の公式をGLSLで書くとこのようになります。
float distance = sqrt(pow(p0.x - p1.x, 2.0) + pow(p0.y - p1.y, 2.0));
Drawing stripes using the Manhattan distance in the same way will result in squares rotated by 45 degrees. Let's review the Manhattan Distance formula to confirm that any point on a side on the same square is certainly equidistant from the center.
マンハッタン距離を用いて同じように縞模様を描くと45度回転した正方形になります。マンハッタン距離の式を見直して、同じ正方形上の辺上にあるどの点も確かに中心から等距離にあることを確認してみましょう。