Perlin Noise shows lines between unit squares

Question

As said in the title, my problem is that my perlin noise is showing clear lines between the unit squares instead of flowing smoothly. My code, which is very basic, is shown below. It is based on the simple explanation from this site: http://flafla2.github.io/2014/08/09/perlinnoise.html

int grads[][] = {
            {1,0},{0,1},{-1,0},{0,-1},
            {1,1},{-1,1},{1,-1},{-1,-1}
    };
    public double perlin (double x, double y) {

        int unitX = (int)Math.floor(x) & 255; // decide unit square
        int unitY = (int)Math.floor(y) & 255; // decide unit square

        double relX = x-Math.floor(x); // relative x position
        double relY = y-Math.floor(y); // relative y position

        //System.out.print(unitX + " " + unitY + " ");

        // bad pseudorandom gradient
        int units = unitX+unitY;
        //System.out.println(units + " added ");
        int[] gradTL = grads[(units)%8];
        int[] gradTR = grads[(units+1)%8];
        int[] gradBL = grads[(units+1)%8];
        int[] gradBR = grads[(units+2)%8];

        // distance from edges to point, relative x and y inside the unit square
        double[] vecTL = {relX,relY};
        double[] vecTR = {1-relX,relY};
        double[] vecBL = {relX,1-relY};
        double[] vecBR = {1-relX,1-relY};

        double tl = dot(gradTL,vecTL);
        double tr = dot(gradTR,vecTR);
        double bl = dot(gradBL,vecBL);
        double br = dot(gradBR,vecBR);

        double u = fade(relX);
        double v = fade(relY);

        double x1 = lerp(tl,tr,u);
        double y1 = lerp(bl,br,u);

        return lerp(x1,y1,v);
    }
    public double dot(int[] grad, double[] dist) {
        return (grad[0]*dist[0]) + (grad[1]*dist[1]);
    }
    public double lerp(double start, double end, double rate){
        return start+rate*(end-start);
    }
    public double fade(double t) {
        return t*t*t*(t*(t*6-15)+10);
    }

I am using a flow field to visualize the noise, which I know is probably just overcomplicated but it is the end goal of this project. Example As you can see, there are obvious lines that are showing the grid of the perlin noise.

Here is what I'm inputting into the function.

double val = p.perlin((x/width)*2, (y/height)*2);

I want to try and make the noise flow smoothly between the unit squares. Also yes, I understand that simplex noise is considered to be better, but I am not trying to make perlin noise, not simplex noise.

score 0 · Answer 1 · answered Mar 27 '18 at 01:16

This part looks wrong to me:

    // distance from edges to point, relative x and y inside the unit square
    double[] vecTL = {relX,relY};
    double[] vecTR = {1-relX,relY};
    double[] vecBL = {relX,1-relY};
    double[] vecBR = {1-relX,1-relY};

I think you want

    double[] vecTL = {relX,relY};
    double[] vecTR = {relX-1,relY};
    double[] vecBL = {relX,relY-1};
    double[] vecBR = {relX-1,relY-1};

Perlin Noise shows lines between unit squares

1 Answers1