glsl snippets

customease.glsl

// Tested on https://thebookofshaders.com/edit.php

// bezier function from https://www.shadertoy.com/view/sdjBRy 
// if more control point needed : https://github.com/yiwenl/glsl-bezier-curve/blob/master/index.glsl

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;


// custom ease using 2 vec2s
float customEase(vec2 control1, vec2 control2, float t) {
  float omt = 1.0 - t;

  vec2 start = vec2(0.,0.);
  vec2 end =  vec2(1., 1.);
  vec2 bezier = start * omt * omt * omt + 
          control1 * 3.0 * omt * omt * t + 
          control2 * 3.0 * omt * t * t + 
          end * t * t * t;
  return bezier.y;
}

// custom ease using 4 floats
float customEase(float p1x, float p1y, float p2x, float p2y, float t) {
    float omt = 1.0 - t;
    
    vec2 start = vec2(0.,0.);
    vec2 end =  vec2(1., 1.);
    vec2 control1 = vec2(p1x, p1y);
    vec2 control2 = vec2(p2x, p2y);
    vec2 bezier = start * omt * omt * omt + 
              control1 * 3.0 * omt * omt * t + 
              control2 * 3.0 * omt * t * t + 
              end * t * t * t;
      return bezier.y;
}


float rectangle(vec2 st, vec2 size, float aa) {
    size = vec2(0.5) - size * 0.5;
    vec2 uv = vec2(smoothstep(size.x - aa, size.x, st.x), smoothstep(size.y - aa, size.y, st.y));
    uv *= vec2(smoothstep(size.x - aa, size.x, 1.0 - st.x), smoothstep(size.y - aa, size.y, 1.0 - st.y));

    return uv.x * uv.y;
}

float map(float oldVal, float oldMin, float oldMax, float newMin, float newMax) {
  float old = oldMax - oldMin;
  float new = newMax - newMin;
  return (((oldVal - oldMin) * new) / old) + newMin;
}

float cmap(float oldValue, float oldMin, float oldMax, float newMin, float newMax) {
  return clamp(map(oldValue, oldMin, oldMax, newMin, newMax), min(newMax, newMin), max(newMin, newMax));
}

// testing
void main() {
    
    vec2 uv = v_tex_coord;
    float progress = mod(i_time, 2.) / 2.; // loop 2sec animation
     
    // will move the rectangle with a custom back out easing
    float ease = customEase(0.17, 0.89, 0.54, 1.42, progress);
    float tx = map(ease , 0., 1., 0.3, -0.3);
  
    float rect = rectangle(vec2(uv.x + tx ,  uv.y), vec2(0.1, 0.1), 0.001); // draw a rectangle

    gl_FragColor = vec4(vec3(rect), 1.0);
}