The Code Therapy

Sound Indicator

A doodle aiming to achieve the resemblance of a sound indicator

Created by marcogomez on Wed, 20 Sep 2023 20:35:10 GMT.


#version 300 es
precision highp float;

uniform vec2 resolution;
uniform float time;
in vec2 vUv;
out vec4 fragColor;

const float size = 1.7;
const float distribution = 0.03;
const float speed = 0.06;
const float overdraw = 3.0;
const float shapeK = 0.25;

float sdHyperbola(vec2 p, float k, float wi) {
  p = abs(p);
  float k2 = k * k;
  float a = p.x + p.y;
  float i = 0.5 * (a - k2 / a) > wi ? -1.0 : 1.0;
  float x = clamp(0.5 * (a - k2 / a), 0.0, wi);
  vec2 q = vec2(x, sqrt(x * x + k2));
  float s = sign(p.x * p.x - p.y * p.y + k2);
  return s * length(p - q);
}

void main(void) {
  float ar = resolution.y / resolution.x;
  vec2 uv = (vUv * 2.0 - 1.0) * vec2(1.0, resolution.y / resolution.x);
  float r = -(uv.x * uv.x + uv.y * uv.y);
  float z = 0.5 + 0.5 * sin((r + time * speed) / distribution);
  float a = clamp(smoothstep(-0.1, 0.2, size - length(uv * 2.0)), 0.0, 0.5);
  float h = clamp(sdHyperbola(uv, shapeK, 1.0), 0.0, 1.0) * overdraw;
  float alpha = clamp(a * h, 0.0, 1.0);
  fragColor = vec4(z * alpha);
}