## Gl Button

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 🙂 .

Categories: Android, My Thoughts, OpenGL
Android, OpenGLES

Comments (0)
Trackbacks (0)
Leave a comment
Trackback