# Grid Patterns using 2D Array Indexes: i, j

## Diagonal Color Gradients

![](https://github.com/kdoore/cs1335/tree/9e8e8ed05c8db5e0695fd2711a01f24b372e8118/assets/Screenshot%202017-09-24%2008.43.41.png)

## Define variable k to determine color pattern.

In the image above, we see a diagonal color gradient in both the foreground and background colors. The logic associated with this can be seen in the image below. If we define a new variable: `int k = i + j;` , where k is the sum of the i, j index variables, we see that the value of k increases along the grid's diagonal direction. Then we can **use k as a factor to determine the fill color**.

## Color Gradient Logic:

Using the sum of grid indexes for color logic gives us a simple approach to create complex patterns. We can observe a pattern that forms when we consider i,j indexes of each cell: if we add i + j indexes for a cell, then neighboring cells along diagonal lines have equal values of i + j. We can use this relationship to determine fill values for cells, so we can create a gradient fill diagonally across a grid of cells.

```java
      int k= i + j; //i,j are for-loop indexes
      fill( 150 + (k * 10) );  //gradient logic
```

![](https://github.com/kdoore/cs1335/tree/9e8e8ed05c8db5e0695fd2711a01f24b372e8118/assets/Screenshot%202017-09-24%2009.00.41.png)

## Odd-Even Gradient Logic

We can also use this sum variable: `k` for determining odd-even logic. When we use the modulus operator `%`, we focus on the remainder component, so when `k%2` has no remainder `( k%2 == 0 )`, we have a way to implement odd-even logic in our patterns. In the image below, we've combined it with the gradient color fill logic. If we have an *odd* item, then we use a light gray `fill(240)`, otherwise, we use our gradient logic to create our fill.

```java
int k= i + j; //i,j are for-loop indexes
if(k % 2 == 0){
fill( 100 + k *10); //gradient logic
}
else{
fill(240); //light gray
}
```

![](https://github.com/kdoore/cs1335/tree/9e8e8ed05c8db5e0695fd2711a01f24b372e8118/assets/Screenshot%202017-09-24%2009.08.55.png)

## Random Patterning Logic

In the images below, we can see that there are 2 different design units, shape1 has 2 colored vertically-stacked triangles on a dark background, shape 2 is a rotation - so the colored triangles have left/right orientation. By randomly selecting between these units, we have an additional design pattern.

![](https://github.com/kdoore/cs1335/tree/9e8e8ed05c8db5e0695fd2711a01f24b372e8118/assets/Screenshot%202017-09-24%2014.01.11.png) Shape1 ... Shape2

![](https://github.com/kdoore/cs1335/tree/9e8e8ed05c8db5e0695fd2711a01f24b372e8118/assets/Screenshot%202017-09-24%2014.02.04.png)

## Logic for Randomized 2-pattern arrangement:

We can use the Processing random(min,max ) function to simulate random events. We define and initialize a random variable: `rand` that will be assigned a decimal value between 0.0 and 2.0. We determine that if `rand > 1`, then we `vertexPattern1( )`, like a coin flip, roughly half the time we'll have `rand < 1` and instead we'll `vertexPattern2( )`.

## Other Patterns based on i, j index

![](https://github.com/kdoore/cs1335/tree/9e8e8ed05c8db5e0695fd2711a01f24b372e8118/assets/Screenshot%202017-09-27%2019.38.40.png)

## Min( i, j)

The logic for the image above uses the fact that along square shaped sections, like the outer top-row and the left-column both share the feature that the minimum value of the i,j index for each element is 0.

k = min( i, j);

## Max( i, j);

The logic for the image above uses the fact that along square shaped sections, like the outer bottom-row and the right-column both share the feature that the max value of the i,j index for each element is 5. ![](https://github.com/kdoore/cs1335/tree/9e8e8ed05c8db5e0695fd2711a01f24b372e8118/assets/Screenshot%202017-09-27%2019.40.34.png) The [lerpColor( ) function](https://kdoore.gitbooks.io/cs1335/content/lerpcolor-and-map.html) can use a factor like k to determine color for each grid cell.

```java
//Code snippet for random logic to determine which shape is created.
float rand= random(0,2);
if(rand > 1){
vertexPattern1(size, foreground, background);
}
else{
vertexPattern2(size, foreground, background);
}
```

The image below uses logic: color factor k = min( i, j). In addition, there are color gradients on both the foreground and background colors. The primary block unit has been repeated 4 times across adjacent regions, where `scale( scaleX, scaleY)` has been used to create [mirror-images](https://kdoore.gitbooks.io/cs1335/content/transforms-for-position-rotation-scale-of-shapematrix-elements.html) of the basic unit

![](https://github.com/kdoore/cs1335/tree/9e8e8ed05c8db5e0695fd2711a01f24b372e8118/assets/Screenshot%202017-09-27%2019.58.32.png)

![](https://github.com/kdoore/cs1335/tree/9e8e8ed05c8db5e0695fd2711a01f24b372e8118/assets/Screenshot%202017-09-24%2009.08.55.png)


---

# 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/grid-patterns-using-2d-array-indexes-i-j.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.