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.

1 Like

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:

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

Take a look here for details on those.

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

1 Like

```
#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?

1 Like

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.

1 Like

That worked! Thanks

The grid shader code is pretty neat. Next up, fract()!