# Gryd System Graphic Design

**URL:** <https://discourse.processing.org/t/gryd-system-graphic-design/10457>\
**Category:** Libraries\
**Created:** [April 19, 2019, 12:26pm UTC](https://discourse.processing.org/t/gryd-system-graphic-design/10457 "2019-04-19T12:26:47Z")\
**Posts on this page:** 1\
**Showing post:** 14

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 20, 2019, 1:55pm UTC](https://discourse.processing.org/t/gryd-system-graphic-design/10457/14 "2019-04-20T13:55:07Z")

</div>

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?

```auto
// 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;
}

```

---

_[View the full topic](https://discourse.processing.org/t/gryd-system-graphic-design/10457)._