Changing strokeweight / radius when mousePressed

Processing Coding Questions
#1

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

#2

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.

1 Like
#3

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.

#4

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.

#5

What is the command for brush size?

#6

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

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):

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:

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


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


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");
  }
}
//
2 Likes
#7

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

links stolen from glv 's posts :smile:

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.

1 Like
#8

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

#9

Try doing noStroke();

#10

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

2 Likes
#11

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

#12

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.

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:

:)

2 Likes
#13

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

Chrisir

2 Likes
#14

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

It is important to be perspicuous in our communication. < I just like to used that word whenever I get the chance!

:)

1 Like