Click event on rect object

UsamaRehan

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

UsamaRehan

https://stackoverflow.com/questions/47981365/click-event-on-rect-in-p5-js

GoToLoop

https://Bl.ocks.org/GoSubRoutine/78bcd2ae59f6db72d5e6736589d2856b
http://JeffreyThompson.org/collision-detection/point-rect.php

index.html:

<script async src=https://CDN.JSDelivr.net/npm/p5></script>
<script defer src=sketch.js></script>

sketch.js:

/**
 * Toggle Rects (v1.1.2)
 * GoToLoop (2017-Dec-26)
 *
 * Forum.Processing.org/two/discussion/25722/click-event-on-rect-object#Item_2
 *
 * Bl.ocks.org/GoSubRoutine/78bcd2ae59f6db72d5e6736589d2856b
 * Alpha.Editor.p5js.org/zusamarehan/sketches/B1GpXWlQf
 */

"use strict";

const ROWS = 3, COLS = 3, GRID = ROWS*COLS, rects = Array(GRID);

function setup() {
  createCanvas(400, 400).mousePressed(toggleRect);

  rectMode(CORNER).colorMode(RGB).noLoop();
  stroke(Rect.STROKE).strokeWeight(Rect.BOLD);

  createRectGrid(rects);
}

function draw() {
  background(Rect.BG);
  for (const b of rects)  b.display();
}

function toggleRect(evt) {
  _onmousedown(evt); // workaround for mouseButton, mouseX & mouseY!

  evt.preventDefault();
  evt.stopPropagation();

  switch (mouseButton) {
  case RIGHT: // clear all
    for (const b of rects)  b.fills = false;
    return redraw();

  case CENTER: // toggle all
    for (const b of rects)  b.fills ^= true;
    return redraw();

  default: // toggle clicked at
    for (const b of rects)  if (b.isMouseInside()) return redraw(b.fills ^= true);
  }
}

function createRectGrid(arr=Array(GRID)) {
  for (let idx = 0, y = 0; y < ROWS; ++y)  for (let x = 0; x < COLS; ++x, ++idx)
    arr[idx] = new Rect(x*Rect.W, y*Rect.H);
  return arr;
}

class Rect {
  static get BG() {
    delete this.BG;
    return this.BG = color(0);
  }

  static get ON() {
    delete this.ON;
    return this.ON = color('lime');
  }

  static get OFF() {
    delete this.OFF;
    return this.OFF = color(0o340);
  }

  static get STROKE() {
    delete this.STROKE;
    return this.STROKE = color(150);
  }

  static get BOLD() {
    delete this.BOLD;
    return this.BOLD = 5;
  }

  static get W() {
    delete this.W;
    return this.W = width/3 | 0;
  }

  static get H() {
    delete this.H;
    return this.H = height>>2;
  }

  constructor(x=0, y=0) {
    this.x = x, this.y = y, this.fills = false;
  }

  display() {
    const {x, y, fills} = this, {W, H, ON, OFF} = this.constructor;
    fill(fills && ON || OFF).rect(x, y, W, H);
    return this;
  }

  isMouseInside() {
    const {x, y} = this, {W, H} = this.constructor;
    return mouseX >= x && mouseX < x+W && mouseY >= y && mouseY < y+H;
  }
}