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:
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!
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:
My best guess for how to do this is to change the part of the line:
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.
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.
line? I am confused as to why you cannot set the hue maximum to 100 to make the line of code look like
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?
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.
Sorry I am a beginner with Processing and coding in general. Why do you need to add the (x10), (y10) 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.
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).
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… )
