Home > Android, My Thoughts, OpenGL > Gl Button

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

Advertisements
Categories: Android, My Thoughts, OpenGL Tags: ,
  1. No comments yet.
  1. No trackbacks yet.

What do you think?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: