Triangle-Circle Intersection Detection with Curved Motion

This post demonstrates real-time intersection detection between a moving triangle and a moving circle, with automatic marking of intersection points as the shapes follow curved paths.

Intersection Demos:

Triangle-Circle Intersection Detection

Intersection Algorithm:

1. Line-Circle Intersection

function lineCircleIntersection(lineStart, lineEnd, circleCenter, radius) {
    // Convert to quadratic equation: at² + bt + c = 0
    const dx = lineEnd.x - lineStart.x;
    const dy = lineEnd.y - lineStart.y;
    const fx = lineStart.x - circleCenter.x;
    const fy = lineStart.y - circleCenter.y;
    
    const a = dx * dx + dy * dy;
    const b = 2 * (fx * dx + fy * dy);
    const c = (fx * fx + fy * fy) - radius * radius;
    
    const discriminant = b * b - 4 * a * c;
    // Returns intersection points on triangle edges
}

2. Point-in-Triangle Test

function pointInTriangle(point, triangle) {
    // Barycentric coordinate system
    // Tests if circle center is inside triangle
    const u = (dot11 * dot02 - dot01 * dot12) * invDenom;
    const v = (dot00 * dot12 - dot01 * dot02) * invDenom;
    return (u >= 0) && (v >= 0) && (u + v <= 1);
}

Motion Paths:

Triangle Path (Large Circle - Clockwise)

// Large circular orbit - triangle moves clockwise
const x = centerX + Math.cos(time) * 180;
const y = centerY + Math.sin(time) * 180;
const rotation = time + Math.PI / 2; // Points in movement direction

Circle Path (Small Circle - Counter-clockwise)

// Smaller, faster circular orbit - circle moves counter-clockwise
const x = centerX + Math.cos(-time * 1.5) * 120;
const y = centerY + Math.sin(-time * 1.5) * 120;
// Opposite direction and 1.5x speed creates regular intersections

Intersection Visualization:

• 🔴 Active Intersections: Real-time intersection points (pulsing red circles)
• 🟡 Persistent Markers: Historical intersection points that fade over 10 seconds
• Path Guides: Dashed lines showing the movement paths (toggleable)
• Live Statistics: Current and total intersection counts

Detection Features:

Real-time Processing

• Detects intersections between triangle edges and circle perimeter
• Handles special case when circle center is inside triangle
• Avoids duplicate detection with proximity checking
• Maintains persistent history with automatic cleanup

Visual Feedback

// Current intersections: pulsing animation
const animate = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
animate.setAttribute('attributeName', 'r');
animate.setAttribute('values', '8;12;8');

// Persistent intersections: fade over time
const opacity = Math.max(0.1, 1 - age / 10);

Interactive Controls:

• Start/Stop Animation: Control the intersection detection process
• Toggle Paths: Show/hide the curved path guides
• Clear Points: Remove all persistent intersection markers
• Speed Control: Adjust animation speed from 0.5x to 3x

Mathematical Precision:

Geometric Algorithms

• Quadratic Formula: Precise line-circle intersection calculation
• Barycentric Coordinates: Accurate point-in-triangle testing
• Parametric Curves: Smooth mathematical motion paths
• Temporal Tracking: Time-based intersection history

This demonstrates advanced geometric intersection detection with real-time visualization, combining mathematical precision with interactive feedback systems!