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 画圆
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 screenfragColor = vec4(vec3(c),1.0);
}注意：
1.4. 方式2 画圆
如果代码是如下形式，那么圆会变成椭圆，因为x和y的比例不一样
vec2 uv = (2.0*fragCoord-iResolution.xy)/iResolution.xy;
1.5. 方式3 画圆
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 screenfragColor = vec4(vec3(c),1.0);
}
注意：
- 在fragment shader中,尽量不要用if 语句，因为if语句会降低性能
1.6. 方式4 画圆(平滑 smoothstep)
可以看到边缘的30个像素是平滑过渡的
#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 screenfragColor = 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为零的情况下也能返回正确的象限。
在计算机图形学、图像处理以及游戏开发等领域，理解如何在不同坐标系之间转换是非常有用的，尤其是在需要实现基于角度和距离的计算时，如光线追踪、物理模拟、用户界面设计等。
运行效果
#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 systemfragColor=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)
#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 screenfragColor = vec4(vec3(c),1.0);
}2.4. 让圆动起来
思路：
- 让圆的圆心坐标随着时间变化
- 让圆的颜色随着时间变化
#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 screenfragColor = vec4(vec3(c),1.0);
}
2.5. 画两个圆
思路：
- 背景为黑色，即vec(0.,0.,0.)
- 圆为非黑色
- 两个圆的颜色相加，由于这两个圆没有重叠，所以颜色相加后，刚好会显示出两个圆
注： 这种方法，只适用于两个圆没有重叠且背景色为黑色这种简单情况。后续会说明更通用的方法。
//显示两个圆
#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 screenfragColor = vec4(vec3(c),1.0);
}