ShaderToy学习笔记 02.圆

1. 画圆

1.1. 圆的方程

圆的方程是：(x^2 + y^2 = r^2)，其中(r)是圆的半径。

我们可以使用 desmos 来验证一下。

输入 x^2 + y^2 -1=0，即可得到圆。

类似下图

1.2. 画圆的方式

画圆：使用圆的方程，判断每个像素点是否在圆内，在圆内则为白色，否则为黑色。
画圆：使用圆的方程，判断每个像素点到圆心的距离是否小于半径，小于半径则为白色，否则为黑色。

目前我们在画圆时，先设定圆心在屏幕的中心（0,0）。

这样的好处是 length(uv) 可以直接计算出像素点到圆心的距离。

1.3. 方式1 画圆

cpp 复制代码

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
     // Normalized pixel coordinates (from -1 to 1)
     //vec2 uv = (2.0*fragCoord-iResolution.xy)/iResolution.xy;
     vec2 uv = (2.0*fragCoord-iResolution.xy)/iResolution.xx;

//    vec2 uv = (2.0*fragCoord-iResolution.xy)/min(iResolution.x,iResolution.y);//取x和y的最小值作为比例
     float c=0.;//默认黑色
     float r=0.3;//圆的半径
     if( length(uv) < r )//矢量长度小于半径，就为白色
         c=1.;

    // Output to screen
     fragColor = vec4(vec3(c),1.0);
}

注意：

1.4. 方式2 画圆

如果代码是如下形式，那么圆会变成椭圆，因为x和y的比例不一样

cpp 复制代码

vec2 uv = (2.0*fragCoord-iResolution.xy)/iResolution.xy;

1.5. 方式3 画圆

cpp 复制代码

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
     // Normalized pixel coordinates (from -1 to 1)
     vec2 uv = (2.0*fragCoord-iResolution.xy)/iResolution.xx;

//    vec2 uv = (2.0*fragCoord-iResolution.xy)/min(iResolution.x,iResolution.y);//取x和y的最小值作为比例
     float c=0.;//默认黑色
     float r=0.5;//圆的半径
      
     c=1.-step(0.,length(uv)-r);
    // Output to screen
     fragColor = vec4(vec3(c),1.0);
}

注意：

在fragment shader中,尽量不要用if 语句，因为if语句会降低性能

1.6. 方式4 画圆(平滑 smoothstep)

可以看到边缘的30个像素是平滑过渡的

cpp 复制代码

#define PIXW (1./iResolution.y)
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
     // Normalized pixel coordinates (from -1 to 1)
     vec2 uv = (2.0*fragCoord-iResolution.xy)/iResolution.xx;

     float r=0.3;
     float c=smoothstep(0.,0.+30.*PIXW,length(uv)-r);
    // Output to screen
     fragColor = vec4(vec3(c),1.0);
}

1.7. 极坐标系

极坐标系是一种二维坐标系统，它用以确定平面上点的位置。与常用的笛卡尔坐标系不同，极坐标系使用一个距离和一个角度来描述点的位置。

在极坐标系中，每个点的位置由两个数值定义：

径向坐标（r）：也称为极径，是从原点（也称为极点）到该点的直线距离。
角坐标（θ）：也称为极角或方位角，是指从固定的参考方向（通常是正x轴）到通过原点和该点的线段之间所夹的角度。角坐标通常以弧度或度为单位。

因此，在极坐标系中，一个点的位置表示为 (P(r, \theta))。

极坐标系特别适用于那些具有圆形对称性的问题，例如物理学中的圆周运动、工程学中的旋转机械设计、以及数学中的某些类型的方程和图形等。转换公式如下：

从极坐标到笛卡尔坐标的转换：
- (x = r \cdot \cos(\theta))
- (y = r \cdot \sin(\theta))
从笛卡尔坐标到极坐标的转换：
- (r = \sqrt{x^2 + y^2})
- (\theta = \arctan2(y, x))，这里(\arctan2)函数用于根据x和y的值正确地确定角度，即使在x或y为零的情况下也能返回正确的象限。

