I'm trying to make a Perlin noise function, but the interpolation doesn't work right. I hoped that switching the different dot products at the interpolation would work, but it doesn't. I also tested if my interpolation function works and it looks likes it does work.

My script is at: https://codepen.io/Koen124/pen/WNZyMdj?editors=0010

    var x10 = x - Math.floor(x); // x10 is between 0 and 1
    var y10 = y - Math.floor(y); // y10 is between 0 and 1
      
    // topleft && topright
    var upInterpolate = (vec_dot[0]*cosInterp(x10))+(vec_dot[1]*(1-cosInterp(x10)));
      
    // bottomleft && bottomright
    var downInterpolate = (vec_dot[2]*cosInterp(x10))+(vec_dot[3]*(1-cosInterp(x10)));

    var final = (upInterpolate*cosInterp(y10))+(downInterpolate*(1-cosInterp(y10)));

I first tried my Perlin noise script with only 4 vectors which you can see here: https://codepen.io/Koen124/pen/GRMGrEM?editors=0010

The interpolation test is at: https://codepen.io/Koen124/pen/ExwRMgB?editors=0010