（每日一题）平面直角坐标系函数图像绘制的例子

在常见的平面直角坐标系中，绘制一变量函数 y=f(x) 的方法通常是在 x 轴上每隔一定距离选取点，计算对应的 y 值，然后显示点 (x, y) 在屏幕上。 #

y=2e^(-x^2)sin(8x)

#

当函数的斜率太大时，间隔的点在 y 轴上会有很大的间隙。 为了填补这个空白，可以减小 Δx 的值直线到圆的距离公式，或者简单地用直线连接相邻的点对，至少在视觉上看起来更平滑。 #

直线连接点对

但这种绘制方法显然只能绘制一个x值对应一个y值的函数直线到圆的距离公式，对于多值函数和隐式函数无能为力。 我们的目标是找到一种可以绘制任何函数的通用方法。 #

换个角度思考，如果有一种方法可以计算一个点到函数的距离，我们把绘制函数的过程改成：遍历屏幕上所有的点p(x,y)。 如果点p到函数的距离为0，则说明p是函数上的点，可以显示为白色； 如果点 p 与函数的距离较大，则表示 p 距离函数较远，显示为黑色。 这样，任何函数都可以被绘制出来。

有经验的同学可能会觉得这个方法和SDF（Field）很相似。 确实，有了函数的距离估计方法，我们还可以将它与SDF结合起来做一些2D或者3D的渲染。

对于一元函数 y=f(x)，我们可以将其转换为二元函数 z=f(x, y)=yf(x)。 当z值为0时，函数为原一元函数。 换句话说，对于点 p(x, y)，它到函数 y=f(x) 的距离是到函数 z=f(x, y) 与 XOY 平面交点的最短距离。

怎么理解呢？ 我们先减少一维，考虑x轴上的点p(x)到y=f(x)与x轴交点的距离。

#

p(x)=p(-0.4)

#

当p(x)=p(-0.4)时，可以看到此时y的值为V，y=f(x)与x轴的交点就是y=0时x的值。 为了估计p和x之间的距离，我们可以求出f(x)对p的导数，那么f'(x)就是函数在p点的切线的斜率。 从切线与 x 轴的交点到 p 的距离 D 是我们的距离估计。 #

所以对于p，我们可以先计算f(p)的值V，然后计算f'(p)的值作为斜率。 由于f'(p)=V/D，因此可以通过计算V/f'(p)来计算D的值。 从上图可以看出，D并不能完全准确地代表p到f(x)=0的距离，但是当V值越来越小时，D值会越来越接近精确值。

#

我们也可以对二元函数 z=f(x, y) 执行类似的操作。 对于p(x,y)，首先计算f(p)的值V，然后分别求x和y的偏导数δx和δy，则z的梯度▽z为(δx,δy)。 由于梯度的长度可以看成z在这个方向上的变化率，即|▽z|=√(δx^2 + δy^2)，所以最终的距离D可以通过V/|计算出来▽z|。 #

我们看一个实际的例子：函数x^2+y^2=25，即以(0, 0)为圆心，半径为5的圆。首先将其转换为二元函数z=f( x, y)=x^2+y^2-25。 当z=0时，为XOY平面上的函数图像。 #

分别求x和y的偏导数，有δx=2x和δy=2y，则|▽z|=√(δx^2 + δy^2)=2√(x^2+y^2)。 只要代入一些p(3, 3)，就可以得到V=f(p)=9+9-25=-7和|▽z|=2√18，并计算D≈-0.825。

因为z=x^2+y^2-25是一个有正负值的三维抛物面，所以我们可以将小于0的D值视为圆内点到圆的距离，而D值圆上的 A 点等于 0。 当D值大于0时，为圆外一点到圆的距离。

#

设D大于0为蓝色，接近0为白色，小于0为橙色，则z=x^2+y^2-25的距离图像为： #

z=x^2+y^2-25 的距离图像

#

对文章开头的函数进行同样的操作，假设z=f(x,y)=y-2e^(-x^2)sin(8x)，y=1的偏导数，偏导数x δx=4e ^(-x^2)sin(8x)x-16e^(-x^2)cos(8x)，则z的距离图像为：

我们可以设置一个最小距离。 只有绝对值小于距离的点才被视为相邻函数的点。 重新绘制函数图像如下：

这样我们就通过函数距离估计的方法完成了函数图像的绘制。 该方法的优点是适用于任何单值函数、多值函数和隐式函数，并且抗锯齿。 复杂函数的示例有： #

正弦(x)y^2=x

如前所述，距离 D 的值是一个估计值，只有在接近 z=0 时才足够准确。 我们可以用相同的颜色绘制相同的距离，形成一个色带，来查看距离估计的分布情况：

距离估计 #

可以看出，当接近实函数图像时，色带分布比较均匀，但当距离较远时，误差较大，色带失真。 #

距离精确值 #

作为对比，上图是更准确的距离色带分布，可以看到色带分布均匀。 #

该方法可以很容易地推广到多元函数。 例如，要估计点 p(x, y, z) 到 z=f(x, y) 的距离，可以构造三元函数 w=f(x, y, z)=zf(x, y)计算V=f(p)，然后分别求出x、y和z的偏导数δx、δy和δz。 w的梯度为▽w=(δx, δy, δz)，梯度的长度|▽w|=√(δx^2+ δy^2+δz^2)，所需D=V/|▽ w|。

#

这样就可以渲染出一个三维函数图像：

#

z=sin(x)y^2-x #

z=sin((x-2)^2+y^2) #

z=cos(30*(1-x^2-(y-|x|)^2))√(1-x^2+(y-|x|)^2) #