Giving elements HSB rainbow colors in a for loop

Processing Coding Questions
1

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

java_v4ZGe8IA5w

I hope I did this right.

Kind Regards
Henriette

2 Likes
2

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
3

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

I am wondering tho why it did not work…

4

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?

5

@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
6

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

java_oNBA9TdkdI
java_oNBA9TdkdI502×527 56.4 KB

Thank you for your help.

1 Like