var rollover = false; 

​

var gx, gy, gw, gh;          

var offsetX, offsetY;    

​

function setup() {

  createCanvas(600, 400);

  //purple galaxy

  gx = 500;

  gy = 100;

  gw = 40;

  gh = 40;

}

​

function draw() {

  background(255);

  // Is mouse over object

  if (mouseX > (gx-20) && mouseX < (gx+gw-20) && mouseY > (gy-30) && mouseY <(gy + gh-10)) {

    rollover = true;

  } 

  else {

    rollover = false;

  }

  // Adjust location if being dragged

  if (dragging) {

    gx = mouseX + offsetX;

    gy = mouseY + offsetY;

  }

​

  noStroke();

  // Different fill based on state

  if (dragging) {

    fill ("magenta");

  } else if (rollover) {

    fill("purple");

  } else {

    fill("magenta");

  }

  ellipse(gx, gy, gw, gh);

}

​

// function mousePressed() {

//   // Did I click on the rectangle?

//   if (mouseX > (gx-20) && mouseX < (gx+gw-20) && mouseY > (gy-30) && mouseY < (gy + gh-10)) {

//     dragging = true;

//     // If so, keep track of relative location of click to corner of rectangle

//     offsetX = gx-mouseX;

//     offsetY = gy-mouseY;

//   }

// }

​

// function mouseReleased() {

//   // Quit dragging

//   dragging = false;

// }