geometrywebgl

Function to find the rectangle angle of the triangle that contains a given point


diagram explaining the case

In a webgl / fragment shader context. I have a uv space. Is filled of right angle triangles as the image shows. Notice that "c0" is at 0.5 , 0.5. "ac" side is 0.25 "bc" side is 0.1666 (1/6) I looking a way to, given a point "p" in uv coordinates, obtain the coordinates of the right angle "c" of the triangle that contains that point.

Edit: Im working in webgl and looking for a function like: vec2 getAngleC(vec2 p)

I tried creating the function by my self and using ChatGPT 4 which seams to get confused.


Solution

  • First find the square that the point lies in.

    x = Math.trunc(u/ac);
    y = Math.trunc(v/bc);
    

    That gives you the index of the square. We can use local coordinates within the square.

    lx = u - x*ac;
    ly = v - y*bc;
    

    Next you have to find which way the diagonal line is going. Lets call top left to bottom right "even" and top right to bottom left "odd".

    sig = (x%2 + y%2)%2;
    

    If the sig is 0, then you have an even square. (as in your example). Which means the line going through the square is defined as.

    h = bc - lx*bc/ac;
    if( ly > h ){
        cx = (x+1) * ac;
        cy = (y+1)* bc;
    } else{
        cx = x*ac;
        cy = y*bc;
    }
    

    cx and cy are the u,v coordinates of right angle of interest.

    Case 2. Odd. We do the same think.

    h = lx*bc/ac;
    
    if(ly > h){
        cx = x*ac;
        cy = (y + 1)*bc;
    } else{
        cx = (x+1)*ac;
        cy = y*bc;
    }
    

    I hope that helps. I made some assumptions about your problem and assumed you're using javascript. Maybe this is in the shader though and you might need to change a little bit.