# 2D Arrays with lerpColor

The example code below shows how we can use the i, j indexes of a for-loop to create and display a grid color gradient using: lerpColor( ) and map( ). In each 2D array element, we're simply storing the value that we calculate for k, each time the inner for-loop code is executed, using the loop index variables: int k = i + j;

## Diagonal Patterns using k

We can notice that the values of k in the grid forms 2 patterns:

* Pattern1: k values across diagonal lines (from lower-left to upper-right) have the same value for k. We can use k to determine color, where each item along a diagonal will have the same color.  
* Pattern 2: k increases along diagonal (from upper-left to lower-right) k ranges from min value of: `k = 0`, to max value: `k = rows+cols-2`. We can use this information to create a color gradient along that diagonal, since lerpColor can calculate a color gradient based on a linear mapping between 2 colors.  

## Example Code

```java
  //the following code is in the Procesing Setup function
  //colorMode(HSB, 360, 100,100); //corresponds to the color selector

  void setup(){
  size(600, 600);
  colorMode(HSB, 360, 100, 100);
  int rows = 6;
  int cols = 6;
  int cellSize = width/cols;
  int[][] intMatrix = new int[rows][cols];//2D array of ints
  int xPos=0; //variables to control where rectangle is drawn
  int yPos = 0;
  color c1=color(157, 83, 56); //gradient color1
  color c2 = color(258, 66, 96); //gradient color2

  //nested for loops to calculate color gradient
  //and to draw shape in grid-layout
  for( int i=0; i< rows; i++){  //outer loop
    for( int j=0; j< cols; j++){ //inner loop
         int k = i + j; //calculate k using i,j index values
         intMatrix[i][j]= k;

         //calculate color and set fill
         float kFraction = map( k, 0, (rows-1) + (cols-1),0.0, 1.0);
         color c3 = lerpColor(c1, c2, kFraction);
         fill( c3 ); ///use map? max of k is 10

         //draw shape
         rect(xPos, yPos, cellSize, cellSize);

         //move to next column's x Position
         xPos += cellSize; //increment for drawing the next column
    } //end of inner loop (cols)
    yPos +=cellSize; //move yPos for drawing next row
    xPos = 0;
  } //end of outer loop (rows)
```

## Grid Gradient using lerpColor( ) and map( )

The image below shows i, j values and the corresponding lerpColor fractional amount that was calculated using the map function in the code above.

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


---

# 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/project-2/2d-arrays-with-lerpcolor.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.