Search code examples
textprocessing

How to Change Background Color on Processing?


I'm still extremely new to processing and I'm just playing around with it right now. I was hoping to find out how to change the background color between two colors, particularly between white and black, when I click my mouse. I found a code online that has the background color change between several different colors but I can't seem to figure out how the bg color can be changed between two colors. I would particularly like what 'col+=' and 'col%=' represent because I can't seem to find it in the processing tutorial. Please help me! Thank you! Below is the code that I found.

void setup() {
  size(600,400);
  smooth();
colorMode(HSB);

}

int col = 0;
void draw() {
  background(col,255,255);

}

void mousePressed(){
col+=20;
col%=255;
println(col);
}

Solution

  • "x += y" is shorthand for "x = x + y" and, likewise, "x %=y" is shorthand for "x = x % y" (where % is the modulo operator).

    I'm going to assume that you wanted to ask is "how do I change the background from one colour to another, and then back again"; there's two basic ways to do this.

    1: set up two (or more) reference colours, an extra "current" colour, and then change what 'current' points to, drawing the background off of that:

    color c1 = color(255,0,0), c2 = color(0,0,255), current;
    void setup() { current = c1; }
    void draw() { background(current); }
    void mousePressed() { if(current==c1) { current = c2; } else { current = c1; }}
    

    Every time you click, the program checks which of the two colours "current" points to, and then instead points it to the other colour.

    2: set up one colour, and apply some operation that is modulo in 1, or 2, or ... steps:

    color c = color(255,0,0);
    void draw() { background(c); }
    void mousePressed() { c = color( red(c), (green(c)+50)%255, blue(c)); }
    

    Every time you click, the colour "c" gets its green component increased by 50, and then modulo-corrected for 255. So it'll cycle through: 0, 50, 100, 150, 200, 250, 300%255=45, 95, 145, 195, 245, 295%255=40, 90, etc.