Code Playground

const float PI = 3.14159265358979323846264;
const float TWOPI = PI*2.0;

const vec4 WHITE = vec4(0.9, 0.9, 0.9, 1.0);
const vec4 BLACK = vec4(0.0, 0.0, 0.0, 1.0);

const vec2 CENTER = vec2(0.0, 0.0);

const int MAX_RINGS = 100;

uniform float time;
uniform float width;
uniform float height;
uniform float ringDistance;
uniform int maxRings;
uniform float waveCount;
uniform float waveDepth;
uniform float yCenter;
uniform float direction;
  
void main(void) {
    float rot = time*0.006;
    float vmin = min(width, height);
    vec2 position = vec2(- (width / 2.0) + gl_FragCoord.x, 
                         - (height / 2.0) + gl_FragCoord.y) / (vmin / 2.0);
    float x = position.x;
    float y = position.y;

bool white = false;
    float prevRingDist = ringDistance;
    for (int i = 0; i < MAX_RINGS; i++) {
        vec2 center = vec2(0.0, yCenter - ringDistance * float(i)*direction);
        float radius = 0.5 + ringDistance / (pow(float(i+5), 1.1)*0.006);
        float dist = distance(center, position);
        dist = pow(dist, 1.0/3.0);
        float ringDist = abs(dist-radius);
        if (ringDist < ringDistance*prevRingDist*7.0) {
            float angle = atan(y - center.y, x - center.x);
            float thickness = 1.1 * abs(dist - radius) / prevRingDist;
            float depthFactor = waveDepth * sin((angle+rot*radius) * waveCount); 
            if (dist > radius) {
                white = (thickness < ringDistance * 5.0 - depthFactor * 2.0);
            }
            else {
                white = (thickness < ringDistance * 5.0 + depthFactor);
            }
            break;
        }
        if (dist > radius || i >= maxRings) break;
        prevRingDist = ringDist;
    }

gl_FragColor = white ? WHITE : BLACK;
}
</script>

void main () {
  gl_Position = vec4(position, 0, 1);
} 
</script>
<div class="ui">
  <div class="ui__field">
    <label for="ringDistance">Ring Distance</label>
    <input id="ringDistance" type="range" min="0.04" max="0.06" value="0.05" step="0.00125">
  </div>
  <div class="ui__field">
    <label for="maxRings">Max Rings</label>
    <input id="maxRings" type="range" min="2" max="50" value="30" step="1" />
  </div>
  <div class="ui__field">
    <label for="waveCount">Wave Count</label>
    <input id="waveCount" type="range" min="2" max="100" value="60" step="1" />
  </div>
  <div class="ui__field">
    <label for="waveDepth">Wave Depth</label>
    <input id="waveDepth" type="range" min="0.01" max="0.2" value="0.04" step="0.005" />
  </div>
  <div class="ui__field">
    <label for="yCenter">Y center</label>
    <input id="yCenter" type="range" min="0.00" max="3.0" value="0.8" step="0.1" />
  </div>
  <div class="ui__field">
    <label for="direction">Direction</label>
    <input id="direction" type="range" min="-3.0" max="3.0" value="1.2" step="0.1" />
  </div>
</div>
<script src='https://unpkg.com/regl@1.3.7/dist/regl.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js'></script>

const $ = (sel) => document.querySelector(sel) || {}
const regl = createREGL()
const $code = (sel) => (
  document.getElementById(sel) || {}
).textContent || "void main() {}"

const drawFrame = regl({
  frag: $code('fragmentShader'),
  vert: $code('vertexShader'),
  
  attributes: {
    position: [[-1,-1],
               [-1, 1],
               [ 1,-1],
               [ 1,-1],
               [-1, 1],
               [ 1, 1]]
  },
  
  uniforms: {
    color: [1,0,0],
    width: ctx => ctx.viewportWidth,
    height: ctx => ctx.viewportHeight,
    ringDistance: ctx => parseFloat($('#ringDistance').value),
    maxRings: ctx => parseInt($('#maxRings').value),
    waveCount: ctx => parseInt($('#waveCount').value),
    waveDepth: ctx => parseFloat($('#waveDepth').value),
    yCenter: ctx => parseFloat($('#yCenter').value),
    direction: ctx => parseFloat($('#direction').value),
    time: ctx => ctx.tick
  },
  
  count: 6
})

regl.frame(ctx => {
  regl.clear({
    color: [1,1,1,1],
    depth: 1
  })
  drawFrame()
})

Frontend Forever App