Ghoscher's Blog

I wanted to make something similar to the ripple effect but since product-grade libraries for that specific purpose exist I just ended up experimenting with OpenGL ES2 and here’s the result:

Why did I go with OpenGL instead of a canvas? because shaders :D, with a fragment shader you can get various effects. add post processing and you’ll get even more effects! Here I tried something really simple as shown in the video above.

The main idea is to have two triangles filling the surface from -1 to 1 on both x and y

final float[] vertices = {
-1f, -1f,
+1f, -1f,
-1f, 1f,

-1f, 1f,
+1f, -1f,
+1f, 1f
};

And the vertex shader as follows:

uniform vec4 u_Color;
uniform vec2 u_Size;
uniform float u_Radius;
uniform vec2 u_Center;
attribute vec4 a_Position;
varying vec4 v_Color;
varying vec2 v_Position;

void main()
{
v_Color = u_Color;
gl_Position =   a_Position;
v_Position =   a_Position.xy;
}

And finally the fragment/pixel shader:

 precision highp float;

uniform vec2 u_Size;    // View size
uniform float u_Radius; // Ripple radius
varying vec4 v_Color;   // View color
uniform vec2 u_Center;  // Ripple center
varying vec2 v_Position;    // Fragment/pixel position

void main()
{
    // Remap position to actual pixels
    float x = (u_Size.x*(v_Position.x+1.0))/2.0;
    float y = (u_Size.y*(v_Position.y+1.0))/2.0;

    // Calculating pixels distance to touch center
    float dx = x-u_Center.x;
    float dy = y-u_Center.y;
    float dist = sqrt(dx*dx + dy*dy);

    // Calculating light, here you can do any calculation you like
    float light = 0.0;
    if (dist<=u_Radius)
        light = 1.0 - clamp(dist/u_Radius, 0.3, 1.0);

    gl_FragColor = (1.0 + light/2.0) * v_Color;
    gl_FragColor.a = 1.0;
}

You can find the full project here on Github.

If you’re interested in the code please let me know 🙂 .