 # Bug with color variable type (lerpColor) ``````size(400,200);
color clr = 255, clr2 = color(255,255,255);
noStroke();
fill(red(clr),green(clr),blue(clr));
rect(0,0,200,200);
fill(red(clr2),green(clr2),blue(clr2));
rect(200,0,200,200);
``````

I know color is stored as a weird integer (like -1 for white). But it should at least work the same way as fill(255);

1 Like

color(255) and 255 are very different values.

In this example, I’ve fixed `clr` to actually be a color.

``````size(400,200);
color clr = color(255); // <<< NOTE THE CHANGE HERE
color clr2 = color(255,255,255);
noStroke();
fill(red(clr),green(clr),blue(clr));
rect(0,0,200,200);
fill(red(clr2),green(clr2),blue(clr2));
rect(200,0,200,200);
``````
1 Like

I know but still : P

It’s best to just store the color as a color() variable. Also, instead of the red green blue, you don’t have to put that with processing.

1 Like

Hi!

I read this post as I was looking for details about the color variable type on the forum.

Maybe someone can help me.

At the moment, I have this basic sketch of rotating and shrinking rectangles. I’d like their fill() value to be gray and get darker and darker as they shrink.

I set a unique value to my color variable “col”, and tried to increment / decrement that value, but instead of shades of gray I have a yellow color flashing.

I tried to put the “if statement”, within the “for loop”, before drawing the rectangle, but of course the colors were looping from a rectangle to another, but with colors I didn’t not define anywhere.

I’m cleary missing something basic with manipulating colors…

Could someone point me in the right direction ?

``````float x=0;
float y=0;
float rot = 0;
float rectdim = 60;
float str = 1;
color col = color (255);

void setup() {
size(600, 600);
}

void rotating_rect(float x, float y, float rect_size, float r) {
rectMode(CENTER);
stroke(0);
translate(x, y);
rotate(r);
rect(0, 0, rect_size, rect_size);
resetMatrix();
}

void draw() {
background(255);

for (x=100; x<width; x=x+100) {
for (y=100; y<height; y=y+100) {
strokeWeight(str);
fill(col);
rotating_rect (x, y, rectdim, rot);
}
}

if (rectdim<70) {
col = color (col-10);
} else {
col = color (col++);
}

rot = rot + 0.02;
rectdim++;

if (rectdim > 60) {
rectdim=rectdim*-1;
}
}``````
1 Like

Ok, I found out I think I need to use lerpColor()…

2 Likes

Also, you can `import java.awt.Color;` and do f`ill(new Color(255, 0, 0));` or `fill(Color.RED);`

Instead of this say col += addCol;

Make an if-clause and set addCol to either +1 or -1

``````if (rectdim<70) {
addCol....;
} else {
addCol...;
}
``````
1 Like
``````void setup() {
size(200, 200);

colorMode(HSB, width, height, 100);

}

void draw() {
color viola = color(mouseX, mouseY, 100);

background(viola);

//    fill(viola);
//    stroke(0, 0, 0);
//    strokeWeight(10);
//    rect(50, 50, 100, 100);

}

``````
2 Likes

Thank you for your reply but I actually don’t really understand how to achieve what you’re suggesting…!
Do you mean declaring a float variable addCol ? Or a color variable ? Sorry I’m a bit lost !

``````
float x=0;
float y=0;
float rot = 0;
float rectdim = 60;
float str = 1;

int col =  (0);
int addCol = 1;

void setup() {
size(600, 600);
}

void rotating_rect(float x, float y, float rect_size, float r) {
rectMode(CENTER);
stroke(0);
translate(x, y);
rotate(r);
rect(0, 0, rect_size, rect_size);
resetMatrix();
}

void draw() {
background(255);

for (x=100; x<width; x=x+100) {
for (y=100; y<height; y=y+100) {
strokeWeight(str);
fill(color(col));
rotating_rect (x, y, rectdim, rot);
}
}

col += addCol;

if (col>250) {
addCol= -1;
} else if (col<3) {
addCol= 1;
}

rot = rot + 0.02;
rectdim++;

if (rectdim > 60) {
rectdim=rectdim*-1;
}
}
//

``````
1 Like

Thank you very much !

I need to work a little bit the code, as I’d like the rectangles to get darker as they shrink and lighter as they grow.

1 Like

technically `rectdim` gets -60 (or -61) here.

This means the rect is -60 in size which looks the same when you use `rectMode(CENTER);` but it is in fact mirrored

but therefore you can’t say

``````if (rectdim<70) {
addCol....;
``````

as I thought

2 Likes

I am progressing… kind of…
I used lerpColor() and map(). But I cannot reverse the color shades. It’s only working when the rect grows. I tried to used a Boolean, but no luck.

``````float x=0;
float y=0;
float rot = 0;
float rectdim = 60;
float str = 1;
color col = color (0);
color col2 = color (255);
boolean grow;

void setup() {
size(600, 600);
}

void rotating_rect(float x, float y, float rect_size, float r) {
rectMode(CENTER);
stroke(0);
translate(x, y);
rotate(r);
rect(0, 0, rect_size, rect_size);
resetMatrix();
}

void draw() {

background(255);

for (x=100; x<width; x=x+100) {
for (y=100; y<height; y=y+100) {
strokeWeight(str);

float amt = map(rectdim, 0, 60, 0, 1);
float amt2 = map(rectdim, 0, 60, 1, 0);

color col3 = lerpColor(col, col2, amt);
color col4 = lerpColor(col, col2, amt2);

if (grow == true) {
fill(col4);
} else {
fill(col3);
}
rotating_rect (x, y, rectdim, rot);
}
}
rot = rot + 0.02;
rectdim++;

if (rectdim > 60) {
grow = true;
rectdim=rectdim*-1;
} else {
grow = false;
}
}
``````
``````

float x=0;
float y=0;
float rot = 0;
float rectdim = 60;
float str = 1;
color col = color (0);
color col2 = color (255);
boolean grow;

void setup() {
size(600, 600);
}

void draw() {

background(255);

for (x=100; x<width; x=x+100) {
for (y=100; y<height; y=y+100) {
strokeWeight(str);

float amt = map(rectdim, -60, 0, 0, 1);
float amt2 = map(rectdim, 0, 60, 0, 1);

color col3 = lerpColor(col, col2, amt);
color col4 = lerpColor(col2, col, amt2);

if (grow) {  //  == true
fill(col4);
} else {
fill(col3);
}

rotating_rect (x, y, rectdim, rot);
}
}
//
rot = rot + 0.02;
rectdim++;

if (rectdim > 60) {
grow = false;
rectdim = rectdim * -1;
} else if (abs(rectdim) < .6) {
grow = true;
}
//
}

//----------------------------------------------------------------------------

void rotating_rect(float x, float y, float rect_size, float r) {
rectMode(CENTER);
stroke(0);
translate(x, y);
rotate(r);
rect(0, 0, rect_size, rect_size);
resetMatrix();
}
//

``````
1 Like

Ok, I understand (I think)! Thank you very much!!!

1 Like

there are many solutions

our is not the most elegant

if I were you I would make the handling of `rectdim` more elegant as discussed. Then it would be possible to make the handling of the color more elegant too.

2 Likes

I see. Thank you! I’ll keep on working at it.

2 Likes