Thank you so much big FlyHave a long road, OoOShared articlesJetpack-compose Ink Effect 👍👍👍. In this article, Big Fly uses JetPack to achieve the ink painting effect.



The principle is to use two prepared pictures, one is the original picture, one is black and white picture, and then use PorterDuffXfermode to mix the two pictures according to a certain shape, so as to obtain such ink painting effect. The principle is simple, but, uh, the idea and the effect are great. And the big guy wrote a great article, very detailed. If you think it’s great, you can go to Feige’s blog and like it.

Underneath big Fei’s article, there was one such comment:

The comment says it’s more generic to deal with the color value of the original image rather than two images. I also think it’s more generic to deal directly with color values. Cpu-type languages such as Java, Kotlin, C, and C ++ are not suitable for heavy computation, especially graphics processing. So if you want to use CPU language per-pixel processing in Android to achieve this kind of ink painting effect, it will be difficult, not impossible, or slow. Consider using a GPU to do this, opengL or RenderScript to do it. Considering opengL seems to have a better future on Android than RenderScript. So I decided to do it with OpengL, just to verify. Since I’m just checking, I don’t need to write the entire demo, nor do I need to polish the demo and articles as carefully as Fei Ge did. To verify this quickly, I’ll verify it directly on Shadertoy:



As shown in the GIF above, I chose a circle shape and gradually enlarged the circle so that inside the circle the image was colored and outside the circle the image was black and white. Ps: You can also go directlyshadertoyView the effect 】 :

# define END_TIME 10.0
# define Max thewire 1.5 * (iResolution. X, iResolution. Y)/min (iResolution. X, iResolution. Y)
float sdCircle(vec2 p,float r){
    return length(p)-r;
}

float rgb2gray(vec3 col){
    return 0.2989 * col.x + 0.5870 * col.y + 0.1140 * col.z;
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 p = (2.0*fragCoord-iResolution.xy)/iResolution.y;
    vec2 uv = fragCoord/iResolution.xy;
    vec3 col = texture(iChannel0,uv).xyz;
    vec3 black = vec3(rgb2gray(col));
    
    float r = sin(iTime)*RATIO+RATIO;
    col = mix(col,black,smoothstep(0.0.0.01,sdCircle(p,r)));
    fragColor = vec4(col,1.0);
}
Copy the code

Let me briefly explain opengL && Opengles, ShaderToy, and my code:

opengl:

Opengl stands for Open Graphics Library. GLSL is used as the development language, which is similar to C, but it can use gpus for computation, thus manipulating graphics.

Opengles:

Opengles stands for Open Graphics Library Embedded System, which is a Graphics Library optimized for Embedded devices. Android uses Opengles,ios can use Opengles.

Shadertoy:

As you learn about OpengL, you will learn about Vertex Shader, fragment Shader… Fragment shader is a type of renderer script that performs pixel-by-pixel processing of pixels generated by vertex Shader after vertex shader has completed rendering. Shadertoy is an online site where you can browse and create Fragment shaders. Although shadertoy only has fragment Shader, it does not affect you to use it for various magic shows. Those who want to see the show can feast their eyes on shadertoy.

My code:

Rgb2gray: Converts color pixels to grayscale. Input RGB values of pixels and output values of pixels to grayscale. MainImage:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 p = (2.0*fragCoord-iResolution.xy)/iResolution.y;
    vec2 uv = fragCoord/iResolution.xy;
    vec3 col = texture(iChannel0,uv).xyz;// Get the color of a pixel
    vec3 black = vec3(rgb2gray(col));// Change the color to a grayscale value
    
    float r = sin(iTime)*RATIO+RATIO;// Circle radius periodically from [0->2*RATIO] over time
    col = mix(col,black,smoothstep(0.0.0.01,sdCircle(p,r)));// Inside the circle, use the original color and outside the circle, use grayscale color
    fragColor = vec4(col,1.0);
}
Copy the code

Write in the last

What I am doing here is just to verify the work. I hope that there will be some inspirations after seeing my article and using Opengles to complete the production of ink painting effect. Finally, I hope you can make more excellent creations in various languages, maybe you will be the next big guy to write “free naked eye 3D”!!