“Signed distance functions”, or SDF sounds scary but it is not too crazy to understand. A SDF is a function that can tell you how far a point is from a surface of a shape, say a sphere (usually in Euclidean space)

「符号付き距離関数」（“Signed distance functions”、略してSDF）とは怖そうな名前ですが、実は割とシンプルです。SDFとは、ある点がある他の形の表面、例えば球面から（通常ユークリッド空間で）どのくらい離れているかを教えてくれる関数です。

For example the distance of a point of from the surface of a sphere can be expressed as below where $p$ is the coordinate of the point, $c$ is the center of the sphere, and $r$ is the radius:

例えば、ある点が球の表面からどれくらい離れているかは、その点の座標を$p$、球の中心を$c$、半径を$r$とすると、次のように表さすことができます。

$d = \sqrt{(p_{x}-c_{x})^{2} + (p_{y}-c_{y})^{2} + (p_{z}-c_{z})^{2}} - r$

This is very interesting because SDF is the technique used as basis for many mind-blowing 3D graphics demos with really small amount of code you often find on ShaderToy.

なぜこれが面白いかというと、SDFはShaderToyでよく見かける、短いコードで凄まじいクオリティの3Dグラフィックを実現するデモの背景にある技術だからです。

2D Demos

The three demonstrations below use SDF to define different shapes and fill in the inside and outside of the shape with dots.

下の3つのデモではSDFを用いてそれぞれ異なる形を定義し、形の内側と外側を点で塗りつぶしています。

The size of the dot represents the distance from the shape's boundary (the smaller the closer). White dots represent the inside of the shape. Black dots are outside the shape.

点の大きさは、図形の境界線からの距離を表しています（小さいほど近い）。白い点はシェイプの内側を表します。黒い点は図形の外側にあります。

function sdf(p, center, radius) {
    return Math.sqrt(Math.pow(p.x - center.x, 2) + Math.pow(p.y - center.y, 2)) - radius; // or use p5.Vector.dist()
}