Clicking on and moving rotated shapes

p5.js Coding Questions
1

Hello. I have made the following sketch which draws rod shapes using a class at random angles on the canvas. I want the rods to change color when the mouse is rolled over and when the mouse is pressed inside the rods I want them to change color again and be dragged around the canvas. I have used transform() and rotate() to draw the rods at random angles. The sketch partially works but the problem I have is that when the rods are rotated the mouse rollover and mouse pressed only recognise where the rods would have been before being rotated. Does anyone know if there is a way of getting this to work so that the rollover and mouse pressed features work when clicking in the rotated shapes.

let rods = [];

function setup() {
  createCanvas(800, 600);
  for (let i = 0; i < 10; i++) {
    rods[i] = new Rod(random(105, width - 120), random(105, height - 210), random(20, 50), random(30, 80), random(360));
  }
}

function draw() {
  background(150, 150, 255);
  for (let i = 0; i < rods.length; i++) {

    rods[i].contains(mouseX, mouseY);
    rods[i].update(mouseX, mouseY);
    rods[i].show();
  }
}

function mousePressed() {
  for (let i = 0; i < rods.length; i++) {
    rods[i].pressed(mouseX, mouseY);
  }
}

function mouseReleased() {
  for (let i = 0; i < rods.length; i++) {
    rods[i].released(mouseX, mouseY);
  }
}

class Rod {
  constructor(x, y, p, q, angle) {
    this.dragging = false; //is rod being dragged?
    this.rollover = false; //is mouse over the rod? 
    this.x = x;
    this.y = y;
    this.p = p;
    this.q = q;
    this.offsetX = 0
    this.offsetY = 0
    this.angle = angle;
    }

  contains(x, y) {
    //Is mouse over rod?
    if (x > this.x - 7.5 && x < this.x + 7.5 && y > this.y - this.p / 2 && y < this.y + this.p / 2 + this.q) {
      console.log("mouse is in rod");
      this.rollover = true;
    } else {
      this.rollover = false;
    }
  }

  update(x, y) {
    //Adjust location if being dragged
    if (this.dragging) {
      this.x = x + this.offsetX;
      this.y = y + this.offsetY;
    }
  }

  show() {
    //Different fill based on state
    if (this.dragging) {
      fill(50);
    } else if (this.rollover) {
      fill(150);
    } else {
      fill(255);
    }
    push();
    translate(this.x, this.y);
    angleMode(DEGREES);
    rotate(this.angle);
    rectMode(CENTER);
    rect(0, 0, 15, this.p, 5);
    rect(0, 0 + this.p / 2 + this.q / 2, 15, this.q, 5);
    pop();
  }

  pressed(x, y) {
    //Did I click on the rod?
    if (x > this.x - 7.5 && x < this.x + 7.5 && y > this.y - this.p / 2 && y < this.y + this.p / 2 + this.q) {
      console.log("clicked on rod");
      this.dragging = true;
      //If so, keep track of relative location of click to corner of rod
      this.offsetX = this.x - mouseX;
      this.offsetY = this.y - mouseY;
    }
  }

  released() {
    //Quit dragging
    this.dragging = false;
  }
}