“PK creative Spring Festival, I am participating in the” Spring Festival Creative submission contest “, please see: Spring Festival Creative Submission Contest”

ShaderJoy — Shader effects are fun

rendering

Dynamic figure

Static figure

Core code analysis

Without further ado, let’s look at the core code and start with simple 2d coordinates (and then generalize to 3D) as follows

/// @note converts screen coordinates to the range of [-.5,.5]
vec2 p = fragCoord.xy / iResolution.xy - . 5;

float pa, a = pa = 0.;
/// @note
for (int i = 0; i < iterations; i++)
{
    /// @note
    /// magic formula
    p = abs(p) / dot(p, p) - formuparam; ///< iteratively update p coordinates [as the iteration increases, there will be many symmetric points]
    /// Pa is the radius of the "bulge", which is also the distance from the origin of the last iteration's p coordinate
    a += abs(length(p) - pa); ///< span style = "box-sizing: border-box! Important; word-wrap: break-word! Important;
    pa = length(p);  //< update pa [" bump "radius is also getting smaller]
}

fragColor = vec4(a * 3e-3);
///fragColor = vec4(length(a * a * a * 3e-5) * ratio);
Copy the code

The key is the magic formula, the iteration of the P-coordinate

Visualization of P.X

To make it easier for you to visualize, I have drawn the function diagram of the P.x component for the first three (and similar) iterations

First Iteration

Second iteration

Third Iteration

From the above three figures, we can see that p.x has changed from the original linear range distribution of [-.5,.5] to the nonlinear but symmetric range distribution.

Visualize both the X and y components

Now let’s go a step further and visualize both P.x and P.Y

First Iteration

Second iteration

Third Iteration

…

As the number of iterations increases, it becomes more and more fractal

13th iteration

The drawing of the “bulge”

The so-called “bulge” is actually a bright spot in the “nebula” and its drawing code is

abs(length(p) - radius);
Copy the code

The schematic diagram of the function is shown below

The radius = 0.75

The radius = 0.5

I won’t give you any more examples, but obviously as RADIUS gets smaller, the radius of the “bulge” gets smaller

At this point, we visualize the cumulative brightness A of the “bulge”

Is there already a “nebula” that smell! As long as we further extend it to three-dimensional space, layered (accompanied by time motion) fractal superposition can achieve the effect of “lucky star shining”!

Static figure

Dynamic figure

Finally, I mixed it with a picture of “Good luck in the Year of the Tiger” in advance, so that the effect of “good luck in the year of the tiger” at the beginning of the article was finished!

The complete GLSL code is as follows:

#define iterations 13
#defineFormuparam 0.76

#define volsteps 9
#defineStepsize 0.1

#defineZoom 0.800
#defineFloat tiles 0.4
#defineSpeed of 0.010

#defineBrightness 0.0015
#defineDarkmatter 0.300
#defineDistfading 0.37
#defineSaturation 0.850

#iChannel0 "file://.. /.. /images/Main_180.png"
#defineThewire = 0.042

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    /// @note prepare uv coordinates and offset direction
    vec2 texUV = fragCoord.xy / iResolution.xy;
    vec2 uv = fragCoord.xy / iResolution.xy - . 5;
    uv.y *= iResolution.y / iResolution.x;
    vec3 dir = vec3(uv * zoom, 1.);              ///< control the direction offset of each layer
    float time = iTime * speed + 25.;

    vec3 from = vec3(1... 5.0.5);               ///< artificial starting point (3d)
    from += vec3(time * 2., time, - 2.);          ///< offset with time

    /// @note body render section
    float s = 0.1;
    vec3 v = vec3(0.);
    for (int r = 0; r < volsteps; r++)           ///< (by s) layer by layer
    {
        vec3 p = from + s * dir * . 5;

        /// @note is divided into repeated intervals
        p = abs(vec3(tile) - mod(p, vec3(tile * 2.))); 

        float pa, a = pa = 0.;
        /// @note draws highlights
        for (int i = 0; i < iterations; i++)
        {
            p = abs(p) / dot(p, p) - formuparam; ///< critical iteration
            // @note pa is the radius, which is also the distance from the origin of the last iteration p
            a += abs(length(p) - pa);            / / / < accumulation
            pa = length(p);
        }

        a = a * a * a;                           ///< add contrast
        v += vec3(a * 3e-5);                     ///< the brightness of each layer is accumulated

        s += stepsize;
    }

    vec3 color = texture(iChannel0, texUV).rgb;
    fragColor = vec4(color + length(v) * ratio, 1.);
}
Copy the code

supplement

/// @note divides the coordinate range of P into repeated intervals
p = abs(vec3(tile) - mod(p, vec3(tile * 2.))); // tiling fold
Copy the code

The schematic diagram of its function is shown below