在计算机图形学、图像处理以及游戏开发等领域，理解如何在不同坐标系之间转换是非常有用的，尤其是在需要实现基于角度和距离的计算时，如光线追踪、物理模拟、用户界面设计等。

运行效果

cpp 复制代码

#define PIXW (1./iResolution.y)
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv=(fragCoord.xy-.5*iResolution.xy)*PIXW;
    
    vec4 O=vec4(smoothstep(0.+10.*PIXW,0.,length(uv)-0.5));
    
    uv=vec2(length(uv),atan(-uv.y,-uv.x));//polar system
    fragColor=mix(vec4(0),O,uv.y/6.28+.5);

}

1.8. 参考资料

shadertoy入门手册1-掌控画布

2. 移动圆

2.1. 圆的方程

圆的方程是：(（x-offsetX)^2 + (y-offsetY)^2 = r^2)，其中(r)是圆的半径。

我们可以使用 desmos 来验证一下。

(（x-1)^2 + (y-1)^2 -1=0)

类似下图

2.2. 思路

将uv坐标转换成圆心坐标 (x,y) = (uv.x-offsetX,uv.y-offsetY)
计算 (x,y) 到圆心的距离 d
如果 d 小于半径 r，则为白色，否则为黑色。

2.3. 将圆心移动到(0.3,0.3)

cpp 复制代码

#define PIXW (1./iResolution.y)

vec3 sdfCircle(vec2 uv, float r,vec2 offset)
{
     uv=uv-offset;
     float d=length(uv)-r;
     return d>0.?vec3(0.):vec3(1.);
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
     // Normalized pixel coordinates (from -1 to 1)
     vec2 uv = (2.0*fragCoord-iResolution.xy)/min(iResolution.x,iResolution.y);

     float r=0.3;
     vec3 c=sdfCircle(uv,r,vec2(0.3,0.3));
    // Output to screen
     fragColor = vec4(vec3(c),1.0);
}

2.4. 让圆动起来

思路：

让圆的圆心坐标随着时间变化
让圆的颜色随着时间变化

cpp 复制代码

#define PIXW (1./iResolution.y)

vec3 sdfCircle(vec2 uv, float r,vec2 offset)
{
     uv=uv-offset;
     float d=length(uv)-r;
     return d>0.?vec3(0.):vec3(abs(sin(iTime*0.3)),abs(cos(iTime*0.3)),abs(sin(iTime*0.3)));
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
     // Normalized pixel coordinates (from -1 to 1)
     vec2 uv = (2.0*fragCoord-iResolution.xy)/min(iResolution.x,iResolution.y);

     float r=0.3;
     vec3 c=sdfCircle(uv,r,vec2(0.+sin(iTime)*0.2,0.+cos(iTime)*0.2));
    // Output to screen
     fragColor = vec4(vec3(c),1.0);
}

2.5. 画两个圆

思路：

背景为黑色，即vec(0.,0.,0.)
圆为非黑色
两个圆的颜色相加，由于这两个圆没有重叠，所以颜色相加后，刚好会显示出两个圆

注：这种方法，只适用于两个圆没有重叠且背景色为黑色这种简单情况。后续会说明更通用的方法。

cpp 复制代码

//显示两个圆
#define PIXW (1./iResolution.y)

vec3 sdfCircle(vec2 uv, float r,vec2 offset)
{
     uv=uv-offset;
     float d=length(uv)-r;
     return d>0.?vec3(0.):vec3(abs(sin(iTime*0.3)),abs(cos(iTime*0.3)),abs(sin(iTime*0.3)));
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
     // Normalized pixel coordinates (from -1 to 1)
     vec2 uv = (2.0*fragCoord-iResolution.xy)/min(iResolution.x,iResolution.y);

     float r=0.3;
     vec3 c=sdfCircle(uv,r,vec2(0.5,0.5));
     c=c+sdfCircle(uv,r,vec2(-0.5,0.5));
     //c=max(c,sdfCircle(uv,r,vec2(-0.5,0.5)));
    // Output to screen
     fragColor = vec4(vec3(c),1.0);
}