createCanvas(400, 400);

}

​

var b1X = 30;

var b1Y = 75;

var b1width = 50;

var b1height = 100;

var b1Color = "white";

​

var b2X = 300;

var b2Y = 100;

var b2width = 25;

var b2height = 25;

var b2Color = "white";

​

var b3X = 45;

var b3Y = 250;

var b3width = 50;

var b3height = 50;

var b3Color = "white";

​

var b4X = 300;

var b4Y = 350;

var b4width = 50;

var b4height = 50;

var b4Color = "white";

function draw() {

  background(220);

​

  fill(b1Color);

  rect(b1X, b1Y, b1width, b1height);

  fill("black");

  text("B1", b1X + b1width / 3, b1Y + b1height / 3);

​

  fill(b2Color);

  rect(b2X, b2Y, b2width, b2height);

  fill("black");

  text("B2", b2X + b2width / 3, b2Y + b2height / 3);

  b2X = b2X - 1;

​

  fill(b3Color);

  rect(b3X, b3Y, b3width, b3height);

  fill("black");

  text("B3", b3X + b3width / 3, b3Y + b3height / 3);

  b3Y = b3Y - 1;

​

  fill(b4Color);

  rect(b4X, b4Y, b4width, b4height);

  fill("black");

  text("B4", b4X + b4width / 3, b4Y + b4height / 3);

  b4X = b4X - 1;

  b4Y = b4Y - 1;

​

  //collision on X-axis with b1 & b2

  if (b2X <= b1X + b1width && b2X + b2width >= b1X) {

    //code for x-collision goes here

    b1Color = "red";

    b2Color = "red";

  }

​

  //collision on Y-axis with b1 & b3

  else if (b3Y <= b1Y + b1height && b3Y + b3height >= b1Y) {

    //code for y-collision goes here

    b1Color = "red";

    b3Color = "red";

  } else {

    //if not true

    b1Color = "white";

    b2Color = "white";

    b3Color = "white";

  }

​

  //collision on X & Y with b1 & b4 *** BEST WAY ****

  if (b4X <= b1X + b1width && b4X + b4width >= b1X &&

      b4Y <= b1Y + b1height && b4Y + b4height >= b1Y) 

  { 

    //code for collision goes here

    b4Color = "yellow";

  } 

  else {

    //if not true

    b4Color = "white";

  }

}

​