#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# Call random RGB values from a predefined set

edited January 2017

Hi guys! Is there a smart way I can add a random fill colour to each line in my sketch here? I'd like to have the random colours generated from a predefined set of 2 RGB values - one very bright eg 253, 238, 255 and one very dark eg 33,35,25 ? Any help much appreciated!!

`

``````int numFrames;

int x1 = 412; //x-coordinate for ellipse 1
int x2 = 512; // x-coordinate for ellipse 2
int x3 = 612; // x-coordinate for ellipse 3

int y1 = 400; //x-coordinate for ellipse 1
int y2 = 400; //x-coordinate for ellipse 2
int y3 = 400; //x-coordinate for ellipse 3

int xSpeed1 = 1; //speed variable for ellipse 1
int xSpeed2 = 2; //speed variable for ellipse 2
int xSpeed3 = 3; //speed variable for ellipse 3

int ySpeed1 = 3; //speed variable for ellipse 1
int ySpeed2 = 2; //speed variable for ellipse 2
int ySpeed3 = 1; //speed variable for ellipse 3

void setup(){
size (1024,768);
background(0);
smooth();
numFrames = (int)random(50, 800);

}

void draw(){
//background (0);
// strokeWeight(4);
noStroke ();

fill(66,93,100);
ellipse(x1,y1,50,50);

fill(293,90,100);
ellipse(x2,y2,50,50);

fill(182,89,100);
ellipse(x3,y3,50,50);

x1 = x1 + xSpeed1;
x2 = x2 + xSpeed2;
x3 = x3 + xSpeed3;

y1 = y1 + ySpeed1;
y2 = y2 + ySpeed2;
y3 = y3 + ySpeed3;

if ((x1>= width - 25) || (x1 <= 25)){
xSpeed1 = xSpeed1 * -1;
}

if ((x2>= width - 25) || (x2 <= 25)){
xSpeed2 = xSpeed2 * -1;
}
if ((x3>= width - 25) || (x3 <= 25)){
xSpeed3 = xSpeed3 * -1;
}
if ((y1>= width - 25) || (y1 <= 25)){
ySpeed1 = ySpeed1 * -1;
}
if ((y2>= width - 25) || (y2 <= 25)){
ySpeed2 = ySpeed2 * -1;
}
if ((y3>= width - 25) || (y3 <= 25)){
ySpeed3 = ySpeed3 * -1;
}

if(frameCount == numFrames){
saveFrame("output.png");
exit();
}
}
``````

`

Tagged:

• one very bright eg 253, 238, 255 and one very dark eg 33,35,25

Have you consider using HSB mode instead? https://processing.org/reference/colorMode_.html

Also have a look at lerpColor(): https://processing.org/reference/lerpColor_.html

Kf

• edited January 2017 Answer ✓

If you want to create a "crayon box" (or two boxes), you can create an ArrayList of colors.

You might expect this to be something like `ArrayList<Color>`, but actually colors in processing are a special format of `int`:

...so you can use an IntList:

Here is the standard `IntList` example from the reference page above, altered to store colors instead of numbers:

``````IntList crayons;
int csize;
void setup() {
size(200, 200);
// make a crayon box
crayons = new IntList();

// put some crayons in the box
crayons.append(color(253, 238, 255));
crayons.append(color(33,35,25));
crayons.append(color(255,0,0));
crayons.append(color(0,255,0));
crayons.append(color(0,0,255));
crayons.append(color(0,255,255));
crayons.append(color(255,0,255));
crayons.append(color(255,255,0));

csize = crayons.size();
println(crayons);
noStroke();
noLoop();
fill(0);
textAlign(CENTER);
}

void draw() {
// use each crayon in the box once
for (int i=0; i<csize; i++){
fill(crayons.get(i));
// the line above can also use color() for clarity, but it is redundant:
// fill(color(crayons.get(i)));
rect(i*(width/csize),0,(width/csize),height);
}
}
``````  As @kfrajer suggests:

1. using `colorMode(HSB)` will make it much more intuitive to create two sets of colors with similar brightness https://processing.org/reference/colorMode_.html
2. `lerpColor` will allow you to specify the end colors and then find colors at steps in-between a color range. https://processing.org/reference/lerpColor_.html
• Awesome, thanks!!!!

• from a predefined set of 2 RGB values

P.S. -- if you really only need two colors, you can simply declare them as global variables of type "color" at the top of the sketch and use them without putting them in a list at all. See the second sketch example from the color reference page:

...which you might do like this:

``````color c1 = color(255, 204, 0);
color c2 = color(65);

fill(c1);  // Use color variable 'c' as fill color
ellipse(25, 25, 80, 80);  // Draw left circle
fill(c2);  // Use updated 'c' as fill color
ellipse(75, 75, 80, 80);  // Draw right circle
``````
Create a class Circle (or Ellipse, if you want) and let it have three variables - `color c`, `PVector pos` and `PVector speed`.