Tengo un boceto simple con un círculo y un brazo giratorio que gira en el sentido de las agujas del reloj desde el centro del círculo. En el boceto hay dos elipses más pequeñas a la izquierda del centro.
Estoy buscando una manera de detectar cuándo el brazo giratorio ha colisionado con las elipses más pequeñas, debido a la forma en que gira el brazo y golpea la elipse más cerca del centro primero. Estoy teniendo algunos problemas para darme cuenta completamente de esta idea y me pregunto si alguien se ha encontrado con esto antes.
Aquí algo de código para ilustrar mejor mi punto
¡espero que esto tenga sentido!
let angle; function setup() { createCanvas(400, 400); angleMode(RADIANS); angle = 0.00; } function draw() { background(220); translate(width / 2, height / 2); noFill(); ellipse(0, 0, 400); fill(255, 0, 0, 40); ellipse(60, 0, 30); ellipse(160, 0, 30); stroke(0, 200); strokeWeight(3); rotate(angle); line(0, 0, 0, -200); angle += 0.015; } function doSomthing() { // when arm collides with smaller circles // do somthing. } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>Esta pregunta es básicamente un duplicado, pero solo quería asegurarme de que la solución funcionara:
const lineLength = 200; const radius = 15; let angle; let lineStart; let circleOne; let circleTwo; function setup() { createCanvas(400, 400); angleMode(RADIANS); ellipseMode(RADIUS); angle = -PI / 2; lineStart = createVector(0, 0); circleOne = createVector(60, 0); circleTwo = createVector(160, 0); } function draw() { background(220); translate(width / 2, height / 2); noFill(); ellipse(0, 0, 400); let lineEnd = createVector(lineLength * cos(angle), lineLength * sin(angle)); fill(255, 0, 0, 40); push(); if (getLineCircleIntersections(lineStart, lineEnd, circleOne, radius).length > 0) { fill('red'); } ellipse(circleOne.x, circleOne.y, radius); pop(); push(); if (getLineCircleIntersections(lineStart, lineEnd, circleTwo, radius).length > 0) { fill('red'); } ellipse(circleTwo.x, circleTwo.y, radius); pop(); stroke(0, 200); push(); strokeWeight(2); rotate(angle); line(lineStart.x, lineStart.y, 200, 0); pop(); push(); strokeWeight(6); stroke('blue'); point(lineEnd.x, lineEnd.y); pop(); angle += 0.015; } function getLineCircleIntersections(p1, p2, cpt, r) { let x1 = p1.copy().sub(cpt); let x2 = p2.copy().sub(cpt); let dv = x2.copy().sub(x1) let dr = dv.mag(); let D = x1.x * x2.y - x2.x * x1.y; // evaluate if there is an intersection let di = r * r * dr * dr - D * D; if (di < 0.0) { return []; } let t = sqrt(di); let ip = []; ip.push(new p5.Vector(D * dv.y + Math.sign(dv.y) * dv.x * t, -D * dv.x + abs(dv.y) * t).div(dr * dr).add(cpt)); if (di > 0.0) { ip.push(new p5.Vector(D * dv.y - Math.sign(dv.y) * dv.x * t, -D * dv.x - abs(dv.y) * t).div(dr * dr).add(cpt)); } push(); for (let p of ip) { stroke('lime'); strokeWeight(8); point(px, py); } pop(); return ip.filter(p => px >= p1.x && px <= p2.x); } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> Se requirieron algunos ajustes para trabajar con este ejemplo, pero getLineCircleIntersections es básicamente una copia directa de Cómo calcular el punto de intersección de una línea en un círculo usando p5.js