Click event on rect object

Answers

• UsamaRehan

  December 2017

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

  December 2017 edited December 2017

  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;
    }
  }