2d array

Answers

• Chrisir

  February 2017

  Show your code
• jaspervanblokland

  February 2017

  Its still just simple

  void setup() { size(500, 500); }

  void draw() { for (int i = 0; i < width; i = i+width/10-10) { for (int j = 0; j < height; j = j+height/10-10) { rectMode(CENTER); rect(i, j, 20, 20); } } }
• Chrisir

  February 2017 edited February 2017

  before setup()

  Cell[][] grid = new Cell[10][10];
  

  Make the for loops from 0 to <10

  in setup() define all cells with a double for loop and

  grid[i][j] = new Cell(i*width/10-10, j*height/10-10);
  

  and in draw say in a double for loop:

  grid[i][j].display();
  

  Also make a class Cell
• Chrisir

  February 2017 edited February 2017

  Also read the tutorial about objects

  https://www.processing.org/tutorials/objects/
• jeremydouglass

  February 2017 edited February 2017 Answer ✓

  @jaspervanblokland -- Here are different approaches:

  1. define an array of coordinates and use it to look up translated coordinates before calling rect()
  2. create a 2d array of objects, each with a display() method, as per @Chrisir
  3. use scale(x,y) to scale your drawing space directly, then use rect() as normal.
     • https://processing.org/reference/scale_.html
  4. create global units of grid measurement (e.g. wStep, hStep) and use them as multipliers when drawing your grid points or mapping things to that grid.

  Your title suggests the first approach; here is an example of the last approach based on what you did in your short example sketch:

  float wStep;
  float hStep;
  
  void setup() { 
    size(500, 500);
    // define the grid in units
    wStep = width/10;
    hStep = height/10;
  }
  
  void draw() { 
    background(192);
  
    // draw grid
    pushStyle();
    rectMode(CENTER); 
    for (int j = 0; j < height+hStep; j = j+(int)hStep) { 
      for (int i = 0; i < width+wStep; i = i+(int)wStep) { 
        rect(i, j, 10, 10);
      }
    }
    popStyle();
  
    // draw a grid 3x2 rectangle at grid 1,1
    gridRect(1,1,3,2);
  
  }
  
  void gridRect(float x, float y, float w, float h){
    rect(x*wStep,y*hStep,w*wStep,h*hStep);
  }
  
  // adjust the grid units by clicking mouse
  // somewhere in the upper left corner
  void mouseReleased(){
    wStep = mouseX;
    hStep = mouseY;
  }
  
• Chrisir

  February 2017 Answer ✓

  my objects based approach from above:

  Cell[][] grid = new Cell[10][10];
  
  void setup() { 
    size(500, 500);
  
    for (int i = 0; i < 10; i++) { 
      for (int j = 0; j < 10; j++) {
        grid[i][j] = new Cell(i*width/10+15, j*height/10+15);
      }
    }
  
    grid[2][4].colorCell = color(255, 2, 2); //red
  }
  
  void draw() { 
    for (int i = 0; i < 10; i++) { 
      for (int j = 0; j < 10; j++) {
        grid[i][j].display();
      }
    }
  }
  
  class Cell {
  
    float x, y; 
    color colorCell = color(255); // white  
  
    Cell(float xTemp, float yTemp) {
      x=xTemp; 
      y=yTemp;
    } // Constr 
  
    void display() {
      rectMode(CENTER);
      fill(colorCell); 
      rect(x, y, 20, 20);
    }
  }
  
• jaspervanblokland

  February 2017 edited February 2017

  Thank you all!