'how to find all points on the circumference of a triangle

I have an algorithm that fills a circle with lines. How it works?
I'm looking for the coordinates of the points lying on the circle on both sides and connecting them with lines.
I look for the coordinates of such points using the following equations.
let p1 = (150 - Math.sqrt(Math.pow(150, 2) - Math.pow((y - 150), 2)));
let p2 = (150 + Math.sqrt(Math.pow(150, 2) - Math.pow((y - 150), 2)));
Where 150 is the coordinates of the center of the circle and the radius.
You can see how it works by running the code. Now I want to find such coordinates at the edges of the triangle. Let's say I wrote the following triangle:

    context.strokeStyle = "red";
    context.lineWidth = 1;
    context.beginPath();
    context.moveTo(0, 300);
    context.lineTo(150, 0);
    context.lineTo(300, 300);
    context.lineTo(0, 300);
    context.stroke();

All I have is the coordinates of its vertices. How to correctly find all points lying on the circle of a triangle?

function func() {
    var canvas = document.getElementById("image");
    var context = canvas.getContext("2d");
    canvas.width = 300;
    canvas.height = 300;

    context.beginPath();
    context.arc(150,150,150,0, 2 * Math.PI, false);
    context.closePath();
    context.lineWidth = 1;
    context.strokeStyle = "rgb(0,0,0)";
    context.stroke();

    for (let y = 0; y < 300; y++) {
        let p1 = (150 - Math.sqrt(Math.pow(150, 2) - Math.pow((y - 150), 2)));
        let p2 = (150 + Math.sqrt(Math.pow(150, 2) - Math.pow((y - 150), 2)));
        //console.log(p1, y);
        context.fillStyle = "red";
        context.fillRect(p1, y, 1, 1);
        
        context.fillStyle = "red";
        context.fillRect(p2, y, 1, 1);

        setTimeout(() => {
            context.strokeStyle = "red";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(p1, y);
            context.lineTo(p2, y);
            context.stroke();
        }, 5 * y);
    }
}

<body onload="func();">
  <canvas id="image"></canvas>
</body>

javascript canvas

Solution 1:^[1]

Here are a pair of functions which will aid in your effort. Specifically...

pointsToGeneralForm converts a pair of points (such as the side of a triangle) into the General Form of Ax + By + C = 0. (See How can I find the general form equation of a line from two points?)
intersectOfGeneralForm determines the intersection point of two General Form lines. (See https://mathemerize.com/point-of-intersection-of-two-lines/)

Now, with these two functions, one can proceed by determining the side of the triangle with the greatest x range, and then iterate the x value over each of the two remaining sides. That is, for each of the sides with the shorter x ranges, determine the intersection point for a given x value for both the short range side and long range side, which returns a pair of points defining a vertical line segment within the interior of the triangle...

The code snippet exemplifies the use of the helper functions...

function pointsToGeneralForm( p1, p2 ) {
  return {
    a: p1.y - p2.y,
    b: p2.x - p1.x,
    c: ( p1.x - p2.x ) * p1.y + ( p2.y - p1.y ) * p1.x
  }
}

function intersectOfGeneralForm( line1, line2 ) {
  let den = ( line1.a * line2.b - line2.a * line1.b );
  return {
    x: ( line1.b * line2.c - line2.b * line1.c ) / den,
    y: ( line1.c * line2.a - line2.c * line1.a ) / den,
  }
}

// lineA represents the side of the triangle.
let lineA = pointsToGeneralForm( { x: 0, y: 5 },{ x: 5, y: 10 } );
console.log( `LineA from (0,5)-(5,10) in General Form is ${lineA.a}x + ${lineA.b}y + ${lineA.c} = 0\n\n` );

// lineTest1 and lineTest2 represent a vertical line used to determine the 
// intersection point for any given X with lineA
let lineTest1 = pointsToGeneralForm( { x: 2, y: 0 },{ x: 2, y: 1 } );
console.log( `LineTest1 from (2,0)-(2,1) in General Form is ${lineTest1.a}x + ${lineTest1.b}y + ${lineTest1.c} = 0` );

let intersectATest1 = intersectOfGeneralForm( lineA, lineTest1 );
console.log( `Intersection of LineA and LineTest1 is ( ${intersectATest1.x}, ${intersectATest1.y} )\n\n` );

let lineTest2 = pointsToGeneralForm( { x: 4, y: 0 },{ x: 4, y: 1 } );
console.log( `LineTest2 from (4,0)-(4,1) in General Form is ${lineTest2.a}x + ${lineTest2.b}y + ${lineTest2.c} = 0` );

let intersectATest2 = intersectOfGeneralForm( lineA, lineTest2 );
console.log( `Intersection of LineA and LineTest2 is ( ${intersectATest2.x}, ${intersectATest2.y} )\n\n` );

let intersectATest3 = intersectOfGeneralForm( lineA, { a: -1, b: 0, c: 2.5 } );
console.log( `Intersection of LineA and x = 2.5 is ( ${intersectATest3.x}, ${intersectATest3.y} )\n\n` );

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'how to find all points on the circumference of a triangle

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]