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

Question

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.

Answer 1

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.