My Sketch

var x1 = 0;      // points for line (controlled by mouse)

var y1 = 0;

var x2 = 0;      // static point

var y2 = 0;

​

var sx = 193;    // square position

var sy = 525;

var sw = 32;    // and size

var sh = 68;

var bunkers = [];

var rects = [];

var rects1;

var rects2;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  for (var i = 0; i < 4; i++){

    bunkers[i] = new Bunker(sx+57 + 292*i, sy+ 27); //(250 + 292*i, height-150);

   }

  rects[0] = new Rect(sx, sy, sw, sh); 

  rects[1] = new Rect(sx+82, sy, sw, sh);

  rects[2] = new Rect(sx+16,sy-15,sw+49,sh-9);

 } 

​

function draw() {

  background(150);

    for (var i = 0; i < bunkers.length; i++){

      bunkers[i].show();

    }

  stroke(1);

  // set end of line to mouse coordinates

  x1 = mouseX;

  y1 = mouseY;

  line(x1, y1, x2, y2);

  noStroke();

  fill(173, 26, 139);

  ellipse(mouseX, mouseY, 20, 20);

  // check if line has hit the square

  // if so, change the fill color

  var hit = lineRect(x1,y1,x2,y2, sx,sy,sw,sh);

  if (hit){

    rects[0].displayHit();

  }else{

    rects[0].display();

  }

  var hit = lineRect(x1,y1,x2,y2, sx+82,sy,sw,sh-12);

  if (hit){

    rects[1].displayHit();

  }else{

    rects[1].display();

  }

  var hit = lineRect(x1,y1,x2,y2, sx+16,sy-15,sw+49,sh-9);

  if (hit){

    rects[2].displayHit();

  }else{

    rects[2].display();

  }

  // draw the line

  //stroke(0, 150);

  //line(x1, y1, x2, y2);

​

}

​

​

// LINE/RECTANGLE

function lineRect(x1, y1, x2, y2, rx, ry, rw, rh) {

​

  // check if the line has hit any of the rectangle's sides

  // uses the Line/Line function below

  var left =   lineLine(x1,y1,x2,y2, rx,ry,rx, ry+rh);

  var right =  lineLine(x1,y1,x2,y2, rx+rw,ry, rx+rw,ry+rh);

  var top =    lineLine(x1,y1,x2,y2, rx,ry, rx+rw,ry);

  var bottom = lineLine(x1,y1,x2,y2, rx,ry+rh, rx+rw,ry+rh);

​

  // if ANY of the above are true, the line

  // has hit the rectangle

  if (left || right || top || bottom) {

    return true;

  }

  return false;

}

​

​

// LINE/LINE

function lineLine(x1, y1, x2, y2, x3, y3, x4, y4) {

​

  // calculate the direction of the lines

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

  var 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

    var intersectionX = x1 + (uA * (x2-x1));

    var intersectionY = y1 + (uA * (y2-y1));

    fill(255,0,0);

    noStroke();

    ellipse(intersectionX, intersectionY, 20, 20);

​

    return true;

  }

  return false;

}

​

​

​

function Rect(x, y, w, h){

  this.x = x;

  this.y = y;

  this.w = w;

  this.h = h;

  this.display = function(){

    noFill();

    stroke(1);

    rect(this.x, this.y, this.w, this.h);

  }

  this.displayHit = function(){

    fill(0);

    stroke(5);

    rect(this.x, this.y, this.w, this.h);

  }

}

​

​

​

​

​

​

function Bunker(x, y){

  this.r = 50;

  this.x = x;

  this.y = y;

  //this.col = color(23, 58, 24);

  this.col = color(255);

  this.show = function(){

    push();

    translate(x-257, y-68);

    noStroke();

    fill(this.col);    

    beginShape();

    vertex(200, 50);

    vertex(208, 50);

    vertex(208, 42);

    vertex(216, 42);

    vertex(216, 34);

    vertex(224, 34);

    vertex(224, 26);

    vertex(290, 26);

    vertex(290, 34);

    vertex(298, 34);

    vertex(298, 42);

    vertex(306, 42);

    vertex(306, 50);

    vertex(314, 50);

    vertex(314, 110);

    vertex(290, 110);

    vertex(290, 102);

    vertex(282, 102);

    vertex(282, 94);

    vertex(274, 94);

    vertex(274, 86);

    vertex(240, 86);

    vertex(240, 94);

    vertex(232, 94);

    vertex(232, 102);

    vertex(224, 102);

    vertex(224, 110);

    vertex(200, 110);

    endShape(CLOSE);

    pop();

  }

}