# Position loop with specific colors

**URL:** https://discourse.processing.org/t/position-loop-with-specific-colors/34935
**Category:** Coding Questions
**Created:** [February 1, 2022, 5:58pm UTC](https://discourse.processing.org/t/position-loop-with-specific-colors/34935 "2022-02-01T17:58:50Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)
#### Post date: [February 1, 2022, 5:58pm UTC](https://discourse.processing.org/t/position-loop-with-specific-colors/34935/1 "2022-02-01T17:58:50Z")

</div>

Hi there! I have a loop with 5 quads on random positions and I want to assign a specific color to every quad. How could I control that? Thanks!

```auto
void setup() {
  size(1000, 1000);
  background(255);
  
  for(int j=0; j<5;j++){
  if (j>0.2) {
      fill(0,0,128,130);
      }
      else if (j>0.2){
      fill(64,224,208,130);
      }
      else if (j>0.2){
      fill(255,20,147, 130);
      }
      else if (j>0.2){
      fill(128,0,128,130);
      }   
      else{
      fill(255,255,224,130);
      }
  noStroke();
  drawQuad(random(width), random(height),600);
  }

    
  
}

void drawQuad(float cx, float cy, float av_r) {
  PVector[] pts = new PVector[4];
  
  for (int i = 0; i < 4; i++) {
    float angle = random(i * HALF_PI, (i + 1) * HALF_PI);
    float r = random(0.5 * av_r, 1.5 * av_r);
    float x = cx + r * cos(angle);
    float y = cy + r * sin(angle);
    pts[i] = new PVector(x, y);
  }
  
  quad(pts[0].x, pts[0].y, pts[1].x, pts[1].y, pts[2].x, pts[2].y,pts[3].x, pts[3].y);
}

```

---

<div class="post-metadata">

### Author: ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)
#### Post date: [February 1, 2022, 7:07pm UTC](https://discourse.processing.org/t/position-loop-with-specific-colors/34935/2 "2022-02-01T19:07:24Z")

</div>

Hi,  
firstly, some ‘literature’

> **[Reference](https://processing.org/reference/Array.html)**
>
> An array is a list of data. It is possible to have an array of any type of data. Each piece of data in an array is identified by an index number representing its position in the array. The first eleme…

> **[Reference](https://processing.org/reference/color_datatype.html)**
>
> Datatype for storing color values. Colors may be assigned with get() and color() or they may be specified directly using hexadecimal notation such as #FFCC00 or 0xFFFFCC00.…

> **[Reference](https://processing.org/reference/else.html)**
>
> Extends the if structure allowing the program to choose between two or more blocks of code. It specifies a block of code to execute when the expression in if is false.

You could do something like create a color array, size 5 and use

```auto
fill( array[j] );
drawQuad(1,2,3);

```

Now to fix your problem.  
You are using IF / ELSE statements in a strange way.  
Essentially, what you are checking is

- is j \> 0.2?
  - If it is, fill with color 1
  - If it isn’t, check if it is greater than 0.2, which is the same as the first Statement and yields same the same results.

So what could you do to change that?

Well you could check the value with == operator

> **[Reference](https://processing.org/reference/equality.html)**
>
> Determines if two values are equivalent. Please note the equality operator (==) is different from the assignment operator (=) and although they look similar, they have a different use. If you're compa…

So you could do this:

```auto
int x = 6;

if (x == 0) {
   //code inside the { } runs IF x = 0
}
if(x == 1) {
  //runs if x = 1
}
//and so on.

```

But since you are not changing the value of X and only want to choose exactly one outcome, you can use ELSE statements, to make the code run faster and just follow good practise.

So the new code would look like

```auto
int x = 5;
if(x == 0) {
  //run if x==0
} else if(x == 1) {
  //run if x == 1
} else if(x == 2) {
  //run if x==2
} //and so on.

```

When any of the IF statements are fulfilled, the code inside the brackets runs and exits the IF-ELSE structure.

A better way to imagine it:

```auto
int x = 123;
if(x % 2 == 0) { 
  //run if X is even
} else {
  //x is odd, since if an INTEGER isn't even, its odd.
  
  if(x%3==0) {
     //runs if X is odd, and divisible by 3
  } else {
     
      if(x % 5==0) {
          //runs if X is odd, is not divisible by 3 and IS divisible by 5
      }
  }
}

```

I hope this clears things up.

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [February 1, 2022, 7:18pm UTC](https://discourse.processing.org/t/position-loop-with-specific-colors/34935/3 "2022-02-01T19:18:52Z")

</div>

> [@CodeMasterX](#):
>
> `fill( array[j] );`

before setup()

```auto
color[] array = {
      color (0,0,128,130), 
      color (64,224,208,130),
      ...
      ....
};

```

---

<div class="post-metadata">

### Author: ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)
#### Post date: [February 1, 2022, 7:49pm UTC](https://discourse.processing.org/t/position-loop-with-specific-colors/34935/4 "2022-02-01T19:49:50Z")

</div>

Thank you so much. But else if Wil not work without the color array, will It?

```auto

void setup() {
  size(1000, 1000);
  background(255);
  
  for(int j=0; j<5;j++){
  int a = 5; 
  if (a==0) {
      fill(0,0,128,130);
      }
      else if (a==1){
      fill(64,224,208,130);
      }
      else if (a==2){
      fill(255,20,147, 130);
      }
      else if (a==3){
      fill(128,0,128,130);
      }   
      else if(a==4){
      fill(255,255,224,130);
      }
  noStroke();
  drawQuad(random(width), random(height),600);
  }

    
  
}

void drawQuad(float cx, float cy, float av_r) {
  PVector[] pts = new PVector[4];
  
  for (int i = 0; i < 4; i++) {
    float angle = random(i * HALF_PI, (i + 1) * HALF_PI);
    float r = random(0.5 * av_r, 1.5 * av_r);
    float x = cx + r * cos(angle);
    float y = cy + r * sin(angle);
    pts[i] = new PVector(x, y);
  }
  
  quad(pts[0].x, pts[0].y, pts[1].x, pts[1].y, pts[2].x, pts[2].y,pts[3].x, pts[3].y);
}

```

---

<div class="post-metadata">

### Author: ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)
#### Post date: [February 1, 2022, 8:01pm UTC](https://discourse.processing.org/t/position-loop-with-specific-colors/34935/5 "2022-02-01T20:01:06Z")

</div>

It will absolutely still work.

The approach with arrays was just another solution for the problem, that is dynamic and requires less code.

I didn’t want to spoil it before but yeah.  
So the solution with the array would be like this:

```auto
color array[] = {#112233,#445566,#778899, color(11,22,33), color(0) };
for(int i = 0; i < 5; i++) {
   fill(array[i]);
   drawQuad(1,2,3);
}

```

Define the array, put in 5 things inside, create a for loop, run it 5 times, each time get a different element of the array.

* * *

An issue I found with your code:

> [@humano](#):
>
> ```auto
> int a = 5; 
> if (a==0) {
> 
> ```

You are always using the value 5. It doesn’t change. Try to use the for loop’s counter ‘j’.  
So what you could do is:

`int a = j;`

or just remove ‘a’ and replace all the if statements with ‘j== [number]’

---

<div class="post-metadata">

### Author: ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)
#### Post date: [February 1, 2022, 8:39pm UTC](https://discourse.processing.org/t/position-loop-with-specific-colors/34935/6 "2022-02-01T20:39:41Z")

</div>

Thank you so much! It was my first time using arrays but now It has worked for this and I think I undestand It!
