# Changing strokeweight / radius when mousePressed

**URL:** <https://discourse.processing.org/t/changing-strokeweight-radius-when-mousepressed/22871>\
**Category:** Coding Questions\
**Created:** [July 28, 2020, 2:51am UTC](https://discourse.processing.org/t/changing-strokeweight-radius-when-mousepressed/22871 "2020-07-28T02:51:35Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![karate29](https://avatars.discourse-cdn.com/v4/letter/k/9fc348/32.png) [@karate29](https://discourse.processing.org/u/karate29)\
**Post date:** [July 28, 2020, 2:51am UTC](https://discourse.processing.org/t/changing-strokeweight-radius-when-mousepressed/22871/1 "2020-07-28T02:51:35Z")

</div>

I am trying to create a free hand drawing program. I already made the colors and when you press them it changes the color and you can draw with the selected color. The problem I am coming across is I want the user to be able to change the strokeWeight. I used the same process I did while changing the color but there is no difference.

Here is my code:

int strokeWeight = (1);  
color drawcolor = color(0, 0, 0);  
void setup() {  
size(1000, 500);  
background(255,255,255);  
}

void draw() {  
stroke(0,0,0);  
// thickness  
textSize(20);  
text(“Choose Thickness”, 10, 435);  
fill(0,0,0);  
circle(20,450,5);  
fill(0,0,0);  
circle(40,452,10);  
fill(0,0,0);  
circle(70,456,20);  
fill(0,0,0);  
circle(110,460,30);  
fill(0,0,0);  
circle(160,465,40);  
fill(0,0,0);  
circle(220,469,50);  
//draw  
fill(255,0,0);  
circle(50,50,50);  
fill(255,128,0);  
circle(150,50,50);  
fill(255,255,0);  
circle(250,50,50);  
fill(0,255,0);  
circle(350,50,50);  
fill(0,64,128);  
circle(450,50,50);  
fill(128,0,255);  
circle(550,50,50);  
fill(255,23,139);  
circle(650,50,50);  
fill(0,0,0);  
circle(750,50,50);  
fill(128,64,0);  
circle(850,50,50);  
fill(255,255,255);  
circle(950,50,50);  
fill(drawcolor);  
stroke(drawcolor);  
if (mousePressed == true && mouseY \> 100)  
circle(mouseX, mouseY, strokeWeight);  
}

void mouseClicked() {

// commands for draw  
if (mouseX \>= 50 && mouseX \<= 100 && mouseY \>= 50 && mouseY \<= 100)  
drawcolor = color(255,0,0);  
if (mouseX \>= 150 && mouseX \<= 200 && mouseY \>= 50 && mouseY \<= 200)  
drawcolor = color(255,128,0);  
if (mouseX \>= 250 && mouseX \<= 300 && mouseY \>= 50 && mouseY \<= 300)  
drawcolor = color(255,255,0);  
if (mouseX \>= 350 && mouseX \<= 400 && mouseY \>= 50 && mouseY \<= 400)  
drawcolor = color(0,255,0);  
if (mouseX \>= 450 && mouseX \<= 500 && mouseY \>= 50 && mouseY \<= 500)  
drawcolor = color(0,64,128);  
if (mouseX \>= 550 && mouseX \<= 600 && mouseY \>= 50 && mouseY \<= 600)  
drawcolor = color(128,0,255);  
if (mouseX \>= 650 && mouseX \<= 700 && mouseY \>= 50 && mouseY \<= 700)  
drawcolor = color(255,23,139);  
if (mouseX \>= 750 && mouseX \<= 800 && mouseY \>= 50 && mouseY \<= 800)  
drawcolor = color(0,0,0);  
if (mouseX \>= 850 && mouseX \<= 900 && mouseY \>= 50 && mouseY \<= 900)  
drawcolor = color(128,64,0);  
if (mouseX \>= 950 && mouseX \<= 1000 && mouseY \>= 50 && mouseY \<= 1000)  
drawcolor = color(255,255,255);  
//commands for thickness  
if (mouseX \>=20 && mouseX \<= 25 && mouseY \>= 450 && mouseY \<=25)  
strokeWeight(5);  
if (mouseX \>=40 && mouseX \<= 50 && mouseY \>= 452 && mouseY \<=50)  
strokeWeight(10);  
if (mouseX \>=70 && mouseX \<= 90 && mouseY \>= 456 && mouseY \<=90)  
strokeWeight(20);  
if (mouseX \>=110 && mouseX \<= 140 && mouseY \>= 460 && mouseY \<=140)  
strokeWeight(30);  
if (mouseX \>=160 && mouseX \<= 200 && mouseY \>= 465 && mouseY \<=200)  
strokeWeight(40);  
if (mouseX \>=220 && mouseX \<= 270 && mouseY \>= 469 && mouseY \<=270)  
strokeWeight(50);  
}

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 28, 2020, 3:14am UTC](https://discourse.processing.org/t/changing-strokeweight-radius-when-mousepressed/22871/2 "2020-07-28T03:14:49Z")

</div>

> [@karate29](#):
>
> strokeWeight(50);

This command would be strokeWeight = 50; in your code since you use this variable as a parameter for the circle radius.

strokeWeight(50); sets the weight for the outline of the circle which has the same color like the fill color of your circle, so it’s not really visible.

You could separate the radius and the Outline weight.

---

<div class="post-metadata">

**Author:** ![karate29](https://avatars.discourse-cdn.com/v4/letter/k/9fc348/32.png) [@karate29](https://discourse.processing.org/u/karate29)\
**Post date:** [July 28, 2020, 3:51am UTC](https://discourse.processing.org/t/changing-strokeweight-radius-when-mousepressed/22871/3 "2020-07-28T03:51:02Z")

</div>

I am really sorry but I am so lost. To be honest I have know idea what that means because I changed it to  
if (mouseX \>=220 && mouseX \<= 270 && mouseY \>= 469 && mouseY \<=270)  
strokeWeight = 50;  
but there was no difference.

---

<div class="post-metadata">

**Author:** ![Spaceman1](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/spaceman1/32/9970_2.png) [@Spaceman1](https://discourse.processing.org/u/Spaceman1)\
**Post date:** [July 28, 2020, 4:08am UTC](https://discourse.processing.org/t/changing-strokeweight-radius-when-mousepressed/22871/4 "2020-07-28T04:08:12Z")

</div>

I’m think you want to change the size of the brush, not the strokeWeight. strokeWeight refers to the outline of the shape so by increasing it you aren’t really doing anything. What you really want to do is change the variable that represents the size of your circle.

---

<div class="post-metadata">

**Author:** ![karate29](https://avatars.discourse-cdn.com/v4/letter/k/9fc348/32.png) [@karate29](https://discourse.processing.org/u/karate29)\
**Post date:** [July 28, 2020, 4:10am UTC](https://discourse.processing.org/t/changing-strokeweight-radius-when-mousepressed/22871/5 "2020-07-28T04:10:32Z")

</div>

What is the command for brush size?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 28, 2020, 8:11am UTC](https://discourse.processing.org/t/changing-strokeweight-radius-when-mousepressed/22871/6 "2020-07-28T08:11:50Z")

</div>

Hello,

here is the running version

You had a lot of wrong ifs (all of them almost). I only corrected a few (especially with the color buttons you need to adjust the first x-value still).

for example

```auto
if (mouseX >= 50 && mouseX <= 100 && mouseY >= 50 && mouseY <= 100)
drawcolor = color(255,0,0);

```

for a circle drawn at 50,50.

This is wrong, because a circle drawn at 50,50 has its center at 50,50, therefore the if clause is (button has a radius of 50, so check against `x-position minus radius`, same for `y-position - radius`):

```auto
if (mouseX >= 0 && mouseX <= 100 && mouseY >= 0 && mouseY <= 100)
drawcolor = color(255,0,0);

```

same for strokeWeight/Radius buttons.

**The last y-value**

Also, where you check the color buttons, the last y value goes up to 1000:

```auto
if (mouseX >= 950 && mouseX <= 1000 && mouseY >= 50 && mouseY <= 1000)
drawcolor = color(255,255,255);

```

This is not necessary: all color buttons have the same y values, only the x is different.

So don’t increase the last y-value

```auto

if (mouseX >= 900 && mouseX <= 1000 && mouseY >= 0 && mouseY <= 100)
drawcolor = color(255,255,255);

```

**println**

You can use println, for example `println("66");` to find out if a if-clause is executed.  
I did this in the Radius Buttons.

**Remark**

I also renamed your misleading strokeWeight to myCircleRadius.

Chrisir

**Full Sketch**

```auto

int myCircleRadius = 1;
color drawcolor = color(0, 0, 0);

void setup() {
  size(1000, 500);
  background(255, 255, 255);
}

void draw() {

  stroke(0, 0, 0);

  // thickness
  textSize(20);
  text("Choose Thickness", 
    10, 435);
  fill(0, 0, 0);
  ellipse(20, 450, 5, 5);
  fill(0, 0, 0);
  ellipse(40, 452, 10, 10);
  fill(0, 0, 0);
  ellipse(70, 456, 20, 20);
  fill(0, 0, 0);
  ellipse(110, 460, 30, 30);
  fill(0, 0, 0);
  ellipse(160, 465, 40, 40);
  fill(0, 0, 0);
  ellipse(220, 469, 50, 50);

  //draw
  fill(255, 0, 0);
  ellipse(50, 50, 50, 50);
  fill(255, 128, 0);
  ellipse(150, 50, 50, 50);
  fill(255, 255, 0);
  ellipse(250, 50, 50, 50);
  fill(0, 255, 0);
  ellipse(350, 50, 50, 50);
  fill(0, 64, 128);
  ellipse(450, 50, 50, 50);
  fill(128, 0, 255);
  ellipse(550, 50, 50, 50);
  fill(255, 23, 139);
  ellipse(650, 50, 50, 50);
  fill(0, 0, 0);
  ellipse(750, 50, 50, 50);
  fill(128, 64, 0);
  ellipse(850, 50, 50, 50);
  fill(255, 255, 255);
  ellipse(950, 50, 50, 50);

  fill(drawcolor);
  strokeWeight(1); 
  stroke(0);

  if (mousePressed &&
    mouseY > 100 &&
    mouseY < height-112)
    ellipse(mouseX, mouseY, 
      myCircleRadius, myCircleRadius);
  //
}

void mouseClicked() {

  // commands for draw
  if (mouseX >= 5 && mouseX <= 100 && mouseY >= 5 && mouseY <= 200)
    drawcolor = color(255, 0, 0);
  if (mouseX >= 150 && mouseX <= 200 && mouseY >= 5 && mouseY <= 200)
    drawcolor = color(255, 128, 0);
  if (mouseX >= 250 && mouseX <= 300 && mouseY >= 5 && mouseY <= 200)
    drawcolor = color(255, 255, 0);
  if (mouseX >= 350 && mouseX <= 400 && mouseY >= 5 && mouseY <= 200)
    drawcolor = color(0, 255, 0);
  if (mouseX >= 450 && mouseX <= 500 && mouseY >= 5 && mouseY <= 200)
    drawcolor = color(0, 64, 128);
  if (mouseX >= 550 && mouseX <= 600 && mouseY >= 5 && mouseY <= 200)
    drawcolor = color(128, 0, 255);
  if (mouseX >= 650 && mouseX <= 700 && mouseY >= 5 && mouseY <= 200)
    drawcolor = color(255, 23, 139);
  if (mouseX >= 750 && mouseX <= 800 && mouseY >= 5 && mouseY <= 200)
    drawcolor = color(0, 0, 0);
  if (mouseX >= 850 && mouseX <= 900 && mouseY >= 5 && mouseY <= 200)
    drawcolor = color(128, 64, 0);
  if (mouseX >= 950 && mouseX <= 1000 && mouseY >= 5 && mouseY <= 200)
    drawcolor = color(255, 255, 255);

  //commands for thickness
  if (mouseX >=2 && mouseX <= 25 && mouseY >= 302 && mouseY <=655) {
    myCircleRadius=5;
    println("here1");
  }
  if (mouseX >=30 && mouseX <= 50 && mouseY >= 302 )
    myCircleRadius=10;
  if (mouseX >=53 && mouseX <= 90 && mouseY >= 302 )
    myCircleRadius=20;
  if (mouseX >=100 && mouseX <= 140 && mouseY >= 302 )
    myCircleRadius=30;
  if (mouseX >=143 && mouseX <= 200 && mouseY >= 302 )
    myCircleRadius=40;
  if (mouseX >=201 && mouseX <= 270 && mouseY >= 302 ) {
    myCircleRadius=50;
    println("66");
  }
}
//

```

---

<div class="post-metadata">

**Author:** ![qewer3322](https://avatars.discourse-cdn.com/v4/letter/q/e19adc/32.png) [@qewer3322](https://discourse.processing.org/u/qewer3322)\
**Post date:** [July 28, 2020, 8:29am UTC](https://discourse.processing.org/t/changing-strokeweight-radius-when-mousepressed/22871/7 "2020-07-28T08:29:03Z")

</div>

It seems like you are pretty lost here so I’ll suggest you look at these:

links stolen from glv 's posts 😄

- The Processing _website_ has references, examples, tutorials, etc.  
[https://processing.org/](https://processing.org/)
- The Processing PDE (IDE) has lots to offer!  
An exploration of the tabs will reveal what is available; libraries, tools and local examples there.
- The Coding Train  
[https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1\_aw](https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw)  
[https://thecodingtrain.com/](https://thecodingtrain.com/)
- Happy Coding  
[Processing Tutorials - Happy Coding](https://happycoding.io/tutorials/processing/)
- The source code can give insight if you are adventurous:  
[GitHub - processing/processing: Source code for the Processing Core and Development Environment (PDE)](https://github.com/processing/processing)  
Many of the Processing functions are here:  
[https://github.com/processing/processing/blob/master/core/src/processing/core/PApplet.java](https://github.com/processing/processing/blob/master/core/src/processing/core/PApplet.java)
- The Processing Foundation  
[https://processingfoundation.org/](https://processingfoundation.org/)  
Check out the tabs.  
In the education tab, there is a reference to the Coding Train.
- And the Internet. `:)`

Also if you have more specific questions you can search with google in this format:  
“processing (insert your question/problem/error message)”

Esspecially take a look at Coding Train’s processing playlist on youtube, it will help you a lot.

---

<div class="post-metadata">

**Author:** ![karate29](https://avatars.discourse-cdn.com/v4/letter/k/9fc348/32.png) [@karate29](https://discourse.processing.org/u/karate29)\
**Post date:** [July 28, 2020, 7:07pm UTC](https://discourse.processing.org/t/changing-strokeweight-radius-when-mousepressed/22871/8 "2020-07-28T19:07:33Z")

</div>

Oh, ok. That makes a lot more sense on how to change the thickness. Thank you. However, I was hoping the outline would be the same drawing color. So, I defined stroke as a variable and tried to do the same thing as the drawcolor, but it changed the border from black to white.

void mouseClicked() {

// commands for draw  
if (mouseX \>= 5 && mouseX \<= 100 && mouseY \>= 5 && mouseY \<= 200)  
drawcolor = color(255, 0, 0);  
stroke = color(255,0,0);  
if (mouseX \>= 150 && mouseX \<= 200 && mouseY \>= 5 && mouseY \<= 200)  
drawcolor = color(255, 128, 0);  
stroke = color(255,128,0);  
if (mouseX \>= 250 && mouseX \<= 300 && mouseY \>= 5 && mouseY \<= 200)  
drawcolor = color(255, 255, 0);  
stroke = color(255, 255, 0);  
if (mouseX \>= 350 && mouseX \<= 400 && mouseY \>= 5 && mouseY \<= 200)  
drawcolor = color(0, 255, 0);  
stroke = color(0, 255, 0);  
if (mouseX \>= 450 && mouseX \<= 500 && mouseY \>= 5 && mouseY \<= 200)  
drawcolor = color(0, 64, 128);  
stroke = color(0, 64, 128);  
if (mouseX \>= 550 && mouseX \<= 600 && mouseY \>= 5 && mouseY \<= 200)  
drawcolor = color(128, 0, 255);  
stroke = color(128, 0, 255);  
if (mouseX \>= 650 && mouseX \<= 700 && mouseY \>= 5 && mouseY \<= 200)  
drawcolor = color(255, 23, 139);  
stroke = color(255, 23, 139);  
if (mouseX \>= 750 && mouseX \<= 800 && mouseY \>= 5 && mouseY \<= 200)  
drawcolor = color(0, 0, 0);  
stroke = color(0, 0, 0);  
if (mouseX \>= 850 && mouseX \<= 900 && mouseY \>= 5 && mouseY \<= 200)  
drawcolor = color(128, 64, 0);  
stroke = color(128, 64, 0);  
if (mouseX \>= 950 && mouseX \<= 1000 && mouseY \>= 5 && mouseY \<= 200)  
drawcolor = color(255, 255, 255);  
stroke = color(255, 255, 255);

---

<div class="post-metadata">

**Author:** ![qewer3322](https://avatars.discourse-cdn.com/v4/letter/q/e19adc/32.png) [@qewer3322](https://discourse.processing.org/u/qewer3322)\
**Post date:** [July 28, 2020, 7:40pm UTC](https://discourse.processing.org/t/changing-strokeweight-radius-when-mousepressed/22871/9 "2020-07-28T19:40:53Z")

</div>

Try doing noStroke();

---

<div class="post-metadata">

**Author:** ![karate29](https://avatars.discourse-cdn.com/v4/letter/k/9fc348/32.png) [@karate29](https://discourse.processing.org/u/karate29)\
**Post date:** [July 28, 2020, 8:22pm UTC](https://discourse.processing.org/t/changing-strokeweight-radius-when-mousepressed/22871/10 "2020-07-28T20:22:17Z")

</div>

Thank you so much. That worked. Ya’ll are awesome!

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 29, 2020, 11:32pm UTC](https://discourse.processing.org/t/changing-strokeweight-radius-when-mousepressed/22871/11 "2020-07-29T23:32:16Z")

</div>

> [@qewer3322](#):
>
> An exploration of the tabs will reveal what is available;

Probably he meant menus not tabs

I mean people tend to know these resources and this is not always helpful with the concrete issues that they have

---

<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:** [July 31, 2020, 11:52am UTC](https://discourse.processing.org/t/changing-strokeweight-radius-when-mousepressed/22871/12 "2020-07-31T11:52:01Z")

</div>

> [@qewer3322](#):
>
> It seems like you are pretty lost here so I’ll suggest you look at these

Keep on sharing! It benefits the community as a whole. Not everyone is aware of these and the more we empower people the better. I use them all the time.

> [@Chrisir](#):
>
> I mean people tend to know these resources is not helpful with the concrete issues that they have

Sharing the Processing resources (and others) is always a positive contribution to any discussion.  
I personally use them on a regular basis and often glean new insights.  
I will continue to share them and let the people decide on their merit.

One of the best tools in a programmers tool chest is knowing the resources available to you and learning to navigate, filter and use them.

This is a very short list:

> **Resources \< Click here to expand !**
>
> I encourage you to review the resources available here:
> 
> - The Processing _website_ has references, examples, tutorials, links to resources, etc.  
> [https://processing.org/](https://processing.org/)
> - The Processing PDE (IDE) has lots to offer!  
> An exploration of the tabs will reveal what is available; libraries, tools and local examples there.
> - The Coding Train  
> [https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1\_aw](https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw)  
> [https://thecodingtrain.com/](https://thecodingtrain.com/)
> - Happy Coding  
> [Processing Tutorials - Happy Coding](https://happycoding.io/tutorials/processing/)
> - The source code can give insight if you are adventurous:  
> [GitHub - processing/processing: Source code for the Processing Core and Development Environment (PDE)](https://github.com/processing/processing)  
> Many of the Processing functions are here:  
> [processing/core/src/processing/core/PApplet.java at master · processing/processing · GitHub](https://github.com/processing/processing/blob/master/core/src/processing/core/PApplet.java)
> - The Processing Foundation  
> [https://processingfoundation.org/](https://processingfoundation.org/)  
> Check out the tabs.  
> In the education tab, there is a reference to the Coding Train.
> - And the Internet. `:)`

`:)`

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 31, 2020, 1:50pm UTC](https://discourse.processing.org/t/changing-strokeweight-radius-when-mousepressed/22871/13 "2020-07-31T13:50:30Z")

</div>

> [@glv](#):
>
> I personally use them on a regular basis and often glean new insights.  
> I will continue to share them and let the people decide on their merit.

I fully approve! And I know you often provide additionally information that is also valuable! So, thank you! 😉

Chrisir

---

<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:** [August 2, 2020, 12:40pm UTC](https://discourse.processing.org/t/changing-strokeweight-radius-when-mousepressed/22871/14 "2020-08-02T12:40:32Z")

</div>

> [@Chrisir](#):
>
> Probably he meant menus not tabs

I have updated my resource links for future posts.

I used “menu bar” along with other edits.

This site had a nice dictionary:  
[Computer Hope](https://www.computerhope.com/jargon/m/menubar.htm)

It is important to be [perspicuous](https://www.google.com/search?q=perspicuous&rlz=1C1CHBF_enCA822CA822&oq=perspicuous&aqs=chrome..69i57.3566j0j7&sourceid=chrome&ie=UTF-8) in our communication. \< I just like to used that word whenever I get the chance!

`:)`