←Collision Detection→

[ your browser does not support the canvas tag ]

LINE/LINE

With this example, you'll be able to build a super-sweet sword fighting game! (Or reboot one that never got finished?)

To check if two lines are touching, we have to calculate the distance to the point of intersection:

float uA = ((x4-x3)*(y1-y3) - (y4-y3)*(x1-x3)) / ((y4-y3)*(x2-x1) - (x4-x3)*(y2-y1));

float uB = ((x2-x1)*(y1-y3) - (y2-y1)*(x1-x3)) / ((y4-y3)*(x2-x1) - (x4-x3)*(y2-y1));

If there is a collision, uA and uB should both be in the range of 0-1. We test for that like this:

if (uA >= 0 && uA <= 1 && uB >= 0 && uB <= 1) {
    return true;
}
return false;

That's it! We can add one more feature, if desired, that will tell us the intersection point of the two lines. This might be useful if, for example, you're making a sword-fighting game and want sparks to fly where the two blades hit.

float intersectionX = x1 + (uA * (x2-x1));
float intersectionY = y1 + (uA * (y2-y1));

Here's the full example:

float x1 = 0;    // line controlled by mouse
float y1 = 0;
float x2 = 10;   // fixed end
float y2 = 10;

float x3 = 100;  // static line
float y3 = 300;
float x4 = 500;
float y4 = 100;


void setup() {
  size(600,400);

  strokeWeight(5);  // make lines easier to see
}


void draw() {
  background(255);

  // set line's end to mouse coordinates
  x1 = mouseX;
  y1 = mouseY;

  // check for collision
  // if hit, change color of line
  boolean hit = lineLine(x1,y1,x2,y2, x3,y3,x4,y4);
  if (hit) stroke(255,150,0, 150);
  else stroke(0,150,255, 150);
  line(x3,y3, x4,y4);

  // draw user-controlled line
  stroke(0, 150);
  line(x1,y1, x2,y2);
}


// LINE/LINE
boolean lineLine(float x1, float y1, float x2, float y2, float x3, float y3, float x4, float y4) {

  // calculate the distance to intersection point
  float uA = ((x4-x3)*(y1-y3) - (y4-y3)*(x1-x3)) / ((y4-y3)*(x2-x1) - (x4-x3)*(y2-y1));
  float uB = ((x2-x1)*(y1-y3) - (y2-y1)*(x1-x3)) / ((y4-y3)*(x2-x1) - (x4-x3)*(y2-y1));

  // if uA and uB are between 0-1, lines are colliding
  if (uA >= 0 && uA <= 1 && uB >= 0 && uB <= 1) {

    // optionally, draw a circle where the lines meet
    float intersectionX = x1 + (uA * (x2-x1));
    float intersectionY = y1 + (uA * (y2-y1));
    fill(255,0,0);
    noStroke();
    ellipse(intersectionX,intersectionY, 20,20);

    return true;
  }
  return false;
}

Based on a tutorial by Paul Bourke, who includes code to test if the lines are parallel and coincident. Also based on this post by Ibackstrom and help from Reddit.

NEXT: Line/Rectangle