# Appending more than one color to an array loop of colors

**URL:** <https://discourse.processing.org/t/appending-more-than-one-color-to-an-array-loop-of-colors/20490>\
**Category:** Coding Questions\
**Created:** [May 5, 2020, 1:44am UTC](https://discourse.processing.org/t/appending-more-than-one-color-to-an-array-loop-of-colors/20490 "2020-05-05T01:44:14Z")\
**Posts on this page:** 8\
**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:** [May 5, 2020, 1:44am UTC](https://discourse.processing.org/t/appending-more-than-one-color-to-an-array-loop-of-colors/20490/1 "2020-05-05T01:44:14Z")

</div>

I want to append black and white to an array of lerped colors. **Works okay when I append the first color, but not when I append the second color.** What am I doing wrong?

```auto
// MAIN -----------------------------

Cell [] cells = new Cell[9];

void setup() {
  size (400, 600);
  color [] shuffledInventory = getColorListShuffled();

  int x = 0, y = x;
  int w = width, h = height/cells.length;

  for (int i = 0; i < cells.length; i++) {
    cells[i] = new Cell (x, y+i*h, w, h, shuffledInventory[i]);
  }
}
void draw() {
  background (51);

  for (int i = 0; i < cells.length; i++) {
    cells[i].display();
  }
}

color [] getColorListShuffled() {

  color from = color (random(255), random(255), random(255));
  color to = color (random(255), random(255), random(255));
  float step = 1.0f / (cells.length -2); // *** when I append second color I change to cells.length -3 
  IntList inventory_1 = new IntList (cells.length);

  for (int k = 0; k < cells.length; k++) {
    inventory_1.set (k, lerpColor (from, to, k*step));
    inventory_1.append (color (255));
    //inventory_1.append (color (0)); *** does not work when I add second color
  }
  inventory_1.shuffle();
  return inventory_1.array();
}
// CLASS ----------------------------------------------

class Cell {
  float x, y, w, h;
  color clr;
  
  Cell (float tempX, float tempY, float tempW, float tempH, color tempClr){
    
    x = tempX;
    y = tempY;
    w = tempW;
    h = tempH;
    clr = tempClr;
  }
  
  void display(){
    noStroke ();
    fill (clr);
    rect (x, y, w, h);
  }
}

```

---

<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:** [May 5, 2020, 1:47am UTC](https://discourse.processing.org/t/appending-more-than-one-color-to-an-array-loop-of-colors/20490/2 "2020-05-05T01:47:57Z")

</div>

```auto
color [] getColorListShuffled() {

  color from = color (random(255), random(255), random(255));
  color to = color (random(255), random(255), random(255));
  float step = 1.0f / (cells.length -2); // *** when I append second color I change to cells.length -3 
  IntList inventory_1 = new IntList (cells.length);

  for (int k = 0; k < cells.length; k++) {
    inventory_1.set (k, lerpColor (from, to, k*step));
    inventory_1.append (color (255));
    //inventory_1.append (color (0)); *** does not work when I add second color
  }
  inventory_1.shuffle();
  return inventory_1.array();
}

```

Just my guess, but it looks like you are reinitializing the array every time. Therefore you can only ever add one item.

```auto
IntList inventory_1 = new IntList (cells.length);

```

try placing that line of code somewhere outside of the loop.

---

<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:** [May 5, 2020, 1:51am UTC](https://discourse.processing.org/t/appending-more-than-one-color-to-an-array-loop-of-colors/20490/3 "2020-05-05T01:51:52Z")

</div>

Hello @paulgoux ,  
I’m not sure what you mean by reinitializing the array every time.  
Isn’t it already outside of the for loop?

---

<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:** [May 5, 2020, 1:59am UTC](https://discourse.processing.org/t/appending-more-than-one-color-to-an-array-loop-of-colors/20490/4 "2020-05-05T01:59:51Z")

</div>

everytyime you call the `getColorListShuffled()` function you initialize the array `IntList inventory_1 = new IntList (cells.length);`. Meaning it cannot ever be bigger than one.

Even if its not called inside a loop, its called inside a function which is told to reset it everytime.

---

<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:** [May 5, 2020, 2:06am UTC](https://discourse.processing.org/t/appending-more-than-one-color-to-an-array-loop-of-colors/20490/5 "2020-05-05T02:06:58Z")

</div>

Does that mean I would need to add the second color outside the **getColorListShuffled()** function?

---

<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:** [May 5, 2020, 2:27am UTC](https://discourse.processing.org/t/appending-more-than-one-color-to-an-array-loop-of-colors/20490/7 "2020-05-05T02:27:56Z")

</div>

Ok so I slightly misunderstood, the nature of intList there I thought it worked exactly like an arrayList.

Cannot say why this won’t allow you to append twice, however could you use the following approach

```auto
for (int k = 0; k < cells.length*2; k++) {
    //inventory_1.set (k, lerpColor (from, to, k*step));
    if(k&2==0)inventory_1.append (lerpColor (from, to, k*step));
    else inventory_1.append (color (255));
    //inventory_1.append (color (0)); *** does not work when I add second color
  }

```

I might be misunderstanding what you are trying to achieve though.

Final check

```auto
Cell [] cells = new Cell[9];
IntList inventory_1;
void setup() {
  size (400, 600);
  color [] shuffledInventory = getColorListShuffled();

  int x = 0, y = x;
  int w = width, h = height/cells.length;

  for (int i = 0; i < cells.length; i++) {
    cells[i] = new Cell (x, y+i*h, w, h, shuffledInventory[i]);
  }
}
void draw() {
  background (51);

  for (int i = 0; i < cells.length; i++) {
    cells[i].display();
  }
  fill(0);
  text(inventory_1.size(),100,100);
}

color [] getColorListShuffled() {

  color from = color (random(255), random(255), random(255));
  color to = color (random(255), random(255), random(255));
  float step = 1.0f / (cells.length -2); // *** when I append second color I change to cells.length -3 
   inventory_1 = new IntList (0);

  for (int k = 0; k < cells.length; k++) {
    inventory_1.set (k, lerpColor (from, to, k*step));
    //inventory_1.append (lerpColor (from, to, k*step));
    inventory_1.append (color (255));
    inventory_1.append (color (0)); 
    inventory_1.append (color (0)); 
    //*** does not work when I add second color
  }
  inventory_1.shuffle();
  return inventory_1.array();
}
// CLASS ----------------------------------------------

class Cell {
  float x, y, w, h;
  color clr;
  
  Cell (float tempX, float tempY, float tempW, float tempH, color tempClr){
    
    x = tempX;
    y = tempY;
    w = tempW;
    h = tempH;
    clr = tempClr;
  }
  
  void display(){
    noStroke ();
    fill (clr);
    rect (x, y, w, h);
  }
}

```

This is what I get with three append cycles. The size of the `list.size()` is 3\* bigger than `cell.length` - 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:** [May 5, 2020, 2:40am UTC](https://discourse.processing.org/t/appending-more-than-one-color-to-an-array-loop-of-colors/20490/8 "2020-05-05T02:40:25Z")

</div>

Getting an error message with this **"The operator & is undefined for the argument type(s) int, boolean.**

Also in first line:

> [@paulgoux](#):
>
> `for (int k = 0; k < cells.length*2; k++) {`

If I am understanding correctly, doesn’t that double the array length? Whereas I just want to add 2 colors…  
🤔

---

<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:** [May 5, 2020, 5:37am UTC](https://discourse.processing.org/t/appending-more-than-one-color-to-an-array-loop-of-colors/20490/9 "2020-05-05T05:37:35Z")

</div>

Finally got this to work. Posting solution in case anyone else may be seeking how to add specific color(s) to a color array generated with a for loop, and then randomly shuffle.  
And thank you @paulgoux!, your suggestions did help me think about this with fresh eyes. 🙂

```auto
color [] getColorListShuffled() {

  color from = color (random(255), random(255), random(255));
  color to = color (random(255), random(255), random(255));
  float step = 1.0f / (cells.length-2);
  IntList inventory_1 = new IntList (cells.length);

  for (int k = 0; k < cells.length-2; k++) {
    inventory_1.set (k, lerpColor (from, to, k*step));
    
  }
  inventory_1.append(#000000); // add black to the array
  inventory_1.append(#ffffff); // add white to the array
  inventory_1.shuffle(); // all colors shuffled
  

  return inventory_1.array();
}

```