let angle = 0; let sides = []; let vertices = []; const len = 100; function setup() { createCanvas(windowWidth, windowHeight); angleMode(DEGREES); angleOne = createSlider(0, 89, 60); angleOne.position(10, 10); angleOne.style("width", "80px"); angleTwo = createSlider(0, 89, 60); angleTwo.position(10, 30); angleTwo.style("width", "80px"); // Initial vertice & side setup (these don't change) let v1 = createVector(width / 2 - len / 2, height * 0.7); let v2 = createVector(width / 2 + len / 2, height * 0.7); sides[0] = new Side(v1.x, v1.y, v2.x, v2.y, "green"); vertices[0] = new Vertex(v1.x, v1.y); vertices[1] = new Vertex(v2.x, v2.y); } function draw() { background(255); let angOne = angleOne.value(); let angTwo = angleTwo.value(); fill(0); strokeWeight(0); textSize(15); text(angOne, 100, 25); text(angTwo, 100, 45); let v2Offset = createVector(len * cos(-angOne), len * sin(-angOne)); let v3Offset = createVector(-len * cos(angTwo), -len * sin(angTwo)); vertices[2] = new Vertex( vertices[0].ax + v2Offset.x, vertices[0].ay + v2Offset.y ); vertices[3] = new Vertex( vertices[1].ax + v3Offset.x, vertices[1].ay + v3Offset.y ); // Update the sides sides[1] = new Side( vertices[0].ax, vertices[0].ay, vertices[2].ax, vertices[2].ay ); sides[3] = new Side( vertices[1].ax, vertices[1].ay, vertices[3].ax, vertices[3].ay ); const m1 = (vertices[2].ay - vertices[0].ay) / (vertices[2].ax - vertices[0].ax); const m2 = (vertices[3].ay - vertices[1].ay) / (vertices[3].ax - vertices[1].ax); // Calculate the y-offset relative to vertices[0] const b2 = (vertices[1].ax - vertices[0].ax) * -m2; const xInt = b2 / (m1 - m2); const yInt = xInt * m1; // Note xInt and yInt are relative to vertices[0] // draw all the things // sides.forEach((s) => s.show()); // stroke(0, 255, 0); // strokeWeight(20); point(vertices[0].ax + xInt, vertices[0].ay + yInt); vertices[4] = new Vertex(vertices[0].ax + xInt, vertices[0].ay + yInt); sides[4] = new Side( vertices[1].ax, vertices[1].ay, vertices[0].ax + xInt, vertices[0].ay + yInt, "blue" ); sides[5] = new Side( vertices[0].ax, vertices[0].ay, vertices[0].ax + xInt, vertices[0].ay + yInt, "purple" ); scale(2); // so I can make the triangle actually *visible* translate(-width / 3, -height / 4); sides[0].show(); sides[4].show(); sides[5].show(); vertices[0].show(); vertices[1].show(); vertices[4].show(); strokeWeight(1); stroke(255, 0, 0); noFill(); arc(vertices[0].ax, vertices[0].ay, 40, 40, -1 * angleOne.value(), 0, PIE); arc( vertices[1].ax, vertices[1].ay, 40, 40, -180, -(180 - angleTwo.value()), PIE ); let P1x = vertices[0].ax; let P1y = vertices[0].ay; let P2x = vertices[1].ax; let P2y = vertices[1].ay; let P3x = vertices[4].ax; let P3y = vertices[4].ay; stroke(255, 255, 0); stroke("purple"); // Change the color strokeWeight(5); // Make the points 10 pixels in size let P0 = createVector(P1x + 60, P1y - 40); let V0 = createVector(0, -15); point(P0.x, P0.y); stroke(255, 0, 0); point(P0.x + V0.x, P0.y + V0.y); strokeWeight(2); stroke("purple"); line(P0.x, P0.y, P0.x + V0.x, P0.y + V0.y); // console.log(P1x,P1y,P2x,P2y,P3x,P3y); let A1 = P3y - P1y; let B1 = -(P3x - P1x); let C1 = A1 * P1x + B1 * P1y; let A2 = -(P3y - P2y); let B2 = P3x - P2x; let C2 = A2 * P2x + B2 * P2y; let A3 = -(P2y - P1y); let B3 = P2x - P1x; let C3 = A3 * P2x + B3 * P2y; let t1 = (C1 - A1 * P0.x - B1 * P0.y) / (A1 * V0.x + B1 * P0.y); let t2 = (C2 - A2 * P0.x - B2 * P0.y) / (A2 * V0.x + B2 * P0.y); let t3 = (C3 - A3 * P0.x - B3 * P0.y) / (A3 * V0.x + B3 * P0.y); let times = [t1, t2, t3]; let posTimes = []; for (let i = 0; i < times.length; i++) { times[i] = round(times[i], 2); } // console.log("After rounding:", times); for (let i = 0; i < times.length; i++) { if (times[i] > 0) { posTimes.push(times[i]); } } // console.log("posTimes:", posTimes); trueTime = min(posTimes); if (trueTime == round(t1, 2)) { fill("Blue"); text("Hit Blue", vertices[1].ax + 50, max(50, vertices[1].ay - 50)); } else if (trueTime == round(t2, 2)) { fill("Green"); text("Hit Green", vertices[1].ax + 50, max(50, vertices[1].ay - 50)); } else { fill("Purple"); text("Hit Purple", vertices[1].ax + 50, max(50, vertices[1].ay - 50)); } } class Side { constructor(x1, y1, x2, y2, col = "black") { this.a = createVector(x1, y1); this.b = createVector(x2, y2); this.color = col; } show() { stroke(this.color); strokeWeight(4); line(this.ax, this.ay, this.bx, this.by); } } class Vertex { constructor(x1, y1) { this.a = createVector(x1, y1); } show() { stroke(255, 0, 0); strokeWeight(10); point(this.ax, this.ay); } }

 html, body { margin: 0; padding: 0; overflow: hidden }

 <script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script>