Shader旋转隧道

Shader

好了，吐槽完了。今天休息下，看到一个简单的效果。代码实现非常简洁。分析其实现

极坐标

2406224012

极坐标系统和笛卡尔坐标系统都是描述平面上点位置的方法，但是使用不同的方式来表示这些点。两个坐标系在解决不同类型的问题时都很有用。例如，有些时候极坐标对于解决涉及圆形或斜率的问题更为直观和简洁，而笛卡尔坐标则在处理与直角相关的问题方面更为方便。

笛卡尔坐标系统（Cartesian Coordinate System）

笛卡尔坐标系统是一种使用两个或三个数值来确定点位置的直角坐标系统。在二维空间中，一个点的位置通过一个横坐标（X轴上的值）和一个纵坐标（Y轴上的值）来指定。如果我们将这些坐标放置在一个图上，横坐标（x）定义了点沿着X轴的位置，而纵坐标（y）定义了点沿着Y轴的位置。在三维空间中，这个系统增加了第三个坐标（z），用于沿Z轴的位置。

例如，笛卡尔坐标点 (3, 4) 指的是距离原点（交点，通常是 (0, 0)）沿着X轴移动3个单位，沿着Y轴移动4个单位的位置。

极坐标系统（Polar Coordinate System）

与笛卡尔坐标相比，极坐标通过一个点与极点（通常是原点或 (0, 0)）之间的直线距离（半径r）和该直线与参考方向（通常是X轴的正方向）之间的角度（极角θ）来定位点的位置。

在极坐标中，一个点表示为 (r, θ)，其中r是半径，θ是角度。角度通常用度或弧度来度量，而半径则是一个非负实数。

例如，极坐标点 (5, π/3) 表示一个距离极点（原点）5个单位长度，从参考方向（X轴正方向）逆时针旋转π/3弧度的位置。

公式

这两个系统之间存在转换公式，允许你将一个点从一个系统转换到另一个系统。

从极坐标到笛卡尔坐标：

![x = r \cdot \cos(\theta)
y = r \cdot \sin(\theta)
](tos-cn-i-73owjymdk6/a6bdb834ac674972a1ccabe0a87e1cd0)

从笛卡尔坐标到极坐标：

![r = \sqrt{x^2 + y^2}
\theta = \arctan\left(\frac{y}{x}\right)
](tos-cn-i-73owjymdk6/a930232c64164d03b537846e1faa2d61)

Shader旋转隧道

接下来我会一步一步通过代码的增加，让一个极坐标图变成旋转隧道. 首先定义基础的点的位置，极角，半径

scss 复制代码

 vec2 position = (2.*fragCoord.xy - iResolution.xy) / iResolution.y;    float radius = length(position);    float angle = atan(position.x, position.y);

然后将角度可视化

scss 复制代码

    float hit = abs(angle / PI);    vec3 col = mix(vec3(0.), vec3(1.), hit);       fragColor = vec4(col, 1.);

得到了下面图形，表示角度从上到下，是从 0 到 pi的

这时将画面运动起来，也就是加上时间

ini 复制代码

float hit = mod(angle / PI+ iTime, 1.0);

我们将 hit再次做一个修改，把 mod函数变成 sin函数，并且加大频率

ini 复制代码

float hit = sin((angle / PI+ iTime) * 8. * PI);

就得到8 个柱子只要在 sin函数里面再加上 1/x函数就可以扭曲空间了

ini 复制代码

    float hit = sin((angle / PI+ iTime + 1./radius) * 8. * PI) ;

基本效果已经完成，接下来就是把中间的画面用黑洞表示，radius越小，就黑色。所以公式很简单, 乘上 raduis就好

ini 复制代码

    float hit = sin((angle / PI+ iTime + 1./radius) * 8. * PI) * radius;

效果就有啦。。。