​

rendering

Static figure

​

Dynamic figure

​

Code and details:

The code is simple, so let’s go straight to the code and comments

varying vec2 texcoord;

// uniform float iGlobalTime;
// uniform vec2 iResolution;

#definePI 3.1415926 f
#define PIx2 2.*PI
#define PI_HALF PI/2.

#iChannel0 "file://./yeah_0.jpg"
#iChannel1 "file://./yeah.jpg"

void main(a)
{
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    float sinDegree = sin(PI_HALF * iTime); ///< controls the shutter opening and closing over time
    float sinDegreeOffset = sinDegree * 1.;  

    vec4 firstColor = texture2D(iChannel0, uv);
    vec4 secondColor = texture2D(iChannel1, uv);

    gl_FragColor = firstColor;

    // @note draw multiple "lines"
    float alpha = 0., beta = 0., gamma = 0.;
    for (float offset = 0.0 ; offset < 2.2; offset += 0.2)
    {
        // @note y = -x + offset;
        float tmp = -uv.x + offset; 

        /// @note the interval between two lines (opening and closing over time)
        if(uv.y > (tmp - sinDegreeOffset) && uv.y < (tmp + sinDegreeOffset)) { gl_FragColor = secondColor; }}}Copy the code

The core design idea is

The function graph of y = -x + offset is shown below

Then adjust the sinDegreeOffset to control the area between the two lines to “open and close”.