Click event on rect object

UsamaRehan — Tue, 26 Dec 2017 16:45:53 +0000

I have a rect object which I draw it as a grid on the canvas and I need to trigger an event when I press on a particular object,I do something.

function allBorders(x,y,w,h){
  this.x = x;
  this.y = y;
  this.w = w;
  this.h = h;

  this.fills = false;
  this.drawBorders = function(){
    push();
    strokeWeight(5);
    stroke(150);
    if(this.fills){
      fill(0,255,0);
    }
    rect(this.x,this.y,this.w,this.h);
    pop();
  }

  this.clickedOnRects = function(x_,y_){

    if( ((x_ >= this.x) && (x_ <= this.w)) && ((y_ >= this.y) && (y_ <= this.h)) ){
      this.fills = true;
    }

  }
}

This is my mousePressed function

function mousePressed(){
  for(let x = 0 ; x < borders.length ; x++){
    borders[x].clickedOnRects(mouseX,mouseY);
  }
}

I do like,when the mouse is pressed then call all the object's clickedOnRects and check whether the mouseX,mouseY is inside the object or not.

These are my array objects.

  borders.push( new allBorders(0,0,width/3,height/4));
  borders.push( new allBorders(width/3,0,width/3,height/4));
  borders.push( new allBorders(width/3*2,0,width/3,height/4));
  borders.push( new allBorders(0,height/4,width/3,height/4));
  borders.push( new allBorders(width/3,height/4,width/3,height/4));
  borders.push( new allBorders(width/3*2,height/4,width/3,height/4));
  borders.push( new allBorders(0,(height/4)*2,width/3,height/4));
  borders.push( new allBorders(width/3,(height/4)*2,width/3,height/4));
  borders.push( new allBorders(width/3*2,(height/4)*2,width/3,height/4));

But the problem is the click function is working only for the first's object and not on the other object. Can someone suggest what is wrong in my code.

Working example

http://alpha.editor.p5js.org/zusamarehan/sketches/B1GpXWlQf

Tagged with _onmousedown() - Processing 2.x and 3.x Forum

Click event on rect object