# StrokeWeight growing with loop

**URL:** https://discourse.processing.org/t/strokeweight-growing-with-loop/34042
**Category:** Coding Questions
**Created:** [December 10, 2021, 7:11pm UTC](https://discourse.processing.org/t/strokeweight-growing-with-loop/34042 "2021-12-10T19:11:32Z")
**Posts on this page:** 18
**Page:** 1

<div class="post-metadata">

### Author: ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)
#### Post date: [December 10, 2021, 7:11pm UTC](https://discourse.processing.org/t/strokeweight-growing-with-loop/34042/1 "2021-12-10T19:11:32Z")

</div>

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!

```auto
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);
}

  

```

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [December 10, 2021, 10:07pm UTC](https://discourse.processing.org/t/strokeweight-growing-with-loop/34042/2 "2021-12-10T22:07:48Z")

</div>

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:

```auto
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:

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

```

but at the end it’s `strokeWeight(10)` that takes the priority! 😉

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

---

<div class="post-metadata">

### Author: ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)
#### Post date: [December 11, 2021, 3:57am UTC](https://discourse.processing.org/t/strokeweight-growing-with-loop/34042/3 "2021-12-11T03:57:10Z")

</div>

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

```auto
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);
} 
}

  

```

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [December 11, 2021, 12:24pm UTC](https://discourse.processing.org/t/strokeweight-growing-with-loop/34042/4 "2021-12-11T12:24:07Z")

</div>

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:

```auto
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 😉

---

<div class="post-metadata">

### Author: ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)
#### Post date: [December 11, 2021, 2:26pm UTC](https://discourse.processing.org/t/strokeweight-growing-with-loop/34042/5 "2021-12-11T14:26:17Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [December 11, 2021, 8:58pm UTC](https://discourse.processing.org/t/strokeweight-growing-with-loop/34042/6 "2021-12-11T20:58:19Z")

</div>

> [@josephh](#):
>
> try to check on paper or in your head what it’s going to do step by step

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](http://processing.org)

> [@humano](#):
>
> because StrokeWeight It something that is not inside of rect(width/2,height/2,s,s);

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

> **[strokeWeight() / Reference](https://processing.org/reference/strokeWeight_.html)**
>
> Sets the width of the stroke used for lines, points, and the border around shapes. All widths are set in units of pixels. Using point() with strokeWeight(1) or smaller may draw nothing to …

`:)`

---

<div class="post-metadata">

### Author: ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)
#### Post date: [December 12, 2021, 4:08pm UTC](https://discourse.processing.org/t/strokeweight-growing-with-loop/34042/7 "2021-12-12T16:08:54Z")

</div>

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?

```auto
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);
  

  

```

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [December 12, 2021, 7:59pm UTC](https://discourse.processing.org/t/strokeweight-growing-with-loop/34042/8 "2021-12-12T19:59:58Z")

</div>

Yes you are on the way 😉

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)`](https://processing.org/reference/square_.html)

---

<div class="post-metadata">

### Author: ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)
#### Post date: [December 12, 2021, 9:56pm UTC](https://discourse.processing.org/t/strokeweight-growing-with-loop/34042/9 "2021-12-12T21:56:58Z")

</div>

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

```auto
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);
  } 
}

  

```

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [December 13, 2021, 8:20pm UTC](https://discourse.processing.org/t/strokeweight-growing-with-loop/34042/10 "2021-12-13T20:20:58Z")

</div>

> [@josephh](#):
>
> Try to identify how the square size change over the iterations and do the same for the stroke weight.

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 😉

---

<div class="post-metadata">

### Author: ![shedMusic](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/shedmusic/32/601_2.png) [@shedMusic](https://discourse.processing.org/u/shedMusic)
#### Post date: [December 13, 2021, 9:03pm UTC](https://discourse.processing.org/t/strokeweight-growing-with-loop/34042/11 "2021-12-13T21:03:52Z")

</div>

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

---

<div class="post-metadata">

### Author: ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)
#### Post date: [December 13, 2021, 9:35pm UTC](https://discourse.processing.org/t/strokeweight-growing-with-loop/34042/12 "2021-12-13T21:35:03Z")

</div>

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

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [December 13, 2021, 9:43pm UTC](https://discourse.processing.org/t/strokeweight-growing-with-loop/34042/13 "2021-12-13T21:43:28Z")

</div>

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

What you want at each square iteration is this:

```auto
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:

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

```

and

```auto
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?

---

<div class="post-metadata">

### Author: ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)
#### Post date: [December 13, 2021, 9:57pm UTC](https://discourse.processing.org/t/strokeweight-growing-with-loop/34042/14 "2021-12-13T21:57:13Z")

</div>

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

```auto

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

```

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [December 13, 2021, 9:58pm UTC](https://discourse.processing.org/t/strokeweight-growing-with-loop/34042/15 "2021-12-13T21:58:45Z")

</div>

> [@humano](#):
>
> `strokeWeight(i);`

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

---

<div class="post-metadata">

### Author: ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)
#### Post date: [December 13, 2021, 10:38pm UTC](https://discourse.processing.org/t/strokeweight-growing-with-loop/34042/16 "2021-12-13T22:38:34Z")

</div>

With an addition, substraction or multiplicación?

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [December 13, 2021, 10:58pm UTC](https://discourse.processing.org/t/strokeweight-growing-with-loop/34042/17 "2021-12-13T22:58:19Z")

</div>

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

---

<div class="post-metadata">

### Author: ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)
#### Post date: [December 14, 2021, 10:07pm UTC](https://discourse.processing.org/t/strokeweight-growing-with-loop/34042/18 "2021-12-14T22:07:01Z")

</div>

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