Digamos que tengo un triángulo hecho con 3 puntos.
makeTriangle(x1, y1, x2, y2, x3, y3);¿Cómo verifico si dicho triángulo contiene un cierto conjunto de puntos?
Estoy tratando de crear una interfaz de usuario interactiva con P5.js que incluya una flecha que le permita cambiar el tamaño del objeto. El código de la estructura alámbrica es:
let Size, x, y, moving; //runs once at the start of the program function setup() { createCanvas(400, 400); Size = 100; x = 10; y = 10; moving = false; } //runs once every frame function draw() { background(220); handleMouse(); fill("grey"); noStroke(); square(x, y, Size, 5); fill("black"); triangle( x + Size * 0.9, y + Size * 0.9, x + Size * 0.7, y + Size * 0.9, x + Size * 0.9, y + Size * 0.7 ); } function handleMouse(){ if(mouseInTriangle(/* x1, y1, x2, y2, x3, y3 */) && mouseIsPressed || mouseIsPressed && moving){ moving = true; } else { moving = false; } if(moving){ Size = max((mouseX + mouseY)/2 + x + y, 50); } } function mouseInTriangle(x1, y1, x2, y2, x3, y3){ //Is mouse in triangle? return true; } <script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js"></script>¿Existe una forma dinámica de saber si un punto está dentro de un triángulo?
Sugiero usar un algoritmo que compare las áreas de triángulos. Consulte Comprobar si un punto dado se encuentra dentro de un triángulo o no . Si el punto está en un triángulo, ese punto divide el triángulo en 3 triángulos más pequeños. Calcula la suma de las áreas de estos 3 triángulos y compárala con el área del triángulo original:
function getArea(a, b, c) { return abs((a[0]*(b[1]-c[1]) + b[0]*(c[1]-a[1])+ c[0]*(a[1]-b[1]))/2); } function mouseInTriangle(x1, y1, x2, y2, x3, y3){ let point = [mouseX, mouseY]; let area = getArea([x1, y1], [x2, y2], [x3, y3]); let areaA = getArea([x1, y1], [x2, y2], point); let areaB = getArea(point, [x2, y2], [x3, y3]); let areaC = getArea([x1, y1], point, [x3, y3]); return abs(areaA + areaB + areaC - area) < 0.001; } let x1, y1, x2, y2, x3, y3; let Size, x, y, moving; //runs once at the start of the program function setup() { createCanvas(400, 400); Size = 100; x = 10; y = 10; moving = false; } //runs once every frame function draw() { background(220); handleMouse(); fill("grey"); noStroke(); square(x, y, Size, 5); fill("black"); x1 = x + Size * 0.9; y1 = y + Size * 0.9; x2 = x + Size * 0.7; y2 = y + Size * 0.9; x3 = x + Size * 0.9; y3 = y + Size * 0.7; triangle(x1, y1, x2, y2, x3, y3); } function handleMouse(){ if(mouseIsPressed && (moving || mouseInTriangle(x1, y1, x2, y2, x3, y3))) { moving = true; Size = max((mouseX + mouseY)/2 + x + y, 50); } else { moving = false; } } function getArea(a, b, c) { return abs((a[0]*(b[1]-c[1]) + b[0]*(c[1]-a[1])+ c[0]*(a[1]-b[1]))/2); } function mouseInTriangle(x1, y1, x2, y2, x3, y3){ let point = [mouseX, mouseY]; let area = getArea([x1, y1], [x2, y2], [x3, y3]); let areaA = getArea([x1, y1], [x2, y2], point); let areaB = getArea(point, [x2, y2], [x3, y3]); let areaC = getArea([x1, y1], point, [x3, y3]); return abs(areaA + areaB + areaC - area) < 0.001; } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>