# Applying Specific Colors to Grid Array

**URL:** <https://discourse.processing.org/t/applying-specific-colors-to-grid-array/25852>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [December 1, 2020, 5:58am UTC](https://discourse.processing.org/t/applying-specific-colors-to-grid-array/25852 "2020-12-01T05:58:28Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![NeatCoder47](https://avatars.discourse-cdn.com/v4/letter/n/d78d45/32.png) [@NeatCoder47](https://discourse.processing.org/u/NeatCoder47)\
**Post date:** [December 1, 2020, 5:58am UTC](https://discourse.processing.org/t/applying-specific-colors-to-grid-array/25852/1 "2020-12-01T05:58:28Z")

</div>

Hi! I’m brand new to coding with P5JS and I need some help. I’m currently taking a class for it and I’ve been watching a bunch of The Coding Train videos. For my specific project I’m trying to implement 30 unique colors into a grid array. From class/watching videos I have learned how to apply random colors to a group of grid squares, but not how to apply a specific color to an individual one. I don’t need help with all of the squares, but if someone can help with a few squares I should hopefully be able to do the rest.

For an example, let’s say I want the color (255, 0, 0) in grid square (2,4), the color (0, 255, 0) in grid square (5,1), and the color (0, 0, 255) in grid square (3,6).

I have the grid set up-

Here’s the section of my code:

var cols = 5;  
var rows = 6;

function setup(){  
createCanvas(750,1125,WEBGL);  
}

function draw(){  
background (0);

```
translate(-width/2,-height/2);
for (var i= 0; i < cols; i++) {
	for (var j = 0; j < rows; j++) {
		var x = i * 150;
		var y = j * 187.5;
		stroke(0)
		fill(255);
		rect(x, y, 150, 187.5);
	}
}
```

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [December 1, 2020, 6:31am UTC](https://discourse.processing.org/t/applying-specific-colors-to-grid-array/25852/2 "2020-12-01T06:31:07Z")

</div>

Welcome @NeatCoder47

If you want to specify the colors for each cell in the grid, you could draw it from an array:

```javascript
var colors = [
  // col 0 col 1 col 2
  ['#FF0000', '#00FF00', '#0000FF'], // row 0
  ['#FFFF00', '#00FFFF', '#FFFFFF'] // row 1
]

function setup(){
  createCanvas(300, 200);
}

function draw(){
  for (var row = 0; row < colors.length; row ++) {
    print(colors[row]); // print a row of color values
  }
}

```

You can modify the `for` loop to draw the grid arrangement you’re after.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 1, 2020, 11:00am UTC](https://discourse.processing.org/t/applying-specific-colors-to-grid-array/25852/3 "2020-12-01T11:00:23Z")

</div>

Hello,

Take a look at this:

_[https://processing.org/tutorials/pixels/](https://processing.org/tutorials/pixels/)_

In the section _Pixels, pixels, and more pixels_ there are some good examples that you can **adapt** to your project.

There me be something similar in the P5.js resources.

`:)`

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [December 1, 2020, 11:11am UTC](https://discourse.processing.org/t/applying-specific-colors-to-grid-array/25852/4 "2020-12-01T11:11:26Z")

</div>

Expanding from @tabreturn in setup you could iterate through a color array and set the colors randomly, or use conditional statements to choose the colors for the required cell, then in draw itterate through all cells and use the corresponding color from the color array.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 1, 2020, 11:18am UTC](https://discourse.processing.org/t/applying-specific-colors-to-grid-array/25852/5 "2020-12-01T11:18:54Z")

</div>

> [@NeatCoder47](#):
>
> , but not how to apply a specific color to an individual one.

[Array of Colors - Processing 2.x and 3.x Forum](http://Forum.Processing.org/two/discussion/17621/array-of-colors#Item_1)

https://www.openprocessing.org/sketch/602737/embed/