ShaderJoy — Comic Strokes [GLSL]

This is the 14th day of my participation in the August More Text Challenge

rendering

Adjust some parameters to get different style effect

The original image

Core algorithm idea

The core idea of this effect is divided into the following steps [refer to layers in Photoshop]

• First, according to the brightness of the image, artificial threshold is set, divided into (6) different levels of gray images;

Then construct (6) “woodcut” images of different rotation directions, as shown below;

• Then, the “woodcut” image is used as a mask, and the above two are combined in pairs to obtain the following image

• Finally, the results obtained in the previous step are superimposed to obtain the following final result

Simplified core code and comments

#iChannel0 "file://.. /images/20.jpg"
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord.xy / iResolution.xy;

    float amplitud = 0.03;
    float frecuencia = 10.0; 
    float gris = 1.0;
    float divisor = 4.8 / iResolution.y;
    float grosorInicial = divisor * 0.2;

    const int kNumPatrones = 6;

    /// @note x: sine of Angle, y: cosine of Angle, z: brightness factor
    vec3 datosPatron[kNumPatrones];
    datosPatron[0] = vec3(0.7071.0.7071.1.0); / / to 45 °
    datosPatron[1] = vec3(0.0.1.0.0.6); / / 0 °
    datosPatron[2] = vec3(0.0.1.0.0.5); / / 0 °
    datosPatron[3] = vec3(1.0.0.0.0.4); / / 90 °
    datosPatron[4] = vec3(1.0.0.0.0.3); / / 90 °
    datosPatron[5] = vec3(0.0.1.0.0.2); / / 0 °

    vec4 color = texture(iChannel0, uv);
    fragColor = color;

    for (int i = 0; i < kNumPatrones; i++)
    {
        float sinv = datosPatron[i].x;
        float cosv = datosPatron[i].y;

        // @note rotates the UV coordinates
        vec2 rotuv = vec2(
                         uv.x * cosv - uv.y * sinv,
                         uv.x * sinv + uv.y * cosv
                     );

        /// @note adds contrast
        float grosor = grosorInicial * float(i + 1);
        /// @note constructs different directions "woodcut grain"
        float dist = mod(rotuv.y - sin(rotuv.x * frecuencia) * amplitud, divisor); 

        / / / @ note gray
        float lum = dot(vec3(3..4..3.), color.rgb);
        /// @note merges the "woodcut" of each brightness level
        if (lum < 0.82 - 12. * float(i)) ///< brightness level
        {
            // @note adds contrast
            float k = datosPatron[i].z;
            float x = (grosor - dist) / grosor;
            float fx = abs(x / k);
            gris = min(gris, fx);
        }
    }

        fragColor = vec4(gris, gris, gris, 1.0);
}
Copy the code

(after)