2d array

Hi There,

I made a horizontal (columns) grid and vertical (rows) grid of different rectangles (10 x 10) Now I want to declare the coördinates of an other individual rectangle on that grid by using an array. ( coördinate[x][y] ) For example, the rectangle can have a x-coördinate on the second of the columns and a y-coördinate on the third of the rows.

Can someone help me with this question

Thanks!

Tagged:

Answers

  • Show your code

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

  • 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

  • edited February 2017

    Also read the tutorial about objects

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

  • 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.
    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;
    }
    
  • 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);
      }
    }
    
  • edited February 2017

    Thank you all!

Sign In or Register to comment.