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


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.