Gryd System Graphic Design

Processing Libraries
14

wow, yes, that is a nice project.

not sure that is of any help, but i have a
grid array of class version,

  • and can move, resize
  • and ( you might need later ) each rectangle can be selected/un-selected
    ( that is what the class was for )
  • but you see only if fill is ON key [f]
  • can show numbers key [n]

possibly makes the start easier?

// https://discourse.processing.org/t/scalable-grid-with-rectangles/7256
// https://discourse.processing.org/t/better-grid-performance/7314
// https://discourse.processing.org/t/gryd-system-graphic-design/10457

// use backup memory array for resize/reinit grid but remember selected rects

int x = 12, y = x, w = 50, h = w, grid = 10, many = grid*grid;
boolean auto = false;//false;//true;
boolean shownum    = false;    // key [n]
boolean showstroke = true; 
boolean showFPS    = true;
boolean togfill    = true;

// color setup:
color bg  = color(200, 200, 0);
color stk = color(0, 0, 200);
color fillsel = color(0, 200, 0);
color fillnsel= color(200, 0, 200);

Myrect[]   myrects   = new Myrect[many];
Mybackup[] myselects = new Mybackup[many];  // temporary memory

void setup() {
  size(800, 520);
  noSmooth();
  set_grid(true);     // init
  println("use: mouse LEFT to select, mouse RIGHT to deselect");
  println("key UP DOWN RIGHT LEFT for position");
  println("key +  -  for grid size");
  println("key n toggle shownumber");
  println("key f toggle fill");
}

void draw() {
  background(bg);
  fill(0);
  if (showFPS ) text(nf(frameRate, 1, 1), 10, 10);
  for (int i = 0; i < many; i++) myrects[i].drawit();               // draw each rect ( and check on mouse over + click )
}

class Mybackup {
  boolean selected=false;
}

class Myrect {
  int x, y, id;//, w, h; from global
  boolean selected=false;
  Myrect (int x, int y, int id) {
    this.x = x; 
    this.y = y;
    this.id = id;
  }
  void drawit() {
    if ( showstroke ) stroke(stk); 
    else noStroke();
    if ( selected ) fill(fillsel);
    else            fill(fillnsel);
    if ( togfill )   noFill();
    rect(x, y, w, h);
    fill(0);   // black text
    if (shownum) text(id, x+w/4, y+h/3);
    sel();
  }
  boolean over() {
    return( x < mouseX && mouseX < x+w && y < mouseY && mouseY < y+h );
  }
  void sel() {
    if ( over() ) {
      if (  selected && mousePressed && mouseButton == RIGHT) selected=false;
      if ( !selected && mousePressed && mouseButton == LEFT)  selected=true;
    }
  }
}

void set_wh() {
  // use x,y,grid as master and auto adjust rectangles (w,h) to window:
  println(" width= "+width+", height= "+height+", grid= "+grid);
  w = ( width  - 2 * x ) / grid;   
  println(" w= "+w+", x= "+x+", ( grid * w + 2 * x )= "+(grid*w+2*x));
  h = ( height - 2 * y ) / grid;
  println(" h= "+h+", y= "+y+", ( grid * h + 2 * y )= "+(grid*h+2*y));
}

void set_grid(boolean init) {
  if ( auto ) set_wh();
  if ( init )  for (int i = 0; i < many; i++)  myselects[i]=new Mybackup();                     // init backup memory
  else         for (int i = 0; i < many; i++)  myselects[i].selected = myrects[i].selected;     // backup
  for (int i = 0; i < many; i++)  myrects[i]=new Myrect(x+(i%grid)*w, y+(floor(i/grid))*h, i);  // resize
  if ( !init ) for (int i = 0; i < many; i++)  myrects[i].selected = myselects[i].selected;     // restore
}

void keyPressed() {
  if      ( keyCode == UP )    y--;
  else if ( keyCode == DOWN )  y++;
  else if ( keyCode == LEFT )  x--;
  else if ( keyCode == RIGHT ) x++;
  else if ( key     == '+' )   w++;
  else if ( key     == '-' )   w--;
  h=w;              // quadrat only
  auto = false;     // confirm
  set_grid(false);  // resize
  if ( key == 'n' ) shownum = !shownum;
  if ( key == 'f' ) togfill = !togfill;
}
2 Likes