How to make bitmap editor (plot a family tree)

p5.js Project Guidance
6

A second variation uses a Rect class and toggles fill color of selected rectangle, shouldn’t be too difficult to port to p5.js:

Rect[] r;

final int _numCols = 70;
final int _numRows = 60;

final int _wndW = 700;
final int _wndH = 600;

class Rect {
 int x,y,w,h;
 boolean isSelected = false;
 
 // Constructor
 Rect(int xpos, int ypos, int wide, int ht) {
   x = xpos;
   y = ypos;
   w = wide;
   h = ht;
 }
  
 void display() {
  rect(x,y,w,h);
 }
}

 void rectGrid(int left, int top, int w, int h, int vg, int hg) {
   int id = 0;
  for(int k = 0; k < _numRows; k++) {
   for(int j = 0; j < _numCols; j++){
     int x = left + j*(w+vg);
     int y = top + k*(h+hg);
     r[id] = new Rect(x,y,w,h);
     id++;
   }
  }
 }
 
void setup() {
 size(_wndW,_wndH);
 r = new Rect[_numRows*_numCols];
 rectGrid(0, 0, 10, 10, 0, 0);
}

void draw() {
 for (int i = 0; i < r.length; i++) {
   if(r[i].isSelected){
     fill(0);
   } else {
     fill(255);
   }
   r[i].display(); // Display each object  
 }
}

void mousePressed(){
 for (int i = 0; i < r.length; i++) {
  if ((mouseX >= r[i].x) && (mouseX <= r[i].x +r[i].w) && (mouseY >= r[i].y) && (mouseY <= r[i].y + r[i].h)) {
    println("id =",i);
    if (r[i].isSelected){
      r[i].isSelected = false;
    } else {
      r[i].isSelected = true;
    }
  }
 }
}
2 Likes