Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

175
Vistas
How to make a wavy, symmetric circle in WebGL?

I'm trying to develop a shader where I can modulate the the number of curves on a circle, but I'm having an issue in that it is not symmetric. That is, while I can increase the waviness of the circle, it appears as if all waves come from a point on the left-hand-side.

There's a shader here which demonstrates this effect perfectly.

If you click on the ShaderToy link above, you'll notice that the it appears that all the additional curves come from the origin (0 degrees). That is, the left side moves a lot, and the right side of the circle hardly moves at all.

Is there any way to modify this effect such that the curves are more symmetrical in their generation? Ideally it wouldn't look like the curves are originating from the left-hand side, but rather appear in a more uniform manner.

Shader code copied below in case you cannot access the ShaderToy link:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord/iResolution.xy;
    uv = uv * 2.0 - 1.0;
    uv.x *= iResolution.x / iResolution.y;

    float l = length(uv);
    float thi = atan(uv.y,uv.x);

    float freq = sin(iTime) * 9.5 + 5.0;
    float sina = sin(floor(freq) * thi);
    float sinb = sin(ceil(freq) * thi);
    float fr = fract(freq);

    float r = 0.5 + 0.05 * mix(sina, sinb, fr);
    //float r = 0.5 + 0.05 * sin(freq * thi);
    l = step(l,r);
    vec3 col = vec3(0.0,0.5,0.8);
    fragColor = vec4(col*l,1.0);
}

Edit: Oops, I didn't realize the shader link was set to private! Should be fixed now.

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

The problem with this approach is that for each integer frequency the zero point will always be peak on the sin wave. So that place that shares those peaks will appear to not change.

You have to pick some point to consider the "zero" angle. But you can vary where that is so the peaks don't noticeably stack up on each other.

I've abstracted an example of that to this function:

float ripples(float thi, float freq) {
    float adjustedThi = thi + freq;
    // causes each frequency to have it's zero peak at a different spot.

    return sin(floor(freq) * adjustedThi);
}

This makes it a bit more organic.

See: https://www.shadertoy.com/view/NtSBWz

about 4 years ago · Juan Pablo Isaza Denunciar

0

Maybe you can remove time and give it a fixed frequency, and just mix them with base. r = mix(0.5, r, abs(sin(iTime)));

Or make it even to get symmetry.

https://www.shadertoy.com/view/sljBzm

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda