cy = 0;

r = 30;      // circle radius

​

sx = 200;    // square position

sy = 100;

sw = 200;    // and dimensions

sh = 200;

​

​

function setup() {

  createCanvas(600,400);

  noStroke();

}

​

​

function draw() {

  background(255);

​

  // update square to mouse coordinates

  cx = mouseX;

  cy = mouseY;

​

  // check for collision

  // if hit, change rectangle color

  var hit = circleRect(cx,cy,r, sx,sy,sw,sh);

  if (hit) {

    fill(255,150,0);

  }

  else {

    fill(0,150,255);

  }

  rect(sx,sy, sw,sh);

​

  // draw the circle

  fill(0, 150);

  ellipse(cx,cy, r*2,r*2);

}

​

​

// CIRCLE/RECTANGLE

function circleRect(cx, cy, radius, rx, ry, rw, rh) {

​

  // temporary variables to set edges for testing

  testX = cx;

  testY = cy;

​

  // which edge is closest?

  if (cx < rx)         testX = rx;      // test left edge

  else if (cx > rx+rw) testX = rx+rw;   // right edge

  if (cy < ry)         testY = ry;      // top edge

  else if (cy > ry+rh) testY = ry+rh;   // bottom edge

​

  // get distance from closest edges

  distX = cx-testX;

  distY = cy-testY;

  distance = sqrt( (distX*distX) + (distY*distY) );

  fill(0, 200);

  ellipse(testX,testY, 8,8);

  text("cx = " + cx, 10, 20)

  text("cy = " + cy, 10, 10)

  text("testX = " + testX, 10, 30)

  text("testY = " + testY, 10, 40)

  // console.log("TestX : " + testX);

  // console.log("TestY : " + testY);

  // console.log("DistX : " + distX);

  // console.log("DistY : " + distY);

  // console.log("Distance : " + distance);

​

  // if the distance is less than the radius, collision!

  if (distance <= radius) {

    return true;

  }

  return false;

}