StrokeWeight growing with loop

Processing Coding Questions
1

Hi there!

I have made a loop with rectangles and I am trying to Increase gradually the Stroke , so have made another loop for that, but It does not work. Could you please help me? Thanks!

size(1000,1000);
background(255,255,255);
fill(0,255,255);
rectMode(CENTER);

for (int w = 0; w < 10; w++){
  strokeWeight(w);
}
  

for (int i = 0; i < 20; i++){
  int s = 1000 -i * 50; 
  rect(width/2,height/2,s,s);
}
2

Hi @humano,

When setting drawing properties in Processing like fill, rectMode or strokeWeight, if there was an existing setting they override it.

Let’s take this example:

strokeWeight(5);

// Now stroke weight is 5...

strokeWeight(10);

// Now stroke weight is 10...

The thing is that you are doing a for loop 10 times and you set the stroke weight but in fact it does that:

strokeWeight(0);
strokeWeight(1);
strokeWeight(2);
strokeWeight(4);
// ...
strokeWeight(10);

but at the end it’s strokeWeight(10) that takes the priority! :wink:

The solution is to put the strokeWeight inside the loop where you display rectangles so it sets it for every rectangle :yum:

1 Like
3

Thank you so much? I have tried this but It does not work, do you know why?

size(1000,1000);
background(255,255,255);
fill(0,255,255);
rectMode(CENTER);


  

for (int i = 0; i < 20; i++){
  int s = 1000 -i * 50; 
  for (int w = 0; w < 10; w++){
  strokeWeight(w);
  rect(width/2,height/2,s,s);
} 
}
4

I wasn’t talking about just putting the for loop inside the second one.

When you have a program, try to check on paper or in your head what it’s going to do step by step:

i = 0
  w = 0
  w = 1
  w = 2
  ...
  w = 9

i = 1
  w = 0
  w = 1
  w = 2
  ...
  w = 9

So basically you are doing 20 x 10 iterations in total because the two for loops are nested so you are drawing 200 rectangle instead of 20 and because each time you change the strokeWeight but draw the rectangle at the same position (width/2,height/2,s,s) the largest stroke (9) is hiding the smallest stroke weights.

Try to figure out how to change the stroke weight for each one of the rectangles with a single for loop :wink:

2 Likes
5

Thank you so much for your answer. Now I think that I undestand the problem , but I don’t know how to solve It because StrokeWeight It something that is not inside of rect(width/2,height/2,s,s); so could you give a clue, please? Thanks!

1 Like
6

I always think of the code before writing a single line!

@humano,

  • println()
    Use these in your code to examine the state of the variables.

  • noLoop()
    This is handy if you only want to run the draw() loop once.

  • References and Examples
    You can glean insight from the references and examples here:
    processing.org

It can be set before it is used.
See the reference:

:)

1 Like
7

Thank you so much for your answer. This is a draft of what I am looking for. I can make a loop for squares, but with strokes I only can think in creating a variable as If tried, It is the way to Go on?

size(1000,1000);
background(255,255,255);
noFill();
rectMode(CENTER);

strokeWeight(15);
rect(width/2, height/2, 900, 900);

strokeWeight(10);
rect(width/2, height/2, 600, 600);

strokeWeight(05);
rect(width/2, height/2, 300, 300);
8

Yes you are on the way :wink:

In this example you are doing it manually but what you want is to use a for loop as you did before. Try to identify how the square size change over the iterations and do the same for the stroke weight.

What is the link between iteration 0 and iteration 1? You go from 900 to 600 for the rect size and 15 to 10 for the stroke weight…

Then depending on the loop iteration number you can compute both properties.

Also instead of using rect(x, y, w, w) you can directly draw a square with square(x, y, w)

1 Like
9

Thanks Joseph. I can do It manually with different values but I can not do It in a loop, I try it is not right and I don’t know how to advance

size(1000,1000);
background(255,255,255);
noFill();
rectMode(CENTER);


  

for (int i = 0; i < 20; i = i + 1){
  int s = 1000 -i * 50; 
  for (int w = 0; w < 20; w = w + 1){
  strokeWeight(10-w);
  rect(width/2,height/2,s,s);
  } 
}
10

Really try to do this with a pen on paper and it will be more clear.

Otherwise if you are starting with programming, please check a tutorial on loops and how to use them :wink:

11

@humano
Are you trying to do this in setup()?

12

I know what I Want to do, that is clear. The loop for quads is working, but the loop for StrokeWeight is not and I really don’t know if it’s possible to do a loop for that or if should do It by hand

13

Yes it’s possible, here’s a little help:

What you want at each square iteration is this:

i    s       strokeWeight

0    1000    10
1     950     9
2     900     8
3     850     7
..    ..     ..
19     50    -9

For each square that you draw, you also compute the strokeWeight but is there a difference between:

for (int i = 0; i < 20; i = i + 1){

and

for (int w = 0; w < 20; w = w + 1){

?

No they do the same number of iterations just like the table I wrote at the top, there’s a single line for s and the strokeWeight.

So why using a nested for loop when you can just use a single one?

14

You are right, before reading this I have achieved something using only int I


size(1000,1000);
background(255,255,255);
noFill();
rectMode(CENTER);


  

for (int i = 0; i < 20; i = i + 1){
  int s = 1000 -i * 50; 
  strokeWeight(i);
  rect(width/2,height/2,s,s);
  
}
15

You are almost there, how do you change the strokeWeight in relation to the iteration count i?

16

With an addition, substraction or multiplicaciĂłn?

17

Why don’t you try both of them and see what happen? :yum:

1 Like
18

Multiplication does not seem a good idea! But with addition and substraction I can make the Variation growing or decreasing

1 Like