How to ‘unbunch’ (co)sine waves in a 2D context?

For reference, here’s a jsfiddle I’m using to test stuff: https://jsfiddle.net/roomyrooms/7L1n02fs/57/

And here’s a gif demonstrating my issue: https://i.gyazo.com/a18e7fe19b76a93655a2cc89f166dd61.mp4

And my fragment code:

var fragmentShader = `
precision mediump float;

varying vec2 vTextureCoord;
varying vec2 vFilterCoord;

uniform sampler2D uSampler;
uniform float uTime;

void main() {
  vec4 ogCol = texture2D(uSampler, vTextureCoord);
  float dist = distance(vTextureCoord.xy, vec2(0.5));
  float mod = 0.0;
  float sinTime = sin(uTime*0.01*vTextureCoord.y) * 0.5;
  float cosTime = cos(uTime*0.01*vTextureCoord.x) * 0.5;
  float thresh = 0.25 + (sinTime*0.025) + (cosTime*0.025);
  if (dist <= thresh) {
    mod = 1.0;
  } else if (dist <= thresh+0.02) {
    mod = 100.0;
  }
  gl_FragColor = ogCol * mod;
}`

Basically, I’ve discovered how to reduce the speed of time in WebGl/in trig funcs, as well as decrease their amplitude. What I’m not sure how to do, however, is ‘capture’ a specific part of the wave function to preserve. As you can see in the gif, it eventually becomes very congested/bunched together.

I much prefer the smooth wave aesthetic, but I can’t seem to keep it at that level. Any help with this?4

PS: I’m using PIXIjs here as a middleman, but all the stuff inside the fragment shader string is pure WebGl.

Answer

You’ll need to add a component of time that isn’t proportional to the texture coordinate. + instead of *.

You could try something like this:

  float k = uTime*0.01;
  float g = 40.0;
  float sinTime = sin(k + g*vTextureCoord.y) * 0.5;
  float cosTime = cos(k + g*vTextureCoord.x) * 0.5;

There is an artistic aspect to what you are asking for, so you can tune those constants to your liking of course.

Forked fiddle: https://jsfiddle.net/3y28ha5v/