# Color Shuffle with hex color codes

**URL:** <https://discourse.processing.org/t/color-shuffle-with-hex-color-codes/1191>\
**Category:** Coding Questions\
**Created:** [June 23, 2018, 11:15pm UTC](https://discourse.processing.org/t/color-shuffle-with-hex-color-codes/1191 "2018-06-23T23:15:30Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![deanomite](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/deanomite/32/159_2.png) [@deanomite](https://discourse.processing.org/u/deanomite)\
**Post date:** [June 23, 2018, 11:15pm UTC](https://discourse.processing.org/t/color-shuffle-with-hex-color-codes/1191/1 "2018-06-23T23:15:30Z")

</div>

Hi there,

Am trying to get colors in an array to shuffle, but having some trouble understanding how to adapt this code:

I want to create an array with the following hex color codes and have them shuffle whenever there’s a keyPressed()  
{#FEF0D5, #D81E5B, #F35B68, #00BEB2, #1A5D63}

With Integers and Strings, this works but with **Color[] or color[]** this doesn’t work at all. How can I resolve this? Thanks!

```auto
//with INTEGERS
import java.util.*;

Integer[] array;
List<Integer> l;

void setup() {
  size(600,600);
  array = new Integer[]{1, 2, 3, 4};
  // Shuffle the elements in the array
  l = Arrays.asList(array);
  printArray("original order: " + l);
}

void draw() {
  background(0);
}

void keyPressed() {
  Collections.shuffle(l);
  printArray("new order: " + l);

```

Replacing Integer with String:

```auto
//with STRINGS
import java.util.*;

String[] array;
List<String> l;

void setup() {
  size(600,600);
  array = new String[]{"one", "two", "three", "four"};
  // Shuffle the elements in the array
  l = Arrays.asList(array);
  printArray("original order: " + l);
}

void draw() {
  background(0);
}

void keyPressed() {
  Collections.shuffle(l);
  printArray("new order: " + l);
}

```

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [June 23, 2018, 11:27pm UTC](https://discourse.processing.org/t/color-shuffle-with-hex-color-codes/1191/2 "2018-06-23T23:27:29Z")

</div>

Can you please post the code you’re using to shuffle a `color` array?

---

<div class="post-metadata">

**Author:** ![deanomite](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/deanomite/32/159_2.png) [@deanomite](https://discourse.processing.org/u/deanomite)\
**Post date:** [June 23, 2018, 11:34pm UTC](https://discourse.processing.org/t/color-shuffle-with-hex-color-codes/1191/3 "2018-06-23T23:34:30Z")

</div>

It was just a substitute like this. I don’t really know what to do to access the hex color code eg: #FEF0D5  
I know to convert integers to strings, etc but for color type am very confused.

Also there is a Color and color. One that starts with a capital letter ‘C’ and the other with the lower case ‘c’.  
In java tutorials they seem to use ‘Color’ and in the processing reference it is ‘color’. However, both give errors.

```auto
// **with 'color'**
import java.util.*;

color[] array;
List<color> l;

void setup() {
  size(600,600);
  array = new color[]{#FEF0D5, #D81E5B, #F35B68, #00BEB2, #1A5D63};
  // Shuffle the elements in the array
  l = Arrays.asList(array);
  printArray("original order: " + l);
}

void draw() {
  background(0);
}

void keyPressed() {
  Collections.shuffle(l);
  printArray("new order: " + l);
}

```

---

<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:** [June 23, 2018, 11:47pm UTC](https://discourse.processing.org/t/color-shuffle-with-hex-color-codes/1191/4 "2018-06-23T23:47:21Z")

</div>

- [https://Processing.org/reference/IntList\_shuffle\_.html](https://Processing.org/reference/IntList_shuffle_.html)
- [https://Forum.Processing.org/two/discussion/3546/how-to-randomize-order-of-array#Item\_4](https://Forum.Processing.org/two/discussion/3546/how-to-randomize-order-of-array#Item_4)

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [June 23, 2018, 11:49pm UTC](https://discourse.processing.org/t/color-shuffle-with-hex-color-codes/1191/5 "2018-06-23T23:49:44Z")

</div>

Behind the scenes, `color` isn’t really a type. Processing automatically converts `color` values into `int` values. That’s why the `color` type doesn’t work with Java code: Java doesn’t know about this `color` to `int` magic.

To get your example working, you can use `Integer` values instead:

```auto
import java.util.*;

Integer[] array;
List<Integer> l;

void setup() {
  size(600,600);
  array = new Integer[]{#FEF0D5, #D81E5B, #F35B68, #00BEB2, #1A5D63};
  // Shuffle the elements in the array
  l = Arrays.asList(array);
  printArray("original order: " + l);
}

void draw() {
  color c = array[0];
  background(c);
}

void keyPressed() {
  Collections.shuffle(l);
  printArray("new order: " + l);
}

```

Also notice the code inside the `draw()` function which treats the `Integer` value like a `color`. Processing knows that `color` values are really `int` values, so this will work.

By the way, the `Color` type (with an upper-case `C`) is a Java-specific class that you should (almost) never use in Processing.

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [June 23, 2018, 11:50pm UTC](https://discourse.processing.org/t/color-shuffle-with-hex-color-codes/1191/6 "2018-06-23T23:50:13Z")

</div>

@GoToLoop Please include an explanation when you post links.

---

<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:** [June 23, 2018, 11:52pm UTC](https://discourse.processing.org/t/color-shuffle-with-hex-color-codes/1191/7 "2018-06-23T23:52:07Z")

</div>

> [@deanomite](#):
>
> In Java tutorials they seem to use Color and in the Processing reference it is `color`.

Neither the primitive datatype `color` & its corresponding wrapper Color exist in the Java language! 🤐

We should replace them w/ `int` & Integer when dealing w/ Java and its `<generic>` container types. ☕

---

<div class="post-metadata">

**Author:** ![deanomite](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/deanomite/32/159_2.png) [@deanomite](https://discourse.processing.org/u/deanomite)\
**Post date:** [June 23, 2018, 11:59pm UTC](https://discourse.processing.org/t/color-shuffle-with-hex-color-codes/1191/8 "2018-06-23T23:59:36Z")

</div>

Thanks Kevin… this is really awesome!!

This line itself is a huge eye-opener for me. Have never used it like this… always new color[]{… ,…, …};

`array = new Integer[]{#FEF0D5, #D81E5B, #F35B68, #00BEB2, #1A5D63};`

Thank you for your explanation Kevin… it really cleared up a lot of concepts for me! Cheers! 🙂

---

<div class="post-metadata">

**Author:** ![deanomite](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/deanomite/32/159_2.png) [@deanomite](https://discourse.processing.org/u/deanomite)\
**Post date:** [June 24, 2018, 12:02am UTC](https://discourse.processing.org/t/color-shuffle-with-hex-color-codes/1191/9 "2018-06-24T00:02:29Z")

</div>

Thanks @GoToLoop the Color and color issue was making me see ‘red’. Pardon the pun 🙂  
Thanks so much for the assist. I did go through \_vk’s explanations as well as how to create the custom Shuffle function. Quite cool! 🙂

---

<div class="post-metadata">

**Author:** ![deanomite](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/deanomite/32/159_2.png) [@deanomite](https://discourse.processing.org/u/deanomite)\
**Post date:** [June 24, 2018, 12:16am UTC](https://discourse.processing.org/t/color-shuffle-with-hex-color-codes/1191/10 "2018-06-24T00:16:33Z")

</div>

This is what I was able to adapt it to:

```auto
import java.util.*;

Integer[] array;
List<Integer> l;

void setup() {
  size(600, 600);
  array = new Integer[]{#FEF0D5, #D81E5B, #F35B68, #00BEB2, #1A5D63};
  // Shuffle the elements in the array
  l = Arrays.asList(array);
  printArray("original order: " + l);
}

void draw() {
  background(0);
  for (int i = 0; i < array.length; ++i) {
    color c = array[i];
    fill(c);
    ellipseMode(CENTER);
    ellipse(i*(width/array.length)+width/array.length/2, height/2, width/5, width/5);
  }
}

void keyPressed() {
  Collections.shuffle(l);
  printArray("new order: " + l);
}

```

My final plan for this to to save color harmonies from Adobe’s Kuler site [https://color.adobe.com/explore/?filter=most-popular&time=month](https://color.adobe.com/explore/?filter=most-popular&time=month)

I don’t think they have the API anymore to connect directly. So I have to save this and use Adobe Illustrator to save out a .ase file. Then use a .jsx script to save .ase to .csv. Now onto loadTable() 🙂

If there’s a better way, do let me know. Your inputs are most valued. Thank you once again!

---

<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:** [June 24, 2018, 12:23am UTC](https://discourse.processing.org/t/color-shuffle-with-hex-color-codes/1191/11 "2018-06-24T00:23:35Z")

</div>

> [@deanomite](#):
>
> If there’s a better way, …

The better & more performant way is to rely on IntList instead, as I had already linked to at my 1st reply: 😉

> **[IntList / Reference](https://processing.org/reference/IntList.html)**
>
> Helper class for a list of int values. Lists are designed to have some features of ArrayList, but to maintain the simplicity and efficiency of working with arrays. Functions such as s…

You’ll have access to better methods, such as **shuffle()** & **array()**: 💪

1. [shuffle() / Reference / Processing.org](https://Processing.org/reference/IntList_shuffle_.html)
2. [array() / Reference / Processing.org](https://Processing.org/reference/IntList_array_.html)

---

<div class="post-metadata">

**Author:** ![deanomite](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/deanomite/32/159_2.png) [@deanomite](https://discourse.processing.org/u/deanomite)\
**Post date:** [June 24, 2018, 12:26am UTC](https://discourse.processing.org/t/color-shuffle-with-hex-color-codes/1191/12 "2018-06-24T00:26:43Z")

</div>

Yes… this is quite helpful! 😀