# Shader displaying glitchy

**URL:** <https://discourse.processing.org/t/shader-displaying-glitchy/19134>\
**Category:** Processing\
**Created:** [March 29, 2020, 9:27am UTC](https://discourse.processing.org/t/shader-displaying-glitchy/19134 "2020-03-29T09:27:52Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![opheliagame](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/opheliagame/32/22248_2.png) [@opheliagame](https://discourse.processing.org/u/opheliagame)\
**Post date:** [March 29, 2020, 9:27am UTC](https://discourse.processing.org/t/shader-displaying-glitchy/19134/1 "2020-03-29T09:27:52Z")

</div>

I have written a shader. In VSCode it looks like the one on the right.  
But on processing, it looks glitchy. Only the bottom left ‘block’ looks clean.

 ![combined](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/49bd06779322c633ec52eb5ae0cf5e2b0b90c1f7.png)

---

<div class="post-metadata">

**Author:** ![noahbuddy](https://avatars.discourse-cdn.com/v4/letter/n/73ab20/32.png) [@noahbuddy](https://discourse.processing.org/u/noahbuddy)\
**Post date:** [March 29, 2020, 10:34pm UTC](https://discourse.processing.org/t/shader-displaying-glitchy/19134/2 "2020-03-29T22:34:28Z")

</div>

Not knowing what math is being done in your shader, we can only guess.  
At a glance, perhaps the VS version provides a different precision qualifier.  
To set the default precision, add to the top of your shader:

```auto
precision highp float; // alternate mediump or lowp
precision highp int;

```

Take a look [here](https://www.shaderific.com/glsl-qualifiers/) for details on those.

It may also help to post your code on this forum. 😉

---

<div class="post-metadata">

**Author:** ![opheliagame](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/opheliagame/32/22248_2.png) [@opheliagame](https://discourse.processing.org/u/opheliagame)\
**Post date:** [March 30, 2020, 3:48pm UTC](https://discourse.processing.org/t/shader-displaying-glitchy/19134/3 "2020-03-30T15:48:20Z")

</div>

```auto
#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif
uniform float u_time;
uniform vec2 u_resolution;
vec3 colorA = vec3(0.0314, 0.7922, 0.0078);
vec3 colorB = vec3(0.2824, 0.0039, 0.7333);
void main() 
{
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    // const float width = u_resolution.x;
    // const float height = u_resolution.y;
    const float divisions = 40.0;
    const float x_size = 6.0;
    const float y_size = 24.0;
    float x;
    for(float c = 1.0; c < divisions; c+=(x_size+2.0)) {
        x += step(c/divisions, st.x);
    }
    for(float c = 1.0+x_size; c < divisions; c+=(x_size+2.0)) {
        x -= step(c/divisions, st.x);
    }
    float y;
    for(float c = 1.0; c < divisions; c+=(y_size+2.0)) {
        y += step(c/divisions, st.y);
    }
    for(float c = 1.0+y_size; c < divisions; c+=(y_size+2.0)) {
        y -= step(c/divisions, st.y);
    }
    vec3 color = vec3(x*y);
    vec3 pct = vec3(st.y)*(sin(u_time));
    color = color * mix(colorA, colorB, pct);
    gl_FragColor = vec4(color, 1.0);
}

```

@noahbuddy thank you for replying! As you suggested, I changed the mediump to highp but I am still getting the same results.  
By any means, would this be because I am using the step function?

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [March 30, 2020, 7:44pm UTC](https://discourse.processing.org/t/shader-displaying-glitchy/19134/4 "2020-03-30T19:44:27Z")

</div>

It’s because you’re not initializing x or y. Set them to 0.0 initially and it will work 🙂

BTW. you can make a [grid without any for loops](http://shdr.bkcore.com/#1/dVLLboMwEPyVFSeoECFA1DzUQ1upt1Y99dJUkUtM4ghsZJs0D+Xfu8ZASJScbO/M7uzu+OgsRVoVlGvlTL+dUtKUKSY4rNlqXUKWC6Jnc15xlglZ2DdoVtBecEvTCCRVIq80piKyJXLP+MogMWSfQrGbwAdmkxzDCJhAKnIhn+Gpht0wCONh4kMYPE6iyJxh+Dj2Zn3yy5kcjaPEkuJJnRTHsWdrC7aEgjDuenCcc7ANK425q3zxJsnqVQi5DHb7wXkKfM0ADNvOXKaGrzQtUSv2IZMk1a7SwQ4eYIiynoeXBh+OeoQ9xkcGnzXaTe9YrmA71w7tN/P4Rsgyu94sFxMTS/ZhiOWQc3L8u44RrSX7rTS1iuXZgyuEtya0dhZEt9F3gtTdJZZAIZY0/2L07zZcSrGhqRHr8Du23/0mF57NeW1ak4absL2xA3X7XeKW7bPbc2KmNlu+7BeJ9S7blXTrhHMPmIUw/oFDa0UfuRoQCyK59uPHd2o1Z2pPNVDVgXBOF8adYKOc0z8=).

---

<div class="post-metadata">

**Author:** ![opheliagame](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/opheliagame/32/22248_2.png) [@opheliagame](https://discourse.processing.org/u/opheliagame)\
**Post date:** [March 31, 2020, 5:09am UTC](https://discourse.processing.org/t/shader-displaying-glitchy/19134/5 "2020-03-31T05:09:26Z")

</div>

That worked! Thanks 😃  
The grid shader code is pretty neat. Next up, fract()!