Call random RGB values from a predefined set

grahamnewman

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();
  }
}

`

kfrajer

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

jeremydouglass

@grahamnewman --

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

• https://processing.org/reference/ArrayList.html

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

• https://processing.org/reference/color_.html
• https://processing.org/tutorials/color/

...so you can use an IntList:

• https://processing.org/reference/IntList.html

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

grahamnewman

Awesome, thanks!!!!

jeremydouglass

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:

• https://processing.org/reference/color_.html

...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

Lord_of_the_Galaxy

Read about classes and OOP.
Create a class Circle (or Ellipse, if you want) and let it have three variables - color c, PVector pos and PVector speed.

Read up about vectors if you don't know - https://processing.org/tutorials/pvector/

grahamnewman

Thanks guys -you rock!