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);
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);
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.
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;
}
}Ok, I found out 
I think I need to use lerpColor()…
Also, you can import java.awt.Color; and do fill(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...;
}
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);
}
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;
}
}
//
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.
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
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();
}
//
Ok, I understand (I think)! Thank you very much!!!
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.
I see. Thank you! I’ll keep on working at it.