# Perhaps another way to shuffle lerped colors in an array?

**URL:** <https://discourse.processing.org/t/perhaps-another-way-to-shuffle-lerped-colors-in-an-array/17597>\
**Category:** Coding Questions\
**Created:** [February 6, 2020, 10:38pm UTC](https://discourse.processing.org/t/perhaps-another-way-to-shuffle-lerped-colors-in-an-array/17597 "2020-02-06T22:38:21Z")\
**Posts on this page:** 20\
**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:** [February 6, 2020, 10:38pm UTC](https://discourse.processing.org/t/perhaps-another-way-to-shuffle-lerped-colors-in-an-array/17597/1 "2020-02-06T22:38:21Z")

</div>

Watching a **D Shiffman tutorial on probability** prompted me to try this.

I want to **shuffle a colorList array of lerped colors**. Search turned up to use **IntList and shuffle**. But in setup for loop I thought to replace  
**k++;**  
with  
**k = int (random (listColors.length));**

**This actually seems to work sometimes. But is inconsistent.**  
I’m curious if anyone knows why this would sometimes indeed shuffle the colors?  
Basically what’s going on under the hood.  
And is there anything I could adjust for a consistent shuffle following this line of thought? Or do I indeed have to use IntList and shuffle?  
///////////////////////

```auto
/* ???How to shuffle lerped colors in an array??? */

int num = 6;
int x = 20, y = x;
int w = 360/num, h = 360;

float step = 1.0f/(num-1); // **must use a float number to return a float number**

Cell [] cells = new Cell [num];

color from = color(random(255), random(255), random(255)); 
color to = color(random(255), random(255), random(255));

color [] listColors = new color [num];

void setup() {
  size (400, 400);

  for (int k = 0; k < listColors.length; k++) { // for loop to generate an array color [] listColors of random colors
    listColors[k] = lerpColor (from, to, k*step);

    println(listColors);
  }

  int k = 0;

  for (int i = 0; i < num; i++) {
    cells[i] = new Cell(x+i*w, y, w, h, listColors[k]);
    k = int (random (listColors.length)); // trying to shuffle the listColors 
                                          // after they have been lerped, 
                                          // this sometimes works but more often not 
  }
}

void draw() {

  background (51);

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

```

//////////////////////////////

```auto
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() {
    
    stroke(255); 
    fill(clr);
    rect(x, y, w, h);
  }
}

```

**Version below uses IntList and shuffle for the solution:** This appears to be working so I guess I have this set up correctly?

```auto
int num = 9;
int x = 20, y = x;
int w = 360/num, h = 360;

float step = 1.0f/(num-1); // **must use a float number to return a float number**

Cell [] cells = new Cell [num];

color from = color(random(255), random(255), random(255)); 
color to = color(random(255), random(255), random(255));

color [] listColors = new color [num];

IntList inventory = new IntList ();

void setup() {
  size (400, 400);

  for (int k = 0; k < listColors.length; k++) { // for loop to generate an array color [] listColors of random colors
    listColors[k] = lerpColor (from, to, k*step);

    println(listColors);
  }

  inventory.append(listColors);
  inventory.shuffle();
  int[] shuffledInventory = inventory.array();
  println(shuffledInventory);

  int k = 0;

  for (int i = 0; i < num; i++) {
    cells[i] = new Cell(x+i*w, y, w, h, shuffledInventory[k]);
    k++;
  }
}

void draw() {

  background (51);

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

```

---

<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 7, 2020, 7:53am UTC](https://discourse.processing.org/t/perhaps-another-way-to-shuffle-lerped-colors-in-an-array/17597/2 "2020-02-07T07:53:34Z")

</div>

> [@debxyz](#):
>
> k = int (random (listColors.length)); // trying to shuffle the listColors

**Remark**

This line should be before the line where you use k. Now this is only important the first time the loop runs.

**To your question**

Now using random here is inconsistent because there is no check which colors are already used. So some could be used three times some only 0 times.

You could pick from a list and shorten it to avoid duplicate colors. So when you use a color remove it from the list and shorten the list.

**Intlist**

But that’s why shuffle an intlist and use its content as an index for the colors array (!) is so elegant. Not fully sure if you understood the idea, can you show us an example?

The index of the Intlist is just incremented by 1 every time; the result of the Intlist at position index is then used for the color list as an index

Chrisir

---

<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:** [February 7, 2020, 4:25pm UTC](https://discourse.processing.org/t/perhaps-another-way-to-shuffle-lerped-colors-in-an-array/17597/3 "2020-02-07T16:25:10Z")

</div>

Hello! Thank you for your clarifications above.

> [@Chrisir](#):
>
> Not fully sure if you understood the idea, can you show us an example?

**Do you mean show the code I used** to implement the shuffle an IntList and use its content idea?  
If so, this is how I used it. **And have commented next to the relevant lines what I think is going on at each step.**  
Am I on track?

//////////////

```auto
/* !!!!!!These lerped colors have been shuffled using *IntList and shuffle* !!!!!!*/

int num = 9;
int x = 20, y = x;
int w = 360/num, h = 360;

float step = 1.0f/(num-1); // **must use a float number to return a float number**

Cell [] cells = new Cell [num];

color from = color(random(255), random(255), random(255)); 
color to = color(random(255), random(255), random(255));

color [] listColors = new color [num];

IntList inventory = new IntList (); // stores the shuffled list of indexes

void setup() {
  size (400, 400);

  for (int k = 0; k < listColors.length; k++) { // for loop to generate an array color [] listColors of random colors
    listColors[k] = lerpColor (from, to, k*step);

    println(listColors);
  }

  inventory.append(listColors); // targets the index of listColors
  inventory.shuffle(); // randomly shuffles the index of listColors
  int[] shuffledInventory = inventory.array(); 
  // directs the shuffled index 
  // as an array to 
  // IntList inventory = new IntList();
  // in variables section above setup()
  println(shuffledInventory);

  int k = 0;

  for (int i = 0; i < num; i++) {
    cells[i] = new Cell(x+i*w, y, w, h, shuffledInventory[k]);
    k++;
  }
}

void draw() {

  background (51);

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

```

////////////////////

```auto
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() {
    
    stroke(255); 
    fill(clr);
    rect(x, y, w, h);
  }
}

```

---

<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 7, 2020, 4:30pm UTC](https://discourse.processing.org/t/perhaps-another-way-to-shuffle-lerped-colors-in-an-array/17597/4 "2020-02-07T16:30:41Z")

</div>

Ah, very elegant… more elegant than my suggestion…

---

<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:** [February 7, 2020, 4:38pm UTC](https://discourse.processing.org/t/perhaps-another-way-to-shuffle-lerped-colors-in-an-array/17597/5 "2020-02-07T16:38:12Z")

</div>

**Second part** of reply to your comment:

Regarding the placement and viability of use:

> [@debxyz](#):
>
> k = int (random (listColors.length)); // trying to shuffle the listColors

I moved that line as you suggested but am not sure if it’s what you meant. And then I would still need to pick from list and shorten?

> [@Chrisir](#):
>
> This line should be before the line where you use k. Now this is only important the first time the loop runs.

Even if I can’t get this to shuffle as desired I think I can apply this thinking to code where I want an inconsistent or unexpected result. 😀

---

<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:** [February 7, 2020, 4:41pm UTC](https://discourse.processing.org/t/perhaps-another-way-to-shuffle-lerped-colors-in-an-array/17597/6 "2020-02-07T16:41:38Z")

</div>

Beginner’s luck…  
🙂

---

<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 7, 2020, 5:04pm UTC](https://discourse.processing.org/t/perhaps-another-way-to-shuffle-lerped-colors-in-an-array/17597/7 "2020-02-07T17:04:49Z")

</div>

> [@debxyz](#):
>
> int shuffledInventory = inventory.array();

Maybe you can say color shuffledInventory = inventory.array();

Then the type is color, so it’s more clear

Also a lot of variables that are before setup () could be inside setup() . It’s better to make the scope of variables as small as possible. So with this we reduce the scope from global to local.

---

<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:** [February 7, 2020, 6:05pm UTC](https://discourse.processing.org/t/perhaps-another-way-to-shuffle-lerped-colors-in-an-array/17597/8 "2020-02-07T18:05:22Z")

</div>

Following your suggestion,  
changed **int[] shuffledInventory = inventory.array();**  
to **color[] shuffledInventory = inventory.array();**  
I like the clarity of that. Previous version felt like a nebulous connection to the listColors.

And moved down:

> [@debxyz](#):
>
> int x = 20, y = x;  
> int w = 360/num, h = 360;  
> float step = 1.0f/(num-1);

into setup.

As you can probably see in my code to date, I haven’t really tackled the global vs local variables topic. But know it’s something I need to become more cognizant of going forward. I do appreciate your pointing that out!!  
And Thank you again!

---

<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 7, 2020, 7:19pm UTC](https://discourse.processing.org/t/perhaps-another-way-to-shuffle-lerped-colors-in-an-array/17597/9 "2020-02-07T19:19:06Z")

</div>

you can simplify

- by using a function that returns the colors

- also by using the inventory directly

- also very short list of global vars / arrays; most are local!

```auto
/* !!!!!!These lerped colors have been shuffled using *IntList and shuffle* !!!!!!*/

// global array 
Cell [] cells = new Cell [9];

void setup() {
  size (400, 400);

  color[] shuffledInventory = getColorListShuffled(); 

  int x = 20, y = x;
  int w = 360/cells.length, h = 360;

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

void draw() {
  background (51);

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

//-----------------------------------------------------------------------------------------
// Tools 

color[] getColorListShuffled() {

  // for the command lerpColor: 
  color from = color(random(255), random(255), random(255)); 
  color to = color(random(255), random(255), random(255));
  float step = 1.0f / (cells.length-1); // **must use a float number to return a float number**

  IntList inventory = new IntList(cells.length); // stores list of colors

  // for loop to generate an IntList of random colors
  for (int k = 0; k < cells.length; k++) {
    inventory.set(k, lerpColor (from, to, k*step));
  }
  inventory.shuffle(); // randomly shuffles the list inventory

  // directs the shuffled inventory 
  // as an array to 
  return inventory.array();
}

///////////////////////////////////////////////////////////////////////////////////////////

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() {

    stroke(255); 
    fill(clr);
    rect(x, y, w, h);
  }
  //
}//class
//

```

---

<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:** [February 8, 2020, 2:55am UTC](https://discourse.processing.org/t/perhaps-another-way-to-shuffle-lerped-colors-in-an-array/17597/10 "2020-02-08T02:55:00Z")

</div>

This is very interesting. Thank you!! I am glad for the guidance in brevity and simplifiction of code. I think I understand. But this weekend will have a chance to comb through line for line to make sure I understand all parts. I may have a follow up question or two…  
Deborah

---

<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 8, 2020, 11:19am UTC](https://discourse.processing.org/t/perhaps-another-way-to-shuffle-lerped-colors-in-an-array/17597/11 "2020-02-08T11:19:34Z")

</div>

It’s nice how a function can return an array of 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:** [February 10, 2020, 12:05am UTC](https://discourse.processing.org/t/perhaps-another-way-to-shuffle-lerped-colors-in-an-array/17597/12 "2020-02-10T00:05:48Z")

</div>

Hello! I went through the code and have commented next to the relevant areas in the added function **color [] getColorListShuffled()** to note what I think is going on at each step. Any oversights of note?  
Thank you!

```auto
// Function

color[] getColorListShuffled() {

  // local variables for the command lerpColor: 
  color from = color(random(255), random(255), random(255)); 
  color to = color(random(255), random(255), random(255));
  float step = 1.0f / (cells.length-1); // **must use a float number to return a float number**

  IntList inventory = new IntList(cells.length); // stores list of colors

  // for loop to generate an IntList of random colors
  for (int k = 0; k < cells.length; k++) {
    inventory.set(k, lerpColor (from, to, k*step)); 
    // sets up the list of colors (not shuffled at this point)
  }
  inventory.shuffle(); // this step randomly shuffles the list inventory 

  // directs the shuffled inventory 
  // as an array to 
  return inventory.array();
}

```

---

<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 10, 2020, 12:32pm UTC](https://discourse.processing.org/t/perhaps-another-way-to-shuffle-lerped-colors-in-an-array/17597/13 "2020-02-10T12:32:40Z")

</div>

Most of the comments are not new at the moment (but have been there in my version).

**My additional comments**

I would like to comment on

- the _function header_: `color[] getColorListShuffled() {` : Here you can see that the **return type** of the function is a color array: `color[]`. Often we see functions that don’t return anything, then the return type is void (empty) like in void draw. Here it is `color[]` .

- Accordingly, in the last line we see `return inventory.array();`, so we return in fact an array of colors. The function **must** return this type because we promised this in the _function header_. (The trick here is that _color_ in processing is the same as type _int_, so we can return an array of type int (when the function header says array of type color[])).

- One comment reads ` // for loop to generate an IntList of random colors` - well, the for-loop generates lerped colors; they are not random. They get shuffled (randomly) **after** the for-loop.

- From an architectural perspective (architecture of a program / Sketch): The use of the function `getColorListShuffled()` is good because it’s a **modularisation** of the code. It makes setup() shorter and places a section of it with a precise purpose in a new module (function) which name (getColorListShuffled) reflects that purpose. That’s good architecture when you look at the sketch as a whole. As an exercise you could transform the part of `setup()` that makes the grid into a new function too. What would be its name?  
The function getColorListShuffled is a module that can be copied and used in _other sketches_. This is also a good sign: re-usability. And the function has no dependencies (it doesn’t use global variables or so), which is also good and makes it possible to use it in another Sketch.

**The last comment**

The last comment

```auto
  // directs the shuffled inventory 
  // as an array to

```

should better be:

```auto
  // returns (as the result of the function) the shuffled inventory 
  // as an array (of int but treated as an array of color)

```

---

<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:** [February 10, 2020, 6:09pm UTC](https://discourse.processing.org/t/perhaps-another-way-to-shuffle-lerped-colors-in-an-array/17597/14 "2020-02-10T18:09:03Z")

</div>

> [@debxyz](#):
>
> for (int k = 0; k \< cells.length; k++) {  
> inventory.set(k, lerpColor (from, to, k\*step));

**I forgot to ask this question in previous post:**

`inventory.set (k, lerpColor (from, to, k*step));`

// ??Confirming that the purpose of **.set** is to attach the **k index** to each next iteration of lerped Color??

> [@Chrisir](#):
>
> One comment reads ` // for loop to generate an IntList of random colors` - well, the for-loop generates lerped colors; they are not random. They get shuffled (randomly) **after** the for-loop.

**I see now how my comment on this isn’t clear.** At this point in sketch I’m referring to the **color from** and **color to** local variables which are randomly generated. (The random shuffle which happens after the for loop.)

> [@Chrisir](#):
>
> should better be:
> 
> ```auto
> // returns (as the result of the function) the shuffled inventory 
> // as an array (of int but treated as an array of color)
> 
> ```

I agree, this is clearer!

**Scroll down to see revised code with:**

- a function to make a colorList array (not shuffled)
- a function to make the grid

**This returns error message mixing active and static.**  
The colorList function works, the grid function does not…  
Even after reading about static in reference, no clarity.

```auto
/* !!!These lerped colors in order created with function called color [] getColorList AND function to create the grid!!!*/

// global array 
Cell [] cells = new Cell [6];

void setup() {
  size (400, 400);

  color[] listColors = getColorList();
  makeOneRowGrid (cells.length);

  //int x = 20, y = x;
  //int w = 360/cells.length, h = 360;

  //for (int i = 0; i < cells.length; i++) {
  // cells[i] = new Cell(x+i*w, y, 
  // w, h, 
  // listColors[i]);
  //}//for
}//func

void draw() {
  background (51);

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

//-----------------------------------------------------------------------------------------
// Tools 

color[] getColorList() {

  // for the command lerpColor: 
  color from = color(random(255), random(255), random(255)); 
  color to = color(random(255), random(255), random(255));
  float step = 1.0f / (cells.length-1); // **must use a float number to return a float number**

  IntList inventory = new IntList(cells.length); // stores list of colors

  // for loop to generate an IntList of lerped colors in order
  for (int k = 0; k < cells.length; k++) {
    inventory.set(k, lerpColor (from, to, k*step));
  }
  return inventory.array();
}
makeOneRowGrid() {

  int x = 20, y = x;
  int w = 360/cells.length, h = 360;

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

```

---

<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:** [February 10, 2020, 6:23pm UTC](https://discourse.processing.org/t/perhaps-another-way-to-shuffle-lerped-colors-in-an-array/17597/15 "2020-02-10T18:23:23Z")

</div>

> [@Chrisir](#):
>
> And the function has no dependencies (it doesn’t use global variables or so),

Nope; global field _cells_ is accessed 3 times inside **getColorListShuffled()** in order to access _length_. ⚠

For a better portability, the function’s signature gotta ask for that value as its parameter: 💡  
`color[] getColorListShuffled(final int size) {`

Obviously, replace all `cells.length` w/ parameter _size_. 😛

---

<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:** [February 10, 2020, 6:52pm UTC](https://discourse.processing.org/t/perhaps-another-way-to-shuffle-lerped-colors-in-an-array/17597/16 "2020-02-10T18:52:01Z")

</div>

Sorry but I’m not following what you mean. I’m fairly new to coding so am still sorting out things on a pretty basic level…  
🙂

---

<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:** [February 10, 2020, 9:14pm UTC](https://discourse.processing.org/t/perhaps-another-way-to-shuffle-lerped-colors-in-an-array/17597/17 "2020-02-10T21:14:11Z")

</div>

@Chrisir @GoToLoop  
**The first sketch** is grid (only) made with a function.  
**The 2nd sketch** is with grid function AND getColorList function.  
///////////

```auto
/* !!!grid made with function !!!*/

// global array 
Cell [] cells = new Cell [6];

void setup() {
  size (400, 400);

  makeOneRowGrid ();
}//func

void draw() {
  background (51);

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

//-----------------------------------------------------------------------------------------
// Tools 

void makeOneRowGrid() {

  int x = 20, y = x;
  int w = 360/cells.length, h = 360;

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

```

/////////

```auto
class Cell {
  float x, y, w, h;
  //color clr;

  Cell ( 
    float tempX, float tempY, 
    float tempW, float tempH) {

    x = tempX;
    y = tempY;
    w = tempW;
    h = tempH;
    //clr = tempClr;
  }
  void display() {

    stroke(255); 
    fill(0);
    rect(x, y, w, h);
  }
  //
}//class

```

\*\ ***Version BELOW integrates the getColorList function.**

```auto
/* !!!grid made with function ADD listColors function !!!*/

// global array 
Cell [] cells = new Cell [6];

void setup() {
  size (400, 400);
  
  makeOneRowGrid ();
  color[] listColors = getColorList();
  
}//func

void draw() {
  background (51);

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

//-----------------------------------------------------------------------------------------
// Tools 

void makeOneRowGrid() {
  
  color[] listColors = getColorList();
  
  int x = 20, y = x;
  int w = 360/cells.length, h = 360;

  for (int i = 0; i < cells.length; i++) {
    cells[i] = new Cell(x+i*w, y, 
      w, h, listColors[i]);
  }
}
color[] getColorList() {

  // for the command lerpColor: 
  color from = color(random(255), random(255), random(255)); 
  color to = color(random(255), random(255), random(255));
  float step = 1.0f / (cells.length-1); // **must use a float number to return a float number**

  IntList inventory = new IntList(cells.length); // stores list of colors

  // for loop to generate an IntList of lerped colors in order
  for (int k = 0; k < cells.length; k++) {
    inventory.set(k, lerpColor (from, to, k*step));
  }
  // directs the shuffled inventory 
  // as an array to 
  return inventory.array();
}

```

**CLASS ////////////////////**

```auto
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() {

    stroke(255); 
    fill(clr);
    rect(x, y, w, h);
  }
  //
}//class

```

```auto

```

---

<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 10, 2020, 10:13pm UTC](https://discourse.processing.org/t/perhaps-another-way-to-shuffle-lerped-colors-in-an-array/17597/18 "2020-02-10T22:13:33Z")

</div>

Well done!

you could also make ` makeOneRowGrid()` that it returns a grid 🙂

```auto
Cell [] makeOneRowGrid() { 

```

---

<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:** [February 10, 2020, 10:15pm UTC](https://discourse.processing.org/t/perhaps-another-way-to-shuffle-lerped-colors-in-an-array/17597/19 "2020-02-10T22:15:53Z")

</div>

🙂 😀 😂

---

<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 10, 2020, 10:48pm UTC](https://discourse.processing.org/t/perhaps-another-way-to-shuffle-lerped-colors-in-an-array/17597/20 "2020-02-10T22:48:16Z")

</div>

> [@debxyz](#):
>
> // ??Confirming that the purpose of **.set** is to attach the **k index** to each next iteration of lerped Color??

Err… set: a new lerped color is appended to the list at position k.

[Next page](https://discourse.processing.org/t/perhaps-another-way-to-shuffle-lerped-colors-in-an-array/17597.md?page=2)