# Giving elements HSB rainbow colors in a for loop

Hey eyeryone.
So this is my first post. I’ve only started with processing.
We got the task to make a grid of 2D Primitives which can be altered through changing the size() or number of elements.
I figured that part out.
But we should also change the color of each element gradually.
I wrote some code that I think should work. But it doesn’t.

``````size(400, 400);
background(255,255,255);
noStroke();

//variables

//shapes
int num; //number of shapes
num = 4;

int totN; //numb*numb //total number of 2D primitives
totN = num*num;

int br; //width of shapes
br = width/num;

int hoehe;
hoehe = height/num;

//content
colorMode(HSB, totN,  100, 100);

for (float x=0; x<num; x=x+1) {
>>for (float y=0; y<num; y=y+1) {
>>>for (float hue=0; hue<totN; hue=hue+1){
>>>>pushMatrix();
>>>>translate(x*br, y*hoehe);
>>>>fill(hue, 50, 80); //Farbe mit festgelegter Helligkeit
>>>>ellipse(0.5*br, 0.5*hoehe, br, hoehe);
>>>>popMatrix();
>>}
>}
}
``````

This is what I am trying to archieve (I did that one without a loop). I hope I did this right.

Kind Regards
Henriette

2 Likes

Hi @Elfriede
You can do it this way to start with, but you will have to put the circles in the right place now.

``````int num, hue, br, hoehe;
int totN;

void setup() {
size(400, 400);
background(255);
num = 4;
br = width/num;
totN = 360/ (num*num);
hoehe = height/num;
hue = 360;
noStroke();
colorMode(HSB, 360, 100, 100);
for (float x = 0; x < num; x++) {
for (float y = 0; y < num; y++) {
hue -= totN;
pushMatrix();
translate(x*br, y*hoehe);
fill(hue, 100, 100);
println(hue);
ellipse(0.5*br, 0.5*hoehe, br, hoehe);
popMatrix();
}
}
}
``````
3 Likes

Thank you. Using `hue -= totN` instead of a loop did the job.

I am wondering tho why it did not work…

It’s because when you use :

``````num = 4;
totN = num*num;
colorMode(HSB, totN,  100, 100);
``````

you are using the hue’s range only ro 16
That’ why I used totN = 360/(num*num);
Now you can only use a ‘num’ until 18. Why?

@Elfriede
Since you didn’t answer, maybe it becomes more clear when examining the modification I did on your code.

``````
float hue, br, hoehe, num, totN, loc;

void setup() {
size(400, 430);
hue = 360;
loc = 15;
noStroke();
colorMode(HSB, 360, 100, 100);
ellipseMode(CENTER);
drawSlider();
}

void draw() {
background(0, 0, 100);
br = width/num;
totN = 360/(num*num);
hoehe = (height-30)/num;
for (float x = 0; x < num; x++) {
for (float y = 0; y < num; y++) {
hue -= totN;
pushMatrix();
translate(x*br, y*hoehe);
fill(hue, 100, 100);
ellipse(0.5*br, 0.5*hoehe, br, hoehe);
popMatrix();
}
}
hue = 360;
drawSlider();
}

void drawSlider() {
num = map(loc-10.55, 0.0, width, 0.0, 90);
fill(0, 0, 100);
rect(0, height-30, width, 30);
fill(200, 35, 100);
rect(10, height-15, width-20, 5);
fill(245, 50, 99);
ellipse(loc, height-13, 15, 15);
}

void mouseDragged() {
if (mouseY > height-30) {
loc = mouseX;
if (loc < 15) loc = 15;
if (loc > width-15) loc = width-15;
}
}
``````
1 Like

I used `totN = num*num` because I want the objects to have the full range of color not matter how I change num.
The problem was using the third loop I think.

This is my final code.

``````  size(500, 500);
background(255);
int num, hue, br, hoehe, count;
num = 10;
br = width/num;
hoehe = height/num;
hue = num*num;
count =1;

colorMode(HSB, hue, 100, 100, 100);
noStroke();

for (float x = 0; x < num; x=x+1) {
for (float y = 0; y < num; y=y+1) {
hue -= count;
pushMatrix();
translate(y*hoehe, x*br);
fill(hue, 100, 80, 85);
ellipse(0.5*br, 0.5*hoehe, br, hoehe);
popMatrix();
}
}
``````