How to Change Background Color on Processing? - text

Question

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

Answer 1

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