value noise is not correlated

Question

I am learning noise in glsl and this is the code that i have written as first stage on making gradient noise.

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

this is a link to shadertoy as well

code:

float generateNoise( vec2 position){
    return fract(sin(dot(position, vec2(12.9898,78.233)))*100000.0);
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;
   // uv.x *= iResolution.x/iResolution.y;
    uv *= 100.0;
    vec2 gridId = floor(uv);
    // four corner of the grid gridId
    vec2 br = gridId + vec2(1, 0); 
    vec2 bl = gridId + vec2(0, 0);
    vec2 tr = gridId + vec2(1, 1);
    vec2 tl = gridId + vec2(0, 1);
    
    float noiseBr = generateNoise(br);
    float noiseBl = generateNoise(bl);
    float noiseTr = generateNoise(tr);
    float noiseTl = generateNoise(tl);
    
    float a1 = mix(noiseBl, noiseBr, uv.x);
    float a2 = mix(noiseTl, noiseTr, uv.x);
    float value = mix(a1, a2, uv.y);
    
    fragColor = vec4(value, value, value, 1.0);
}

This is the output

Since i am taking value from four corner of the lattice, i was expecting correlated value and not only black and white but other gray colors as well but i am getting so much blocky.

Can you please help me understand what is wrong here. I am not able to comprehend the output here as i was expecting correlated output.

Answer 1

Found the answer,

the reason was that my uv is expected to be from 0 to 1 but i multiplied by 10 and did not got the fract.

if i do

vec2 uv1 = fragCoord/iResolution.xy;
// uv.x *= iResolution.x/iResolution.y;
uv1 *= 10.0;
vec2 uv = fract(uv1)

The output is smoother, did not realised that i messedup the uv itself

Now output is this for uv*10.0

and this is the output for uv*100.0