Randomize color using a class

edited November 2013 in How To...

Hello, I modified an example to understand how classes work. This particular scripts changes the color of the line while it moves from top to bottom, and from left to right. Problem is every time shows the same color. I want to randomize the values. However, if I put a random value inside the class, the lines start changing colors like a XMas tree! Any ideas how to solve that problem? Any suggestion to improve the sketch?

// Declare and contruct two objects (h1, h2) from the class HLine
HLine h1 = new HLine(20, 2, 10, 400, false, 0,0,0); 
HLine h2 = new HLine(20, 2, 10, 400, true, 0,0,0);

void setup()
{
  size(400, 400);
  frameRate(30);
  smooth();
}
void draw()
{
  background(204);
  h1.coreographyOne();
  h2.coreographyOne();
}

class HLine
{
  float theYPos, theXPos, theSpeed, theWeight, theWidth, theHeight;
  float theRedColor, theGreenColor, theBlueColor; 
  boolean theSwitch;
  HLine (float tempYPos, float tempSpeed, float tempWeight,
  float tempWidth, boolean tempSwitch,
  int tempRedColor, int tempGreenColor, int tempBlueColor) 
  {
    theYPos = tempYPos; //the two parameters are stored in inner variables
    theSpeed = tempSpeed;
    theWeight = tempWeight;
    theHeight = tempWidth;
    theWidth = tempWidth;
    //Color
    theRedColor = tempRedColor;
    theGreenColor = tempGreenColor;
    theBlueColor = tempBlueColor;
    //Horizontal or vertical
    theSwitch = tempSwitch;
  }
  void coreographyOne() //the method to advance the line on its way down
  {
    if (theSwitch==true) {
      theYPos = theYPos+theSpeed;
      if (theYPos > height)
      {
        theYPos = 0-theWeight; 
        theSwitch=false;
        theSpeed=random(1,6);
      }
      //Line color
      stroke(theRedColor,theGreenColor,theBlueColor);
      theRedColor = theYPos/5;
      theGreenColor = theYPos/4;
      theBlueColor = theYPos*1.1;
      //Line weight
      strokeWeight(theWeight);
      //Draw line
      line(0, theYPos, theWidth, theYPos);
    }
    else {
      theXPos = theXPos+theSpeed;
      if (theXPos > width)
      {
        theXPos = 0-theWeight; 
        theSwitch=true;
        theSpeed=random(2,8);
      }
      //Line color
      stroke(theRedColor,theGreenColor,theBlueColor);
      theRedColor = theXPos*0.6;
      theGreenColor = theXPos/4;
      theBlueColor = theXPos/5;
      //Line weight
      strokeWeight(theWeight);
      //Draw line
      line(theXPos, 0, theXPos, theHeight);
    }
  }
}

Thanks in advance!

Tagged:

Answers

  • Answer ✓

    I made some changes to the sketch:
    - Variables inside the class that never have their value changed are no longer variables in the class
    - The logic for x and y is basically identical, it is fairly clear to see this if 1 variable is used for both
    - The target color changes every time a line gets to the edge of the screen but it still has the same behavior of starting black and then changing colors like your code

    Let me know if you have any questions:

    HLine h1 = new HLine(20, 2, false); 
    HLine h2 = new HLine(20, 2, true);
    
    void setup() {
      size(400, 400);
      frameRate(30);
      smooth();
      strokeWeight(10);
    }
    void draw() {
      background(204);
      h1.coreographyOne();
      h2.coreographyOne();
    }
    
    class HLine {
      float pos, theSpeed;
      int r, g, b;
      boolean theSwitch;
    
      HLine (float tempPos, float tempSpeed, boolean tempSwitch) {
        pos = tempPos;
        theSpeed = tempSpeed;
        theSwitch = tempSwitch;
        randomizeColor();
      }
    
      void coreographyOne() {
        int mapR = int(map(pos, 0, height, 0, r));
        int mapG = int(map(pos, 0, height, 0, g));
        int mapB = int(map(pos, 0, height, 0, b));
        stroke(mapR, mapG, mapB);
    
        pos += theSpeed;
    
        if (theSwitch) {
          if (pos > height) {
            pos = -10; 
            theSwitch = false;
            theSpeed = random(1, 6);
            randomizeColor();
          }
          line(0, pos, width, pos);
        }
        else {
          if (pos > width) {
            pos = -10;
            theSwitch = true;
            theSpeed = random(2, 8);
            randomizeColor();
          }
          line(pos, 0, pos, height);
        }
      }
    
      void randomizeColor() {
        r = int(random(255));
        g = int(random(255));
        b = int(random(255));
      }
    }
    
  • Thank you very much. Would you mind to tell me what does map does? I see it's an important element on your script in order to randomize the color.

  • edited November 2013

    map(): http://processing.org/reference/map_.html

    Take a variable, say pos like above. We know that for a horizontal HLine that pos is going to have a value between 0 and width when it is on the screen. Then we want to translate how far it is between 0 and width into a color, say for mapR. If pos is 25% of the way to width then mapR is 25% of the way to r.

    Edit: Actually map() does not do any randomization, all randomizing is done in randomizeColor(). What randomizeColor() is doing is setting the maximum value for r, g, and b. Then map() makes the color go from black (0, 0, 0) to the maximum color (r, g, b).

  • Thanks for the information!

Sign In or Register to comment.