Quiero generar un conjunto de elementos de texto dentro de un triángulo delimitado por coordenadas preestablecidas. Por ejemplo; algo como esto Tenga en cuenta que el texto debe estar dentro del triángulo rosa. (Está bien si el texto recorta las líneas del triángulo ya que el triángulo será invisible en el producto final, esto es solo como referencia)
Para lograr esto creé el siguiente codepen.
La generación aleatoria dentro de los límites especificados funciona bien, pero dado que es posible que se generen las mismas coordenadas o muy cercanas, a veces el texto se superpone.
¿Hay algún enfoque posible que pueda tomar para solucionar/evitar este problema de manera eficiente?
function randomIntFromInterval(min, max) { return Math.floor(Math.random() * (max - min + 1) + min) } function area(x1, y1, x2, y2, x3, y3) { return Math.abs((x1 * (y2 - y3) + x2 * (y3 - y1) + x3 * (y1 - y2)) / 2.0); } function isInside(x1, y1, x2, y2, x3, y3, x, y) { let A = area(x1, y1, x2, y2, x3, y3); let A1 = area(x, y, x2, y2, x3, y3); let A2 = area(x1, y1, x, y, x3, y3); let A3 = area(x1, y1, x2, y2, x, y); return (A == A1 + A2 + A3); } let canvas = document.querySelector('canvas') const CANVAS_SIZE = 300 canvas.width = CANVAS_SIZE canvas.height = CANVAS_SIZE const ctx = canvas.getContext('2d'); let arrayOfText = ['A', 'B', 'C', 'D'] ctx.beginPath(); ctx.moveTo(25, 25); ctx.lineTo(225, 25); ctx.lineTo(225, 225); ctx.lineTo(25, 25); ctx.strokeStyle = "#bb0874" ctx.stroke() ctx.font = `600 14px Arial`; for (let i = 0; i < (arrayOfText.length); i++) { while (true) { let x = randomIntFromInterval(40, 180) let y = randomIntFromInterval(15, 160) if (isInside(25, 25, 225, 25, 225, 225, x, y)) { ctx.fillText(arrayOfText[i], x, y); break; } } } canvas { border: 1px solid black; } <body> <canvas></canvas> </body>