p5.j​​s 中旋轉線上的圓圈之間的碰撞檢測

Question

我有一個帶有圓圈和旋轉臂的簡單草圖，從圓圈的中心順時針旋轉。 在草圖中，中心左側有兩個較小的橢圓。

我正在尋找一種方法來檢測旋轉臂何時與較小的橢圓相撞，因為它是如何旋轉臂的，首先要擊中靠近中心的橢圓。 我在完全實現這個想法時遇到了一些麻煩，我想知道以前是否有人遇到過這種情況？

這里有一些代碼可以更好地說明我的觀點

希望這是有道理的！

 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>

Answer 1

這個問題基本上是重復的，但我只是想確保解決方案有效：

 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>

使用此示例需要進行一些調整，但getLineCircleIntersections基本上是如何使用 p5.js 計算圓上直線的交點的直接副本