# Individual Box Gradient in HSB

**URL:** <https://discourse.processing.org/t/individual-box-gradient-in-hsb/14132>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [September 23, 2019, 1:19pm UTC](https://discourse.processing.org/t/individual-box-gradient-in-hsb/14132 "2019-09-23T13:19:01Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![nathanchun](https://avatars.discourse-cdn.com/v4/letter/n/94ad74/32.png) [@nathanchun](https://discourse.processing.org/u/nathanchun)\
**Post date:** [September 23, 2019, 1:19pm UTC](https://discourse.processing.org/t/individual-box-gradient-in-hsb/14132/1 "2019-09-23T13:19:01Z")

</div>

I was assigned to code a gradient of 100 different squares in a 100x100 window with each square being 10x10. I know how to code for a vertical or horizontal gradient but I don’t know how to make a gradient that appears to be in a snake like pattern created through assigning every single square an individual hue. We are supposed to make a window that looks like this:

 ![gradient](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/592bd7799d39c5cff78e3587f5a8aa4d3069b68a.png)

My code is as follows:

```auto
colorMode(HSB, 100, 255, 255);
for (int i = 0; i <= width; i++) {
  stroke(int(100.0/100*i), 255,255);
  line(i, 0, i, height);
  for (int x = 0; x<100; x += 10) {
    for (int y = 0; y <100; y += 10) {
      noFill();
      stroke(0);
      rect(x,y,10,10);
    }
  }
}

```

As you can see, I have made the individual squares needed but I do not know how to assign each square a different hue. This is a beginner level course on processing so the code is not going to be super complex. Any and all help is appreciated!

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 23, 2019, 1:45pm UTC](https://discourse.processing.org/t/individual-box-gradient-in-hsb/14132/2 "2019-09-23T13:45:17Z")

</div>

-a- for pasting code to the editor here at the forum can use:

- click on editor menu `</> Preformatted text` or
- type 3 times ` at the beginning and at the end of the code.  
( you have that on your keyboard? )

-b-  
in your code i see a

```auto
noFill();

```

if you disable that with a

```auto
//noFill();

```

you should see something

-c- i can not show you the code for the shortest way,  
but just a hint,

> one FOR loop 0 … 99 { fill rect } can do the job!

but you have 3 FOR loops???

---

<div class="post-metadata">

**Author:** ![nathanchun](https://avatars.discourse-cdn.com/v4/letter/n/94ad74/32.png) [@nathanchun](https://discourse.processing.org/u/nathanchun)\
**Post date:** [September 23, 2019, 2:04pm UTC](https://discourse.processing.org/t/individual-box-gradient-in-hsb/14132/3 "2019-09-23T14:04:09Z")

</div>

Thank you for teaching me how to post code, I fixed the code to look cleaner.

If I remove or make the “noFill();” into a comment, the window just looks like this: ![nofill](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4c58cf0dfeaf174994b13d945b10efe7484a1078.png)

My best guess for how to do this is to change the part of the line:

```auto
stroke(int(100.0/100*i), 255,255);

```

to something else to change the rate at which color is spread on the background but I could be totally wrong.

I have the three loops because the first loop is what gives the gradient color and the second and third set of loops is what gives the box pattern on top.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 23, 2019, 2:09pm UTC](https://discourse.processing.org/t/individual-box-gradient-in-hsb/14132/4 "2019-09-23T14:09:44Z")

</div>

yes, the stroke you not want that way, just black

what you need is a

```auto
colorMode(HSB, 100);

//....

fill(i,100,100);
rect()

```

the “i” sorry, that is your 3 loop problem  
it should obviously go from 0 to 100

---

<div class="post-metadata">

**Author:** ![rufsketch1](https://avatars.discourse-cdn.com/v4/letter/r/8edcca/32.png) [@rufsketch1](https://discourse.processing.org/u/rufsketch1)\
**Post date:** [September 23, 2019, 2:31pm UTC](https://discourse.processing.org/t/individual-box-gradient-in-hsb/14132/5 "2019-09-23T14:31:13Z")

</div>

Alternatively, you might do

```auto
 colorMode(HSB, 1000, 100, 100);

  for (int x = 0; x<100; x+=10) {
    for (int y = 0; y <100; y+=10) {
      stroke(0);
      strokeWeight(1);
      fill((x*10)+y, 100, 100);
      rect(x,y,10,10);
    }
  }

```

This gets rid of the outer loop you’re using to draw your grid lines by taking advantage of `stroke(0)` and `strokeWeight(1)` to tell processing to draw a black line around any shapes it’s about to draw.

`colorMode(HSB, 1000, 100, 100);` tells processing to set the colorMode such that you can specify `fill(H, S, B)`. With the maximum value of `S`, and `B` being 100. And a full rotation around `H` being 1000. (Since you will be drawing 100 squares, each of which increments by 10 points of hue).

Then `fill((x*10)+y, 100, 100)` means that everytime you do an `x` loop, you account for the fact that you must have done 10 `y` loops to get there, and so multiply `x*10` before adding `y`.

---

<div class="post-metadata">

**Author:** ![nathanchun](https://avatars.discourse-cdn.com/v4/letter/n/94ad74/32.png) [@nathanchun](https://discourse.processing.org/u/nathanchun)\
**Post date:** [September 23, 2019, 2:57pm UTC](https://discourse.processing.org/t/individual-box-gradient-in-hsb/14132/6 "2019-09-23T14:57:36Z")

</div>

THIS IS IT THANK YOU!!! you also explained it very well. I will try to make it more specific to the requirements of the assignment now thanks so much!

---

<div class="post-metadata">

**Author:** ![nathanchun](https://avatars.discourse-cdn.com/v4/letter/n/94ad74/32.png) [@nathanchun](https://discourse.processing.org/u/nathanchun)\
**Post date:** [September 23, 2019, 3:02pm UTC](https://discourse.processing.org/t/individual-box-gradient-in-hsb/14132/7 "2019-09-23T15:02:50Z")

</div>

Could you go into a little more detail with the

```auto
colorMode (HSB, 1000,100,100);

```

line? I am confused as to why you cannot set the hue maximum to 100 to make the line of code look like

```auto
colorMode (HSB, 100,100,100);

```

and then increase the increments by 1 each time instead of 10. If you set the hue max to 100 and increase by 1 each time, isn’t it the same thing as having the hue max at 1000 and increasing by 10 each time?

---

<div class="post-metadata">

**Author:** ![rufsketch1](https://avatars.discourse-cdn.com/v4/letter/r/8edcca/32.png) [@rufsketch1](https://discourse.processing.org/u/rufsketch1)\
**Post date:** [September 23, 2019, 3:25pm UTC](https://discourse.processing.org/t/individual-box-gradient-in-hsb/14132/8 "2019-09-23T15:25:46Z")

</div>

Absolutely, yes. I set 1000 because you were already incrementing by 10. If you want to increment by 1, don’t forget that you will then have to do `rect(x*10, y*10, 10, 10)` in order to keep the spacing of the squares right.

---

<div class="post-metadata">

**Author:** ![nathanchun](https://avatars.discourse-cdn.com/v4/letter/n/94ad74/32.png) [@nathanchun](https://discourse.processing.org/u/nathanchun)\
**Post date:** [September 23, 2019, 3:56pm UTC](https://discourse.processing.org/t/individual-box-gradient-in-hsb/14132/9 "2019-09-23T15:56:34Z")

</div>

Sorry I am a beginner with Processing and coding in general. Why do you need to add the (x_10), (y_10) if you want to make it out of 100 and increase increments by 1? I added that to my code and it works but I was wondering the reason behind it.

---

<div class="post-metadata">

**Author:** ![rufsketch1](https://avatars.discourse-cdn.com/v4/letter/r/8edcca/32.png) [@rufsketch1](https://discourse.processing.org/u/rufsketch1)\
**Post date:** [September 23, 2019, 4:32pm UTC](https://discourse.processing.org/t/individual-box-gradient-in-hsb/14132/10 "2019-09-23T16:32:36Z")

</div>

Because the `rect` function takes `rect(x_position, y_position, height, width)`. In other words, the first two parameters tell it WHERE to draw the rectangle, and the second two tell it HOW LARGE to draw the rectangle. So if you give it `rect(x, y, 10, 10)`, when you’re only incrementing `x` and `y` by 1, then that would be telling it to draw each rectangle offset by only 1 pixel from the previous rectangle. Which would cause them to overlap. This wasn’t a problem when you were incrementing x and y by 10, because that meant that each x and y position was already 10 pixels offset from the previous rectangle in either direction.

However, now that you’re only incrementing by 1, but you still want your rectangles to be 10 pixels wide and 10 pixels tall, then each time you draw a rectangle, you need to account for the extra space required to not overlap the previous rectangle. And so you multiply by 10. If you’re still not clear about what’s going on, then try doing `rect(x*5, y*5, 10, 10)`. And see what happens. Then try `rect(x*15, y*15, 10, 10)`.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 23, 2019, 10:01pm UTC](https://discourse.processing.org/t/individual-box-gradient-in-hsb/14132/11 "2019-09-23T22:01:27Z")

</div>

> [@nathanchun](#):
>
> if you want to make it out of 100 and increase increments by 1?

yes, that is a other way,  
and as you got a full code solution already by @rufsketch1 there is no harm i post my version too  
( just for you to play with and learn more… )

```auto
colorMode(HSB, 100);
for (int i=0; i<100; i++) {
  fill(i, 100, 100);
  rect( floor(i/10)*10, (i%10)*10, 10, 10);
}

```

gives you 100 rectangles with 100 colors,

things like

> **[% (modulo) / Reference](https://processing.org/reference/modulo.html)**
>
> Calculates the remainder when one number is divided by another. For example, when 52.1 is divided by 10, the divisor (10) goes into the dividend (52.1) five times (5 \* 10 == 50), and there is a remain…

> **[floor() / Reference](https://processing.org/reference/floor_.html)**
>
> Calculates the closest int value that is less than or equal to the value of the parameter.

i used for the position of the rectangles grid  
you might play in a extra little code…