Tengo un algoritmo que llena un círculo con líneas. ¿Cómo funciona?
Busco las coordenadas de los puntos que se encuentran en el círculo en ambos lados y los conecto con líneas.
Busco las coordenadas de tales puntos usando las siguientes ecuaciones.
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)));
Donde 150 son las coordenadas del centro del círculo y el radio.
Puedes ver cómo funciona ejecutando el código. Ahora quiero encontrar tales coordenadas en los bordes del triángulo. Digamos que escribí el siguiente triángulo:
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();Todo lo que tengo son las coordenadas de sus vértices. ¿Cómo encontrar correctamente todos los puntos que se encuentran en el círculo de un triángulo?
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>Aquí hay un par de funciones que le ayudarán en su esfuerzo. Específicamente...
pointsToGeneralForm convierte un par de puntos (como el lado de un triángulo) en la forma general de Ax + By + C = 0. (Consulte ¿Cómo puedo encontrar la ecuación de forma general de una línea a partir de dos puntos? )
intersectOfGeneralForm determina el punto de intersección de dos líneas de formulario general. (Ver https://mathemerize.com/point-of-intersection-of-two-lines/ )
Ahora, con estas dos funciones, se puede proceder determinando el lado del triángulo con el mayor rango de x y luego iterar el valor de x sobre cada uno de los dos lados restantes. Es decir, para cada uno de los lados con los rangos de x más cortos, determine el punto de intersección para un valor de x dado tanto para el lado de rango corto como para el lado de rango largo, lo que devuelve un par de puntos que definen un segmento de línea vertical dentro del interior del triángulo...
El fragmento de código ejemplifica el uso de las funciones auxiliares...
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` );