# PShapes in Grid Regions

In the previous section we created a function: displayShapes, to take a 1 Dimensional array of PShapes, the cellSize and the number of rows and columns in our canvas.

```
displayShapes( PShape[] shapes, float cellSize,  int rows, int cols)
```

## Select Grid Regions - to define patterns

As we look to increase the complexity of our design, one approach would be to add logic to our nested for-loops to identify regions in each grid, where we could selectively display some portion of shapes in one of our shapes lists.

The image below shows a grid, with the (i,j) indexes for drawn in each cell. The yellow section represents a region that we'd like to add items to.

We can define this region as having index values: `( i < 3 && j < 3 )`

![](/files/-M0-Ke4ekkJFaExUAHvz)

We could use logic like this to define what shapes are drawn within a region. The logic is defined within the nested for-loops:

`if( i < rows/2 && j < cols/2){ //draw region1 shapes }`

## Grid Logic - Select Grid Region based on i,j index values:

In the code below, we add logic within the nested for-loops to select cells within a region. This will get to be complex if we try to add design logic using this approach.

```java
void drawGrid(int rows, int cols, int size ){
   int xPos = 0;
   int yPos =0;
  for(int i=0;i< rows; i++){
    for( int j=0; j< cols; j++){
      if( i < rows/2 && j< cols/2){  //logic for region1
          fill(40,255,255); //yellow
          rect( xPos, yPos, size, size); //draw a yellow square for each cell in  region1
          drawLines( xPos, yPos, i, j, size);
      }
      drawLines( xPos, yPos, i, j, size);
      xPos += size;
    } //end inner for-loop: j
    xPos=0;
    yPos += size;
  } //end outer for-loop: i
 } //end drawGrid

 //function to draw cell boundries and i,j values
 void drawLines( int xPos,int yPos, int i, int j, int size){
   line( xPos, yPos, xPos+size, yPos); //horizontal lines
      line( xPos, yPos, xPos, yPos+size);
      textSize(14);
      textAlign(CENTER);
      fill(0);
      text( "( " + i  +", " + j + " )", xPos+(size/2) , yPos + (size/2));
}
```

## Design Based on Grid Regions

We can see that the design below is more interesting than those previously shown. So how can we create this type of pattern where the overall design shows 4 different regions of patterns?

![](/files/-M0-KdHpkIPS6YJR8nrh)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://kdoore.gitbook.io/cs1335/grid-based-designs/pshapes-in-grid-regions.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.