# Using defined colors from an array

**URL:** <https://discourse.processing.org/t/using-defined-colors-from-an-array/19781>\
**Category:** Beginners\
**Created:** [April 14, 2020, 6:31pm UTC](https://discourse.processing.org/t/using-defined-colors-from-an-array/19781 "2020-04-14T18:31:17Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [April 14, 2020, 6:31pm UTC](https://discourse.processing.org/t/using-defined-colors-from-an-array/19781/1 "2020-04-14T18:31:17Z")

</div>

I am trying to figure out **how to access the 5 grays in the array randomly** to fill() the arc shape and rectangle.

Seems like it should be pretty easy to do but…  
And haven’t been able to find anything in my books or online that has worked yet.  
I’ve commented next to problem areas.

Any hints / guidance most welcome!

```auto
// halfmoon motif
import processing.pdf.*;

boolean record;

color c1 = #FFFFFF;
color c2 = #BEBEBE;
color c3 = #7F7F7F;
color c4 = #3F3F3F;
color c5 = #000000;

color [] grays = {c1, c2, c3, c4, c5};

float deg = 90; // 90 degrees
float rad = radians(deg); // convert to radians

void setup() {
  size(400, 400);
  
// ______________________??? I should somehow initialize the array list here ???
  grays [0] = #FFFFFF; // kind of lost here
  grays [1] = #BEBEBE;
  grays [2] = #7F7F7F;
  grays [3] = #3F3F3F;
  grays [4] = #000000;

  //grays = new color (grays.length);
  //for (int c = 0; c < grays.length; c++)
// ______________________________???
  
frameRate(1);
}

void draw() {
  if (record) {
    beginRecord (PDF, "frame-####.pdf");
  }

  background (127);
  noStroke();

  float r = random(1);
  println (r);

  translate (200, 200);

  if (r < 0.40) {
    rotate (rad);
  } else if (r > 0.40 && r < 0.50) {
    rotate (rad*3);
  } else if (r > 0.50 && r < 0.65) {
    rotate (rad*2);
  } else {
    rotate (rad*4);
  }

  fill (int(random(grays))); // wrong, Would like a random selection from gray array list
  rectMode (CENTER);
  rect (0, 0, 200, 200);

  fill (grays); // wrong, Would like a random selection from gray array list

  arc (0, -100, 200, 200, 0, PI);

  if (record) {
    endRecord();
    record = false;
  }
}

void mousePressed() { // make PDF of current frame
  record = true;
}

```

---

<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:** [April 14, 2020, 6:51pm UTC](https://discourse.processing.org/t/using-defined-colors-from-an-array/19781/2 "2020-04-14T18:51:37Z")

</div>

> [@debxyz](#):
>
> fill (int(random(grays))); // wrong,

fill(grays[int(random(grays.length))]);

---

<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:** [April 14, 2020, 6:53pm UTC](https://discourse.processing.org/t/using-defined-colors-from-an-array/19781/3 "2020-04-14T18:53:47Z")

</div>

Hello,

> [@debxyz](#):
>
> I am trying to figure out **how to access the 5 grays in the array randomly** to fill() the arc shape and rectangle.

An example:

```auto
color c1 = #FFFFFF;
color c2 = #BEBEBE;
color c3 = #7F7F7F;
color c4 = #3F3F3F;
color c5 = #000000;

color [] grays = {c1, c2, c3, c4, c5};

int num = 0;

void setup() 
  {
  size(500, 500);
  }

void draw() 
  {
  //background(0);
  if (frameCount%60 == 0)
    {
    num = int(random(0, 5));
    println(num, hex(grays[num]));
  	}
  fill(grays[num]);
  //println(hex(grays[num]));
  circle(width/2, height/2, 300);
  }

```

`:)`

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [April 14, 2020, 7:34pm UTC](https://discourse.processing.org/t/using-defined-colors-from-an-array/19781/4 "2020-04-14T19:34:34Z")

</div>

I’m going to try both approaches right now.  
Thank you @Chrisir and @glv!!  
Very much appreciated!!  
🤓

---

<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:** [April 14, 2020, 7:46pm UTC](https://discourse.processing.org/t/using-defined-colors-from-an-array/19781/5 "2020-04-14T19:46:50Z")

</div>

> I should somehow initialize the array list here ??? // kind of lost here

there are different ways :

1. 

valid:

before setup() :

`color[] grays = new color [5];`

in setup() :

```auto
  grays [0] = #FFFFFF;         
  grays [1] = #BEBEBE;
  grays [2] = #7F7F7F;
  grays [3] = #3F3F3F;
  grays [4] = #000000;

```

1. 

or like this

```auto
color[] grays = {
  #FFFFFF, 
  #BEBEBE, 
  #7F7F7F, 
  #3F3F3F, 
  #000000
}; 

```

* * *

**Full Code**

```auto

color[] grays = {
  #FFFFFF, 
  #BEBEBE, 
  #7F7F7F, 
  #3F3F3F, 
  #000000
}; 

float deg = 90; // 90 degrees
float rad = radians(deg); // convert to radians

void setup() {
  size(400, 400);
  frameRate(1);
}

void draw() {

  background (127);
  noStroke();

  float r = random(1);
  // println (r);

  translate (200, 200);

  if (r < 0.40) {
    rotate (rad);
  } else if (r > 0.40 && r < 0.50) {
    rotate (rad*3);
  } else if (r > 0.50 && r < 0.65) {
    rotate (rad*2);
  } else {
    rotate (rad*4);
  }

  // Would like a random selection from gray array list
  int index = int(random(grays.length));  
  println(index); 
  fill(grays[index]);

  // rect 
  rectMode (CENTER);
  rect (0, 0, 200, 200);

  arc (0, -100, 200, 200, 0, PI);
}

```

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [April 14, 2020, 7:51pm UTC](https://discourse.processing.org/t/using-defined-colors-from-an-array/19781/6 "2020-04-14T19:51:16Z")

</div>

> [@Chrisir](#):
>
> fill(grays[int(random(grays.length))]);

This works nicely! Thank you again.  
😀

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [April 14, 2020, 7:54pm UTC](https://discourse.processing.org/t/using-defined-colors-from-an-array/19781/7 "2020-04-14T19:54:57Z")

</div>

This works nicely too!  
😀

Quick question:

> [@glv](#):
>
> if (frameCount%60 == 0)

The “60” in this line. Is that chosen because it’s a multiple of 5 referring to the 5 elements in the array?

Or it could be any number? As frameCount%60 == 0 will equal “0” for the first 60 frames therefore,

> [@glv](#):
>
> num = int(random(0, 5));

will generate a random number 60 times?

Just want to make sure I understand what is happening under the hood.

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [April 14, 2020, 7:59pm UTC](https://discourse.processing.org/t/using-defined-colors-from-an-array/19781/8 "2020-04-14T19:59:30Z")

</div>

> [@Chrisir](#):
>
> there are different ways

Good to know. That is part of my challenge. Not knowing which path is best to follow…

---

<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:** [April 14, 2020, 8:15pm UTC](https://discourse.processing.org/t/using-defined-colors-from-an-array/19781/9 "2020-04-14T20:15:46Z")

</div>

> [@glv](#):
>
> if (frameCount%60 == 0) {  
> num = int(random(0, 5));  
> println(num, hex(grays[num]));  
> }

if (frameCount%60 == 0) means:

- only when the modulo (remainder) of a division by 60 is 0, a new random number is produced.

So in frame 60, then 120, and so on.

So, approx. once per second only

---

<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:** [April 14, 2020, 8:16pm UTC](https://discourse.processing.org/t/using-defined-colors-from-an-array/19781/10 "2020-04-14T20:16:30Z")

</div>

> [@Chrisir](#):
>
> fill(grays[int(random(grays.length))]);

identical:

```auto
  // Would like a random selection from gray array list
  int index = int(random(grays.length));  
  println(index); 
  fill(grays[index]);

```

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [April 14, 2020, 8:27pm UTC](https://discourse.processing.org/t/using-defined-colors-from-an-array/19781/11 "2020-04-14T20:27:55Z")

</div>

Ah yes, that makes much more sense regarding the modulo. Thank you!  
🤓

---

<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:** [April 14, 2020, 9:22pm UTC](https://discourse.processing.org/t/using-defined-colors-from-an-array/19781/12 "2020-04-14T21:22:52Z")

</div>

Hello,

> [@debxyz](#):
>
> The “60” in this line.

It is only part of the frameRate counter.

Reference:

> **[% (modulo) / Reference](https://processing.org/reference/modulo.html)**
>
> Calculates the remainder when one number is divided by another. For example, when 52.1 is divided by 10, the divisor (10) goes into the dividend (52.1) five times (5 \* 10 == 50), and there is a remain…

Lots of uses for modulo:  
[Make modulo your friend!](https://community.tableau.com/message/686694#686694) Concepts can be adapted for Processing.

And further on the subject:

> [@Simple ArrayIndex problem](https://discourse.processing.org/t/simple-arrayindex-problem/19434/7):
>
> If you want to iterate over pairs of vertices in a closed shape, you can also use modulo %.

`:)`

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [April 15, 2020, 12:06am UTC](https://discourse.processing.org/t/using-defined-colors-from-an-array/19781/13 "2020-04-15T00:06:22Z")

</div>

> [@glv](#):
>
> Lots of uses for modulo:  
> [Make modulo your friend!](https://community.tableau.com/message/686694#686694) Concepts can be adapted for Processing.

Thanks for this interesting link! Much appreciated. 🙂