关于椭圆的旋转

Question

我有一个着色器可以在 GLSL 中旋转一个矩形，如下所示。

const float PI = 3.14159265359;


mat2 rotate2d (float _angle) {
    return mat2 (cos (_angle), -sin (_angle),
                sin (_angle), cos (_angle));
}

void main (void) {

    vec2 st = (gl_FragCoord.xy * 2.0 - resolution) /min(resolution.x,resolution.y);
    float p = 0.0;
    
   st = rotate2d (sin (time) * PI) * st;
    
    vec2 c = max (abs (st) - 0.2,0.0);
    p = length (c);
    p = ceil (p);
    
    vec3 color = vec3 (1.0-p);

    gl_FragColor = vec4 (color, 1.0);

}

我想把这个shader的矩形改成下面的椭圆，然后在中心点p旋转，就是一个椭圆。我应该怎么办？是椭圆水平方向和垂直方向的r.x, r.y与旋转的rotate2d (sin (time) * PI)相乘还是整体相乘？

// Center point
vec2 p = vec2 (0.0,0.0);
// radius
vec2 r = vec2 (2.0,1.0);
// oval shape
float d = (length (p / r) - 1.0) * min (r.x, r.y);

Answer 1

旋转坐标，计算点到椭圆中心的距离。根据距离设置颜色：

const float PI = 3.14159265359;

mat2 rotate2d(float _angle) 
{
    return mat2(cos(_angle), -sin(_angle), sin(_angle), cos(_angle));
}

void main (void)
{
    vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y);    
    st = rotate2d(time * PI) * st;

    vec2 center = vec2(0.0, 0.0);
    vec2 ab = vec2(0.2, 0.1);
    
    vec2 e = (st - center) / vec2(0.2, 0.1);
    float d = length(e);
    vec3 color = d < 1.0 ? vec3(1.0) : vec3(0.0);

    gl_FragColor = vec4(color, 1.0);
}

关于椭圆的旋转

About the rotation of the ellipse

shader

glsl

fragment-shader