# How to debug smooth color change in processing?

I have written code in which the stroke color should transition smoothly through red, orange, yellow, green etc. in a loop. The rest of the code works perfectly but I am having issues attaining the color transitions.

It’s expected that the Red value increases by 1 until it reaches 255, where it stays as the Green value does the same. Then the Red value should begin the decrease by 1 whilst the Green remains at 255.

The issue with the code is that the Red and Green values will both increase as necessary, but no matter what I try, I can’t get the Red value to decrease.

Any input will be greatly appreciated. Please note I believe the issues lie in the code block at the end after the line marked //color transitions. I have also posted this question on Stack Overflow here: How to debug smooth color change in processing? - Stack Overflow

``````float angNoise, radiusNoise;
float xNoise, yNoise;
float angle = -PI/2;
int red = 0;
int blue = 0;
int green = 0;
int redValue = 1;
int greenValue = 1;
int blueValue = 1;
int colorMode = 1;

void setup(){
size(800, 600);
smooth();
frameRate(24);
background(0);
noFill();

angNoise = random(10);
xNoise = random(10);
yNoise = random(10);
}

void draw(){

angNoise += 0.005;
angle += (noise(angNoise)*6)-3;
if(angle > 360){ angle -= 360; }
if(angle < 0){ angle += 360; }

xNoise += 0.01;
yNoise += 0.01;
float centerX = width/2 +(noise(xNoise)*100)-50;
float centerY = height/2 +(noise(yNoise)*100)-50;

//color transitions
stroke(red, green, blue); //60);
strokeWeight(2);
ellipse(x1, y1, x2, y2);
//color mode 1 (red)
if (colorMode == 1){blueValue = -1;
if (red == 255 && blue == 0) {colorMode++;}
if (red == 0) {redValue = +1;}
red += redValue;}
//color mode 2 (green)
if (colorMode == 2){redValue = -1;
if (green == 255 && red == 0) {colorMode++;}
if (green == 0) {greenValue = +1;}
green += greenValue;}
//color mode 3 (blue)
if (colorMode == 3){greenValue = -1;
if (blue == 255 && green == 0) {colorMode++;}
if (blue == 0) {blueValue = +1;}
blue += blueValue;}
if (colorMode > 3) {colorMode =1;}
}
``````

Hi,

Welcome to the forum! If I recap, you want your colors to do this :

``````red  green  blue
0     0     0
|     |     |
v     v     v
255    0     0
|     |     |
v     v     v
255   255    0
|     |     |
v     v     v
0    255    0
|     |     |
v     v     v
0    255   255
|     |     |
v     v     v
0     0    255
|     |     |
v     v     v
0     0     0
``````

So one color increase then another one and they alternate.

So basically every step above can be described as a one if condition like the following :

``````if (red < 255 && green == 0 && blue == 0) {
red++;
}

if (red == 255 && green < 255 && blue == 0) {
green++;
}

if (red > 0 && green == 255 && blue == 0) {
red--;
}

if (red == 0 && green == 255 && blue < 255) {
blue++;
}

if (red == 0 && green > 0 && blue == 255) {
green--;
}

if (red == 0 && green == 0 && blue > 0) {
blue--;
}
``````

This is maybe not the most elegant way to do this but it works!
So doing this in a loop is going to increase and decrease the colors and repeat infinitely!

If you would plot those colors with vertical lines, you would get this :

Which is pretty cool! (note that it’s fading to black here so it’s not a real color spectrum but it’s what you wanted)

Bonus, here is another technique to generate rainbow colors with RGB values :  ``````// The array of colors (here red, green, blue)
int[] colors = {255, 0, 255};

// The index of the current color
int currentColorIndex = 0;

// We start decreasing the previous color
boolean decreasePrev = true;
boolean increaseNext = false;

void colorStep() {
if (decreasePrev) {
int prevIndex = currentColorIndex - 1;
if (prevIndex < 0) prevIndex = colors.length - 1;

colors[prevIndex]--;

// Finished decreasing color
if (colors[prevIndex] == 0) {
decreasePrev = false;
increaseNext = true;
}
} else if (increaseNext) {
// Increase next color, wrap index if necessary
int nextIndex = (currentColorIndex + 1) % colors.length;
colors[nextIndex]++;

// Finished increasing next
if (colors[nextIndex] == 255) {
increaseNext = false;
decreasePrev = true;

// Go to next color
currentColorIndex = nextIndex;
}
}
}

void setup() {
// The width is 6 * 255 which is the number of steps
size(1530, 200);

for (int i = 0; i < width; i++) {
stroke(color(colors, colors, colors));
line(i, 0, i, height);

colorStep();
}

noLoop();
}
``````

In this case it goes from purple to purple and can be generalized to a larger array of values (Note that for this it would be easier to use HSV values and change the hue parameter but the challenge was fun!)

my version

``````

float xNoise, yNoise;
float angle = -PI/2;

int red = 0;
int blue = 0;
int green = 0;

int redValue = 1;
int greenValue = 1;
int blueValue = 1;

int colorMode = 1;

void setup() {
size(800, 600);
smooth();
frameRate(24);
background(0);
noFill();

angNoise = random(10);
xNoise = random(10);
yNoise = random(10);
}

void draw() {

angNoise += 0.005;
angle += (noise(angNoise)*6)-3;
if (angle > 360) {
angle -= 360;
}
if (angle < 0) {
angle += 360;
}

xNoise += 0.01;
yNoise += 0.01;
float centerX = width/2 +(noise(xNoise)*100)-50;
float centerY = height/2 +(noise(yNoise)*100)-50;

//color transitions
stroke(red, green, blue); //60);
strokeWeight(2);
ellipse(x1, y1, x2, y2);

//color mode 1 (red)
if (colorMode == 1) {
blueValue = -1;
if (red == 255) {
colorMode++;
println("go 2");
red=0; // ?????
}
if (red == 0) {
redValue = +1;
}
if (colorMode == 1)
red += redValue;
}
//color mode 2 (green)
else if (colorMode == 2) {
redValue = -1;
if (green == 255) {
println("go 3");
colorMode++;
green=0; // ?????
}
//if (green == 0) {
greenValue = +1;
//}
green += greenValue;
}
//color mode 3 (blue)
else if (colorMode == 3) {
greenValue = -1;
if (blue == 255) {
colorMode++;
println("go 4");
blue = 0;
}
//if (blue == 0) {
blueValue = +1;
//}
blue += blueValue;
} else if (colorMode > 3) {
colorMode = 1;//reset
}
}
//

``````