Mouse Clicked and Dragged for 2 functions

newbie_ma

Hi! I am a new user of processing and was wondering if there is a way to use mouse clicked and dragged for 2 functions? i am trying to create a coloring page wherein I have a .png image, a set of color palette and brush sizes. i can't seem to figure out how to make both color palette and brush size work together at once. Could you please help? thank you!

Chrisir

It would help to see your entire code

In theory you set the new color OR store the current color as soon as one color button is pressed

Similar with brush sizes

So you click color, you click brush size and then you draw. No drag and drop involved

newbie_ma

Hi Chrisir,

thanks for your prompt response to my query. on my code below, I have a few things that I can't seem to figure out. First problem is how to group the number of ellipse that has my different brush size. Earlier I am unable to click on the brush size palette but a few tweaks on the code I was able to click on it but it works exactly the same as my color palette. I tried it to add in on MousePressed using else but I always end up with an error. My problem is to be able to use the actual size stated on the ellipse and allow it to function same with the current / chosen color.

I'm getting crazy just trying to figure out how to change the brush size. I just learned processing 2 weeks ago and been reading the forum and trying to learn more. Thank you in advance!

// colors color BG = color(255); color Red = color(255, 0, 0); color Blue = color(0, 0, 255); color Green = color (0, 128, 0); color Purple = color(128, 0, 128); color Yellow = color(255, 255, 0); color Orange = color(255, 157, 52); color White = color(255); color Grey = color(128,128,128); color Black = color(0); color Cyan = color(0,255,255); color Magenta = color(255,0,255); color Brown = color(139,69,19); color DSkyBlue = color(0,191,255); color HotPink = color(255,105,180); color BAlmond = color(255,235,205);

color currentColor;

//Brush String a = "Brush Size";

PImage img; int pWidth = 125; int pHeight = 700;

void setup() { size(750, 650); background(BG); smooth();

img = loadImage("color4.png");

}

void draw() {

//color palette fill(#F5F5F5); rect (0, 0, pWidth, pHeight);

stroke(0); fill(Red); ellipse(20, 20, 25, 25); fill(Blue); ellipse(60, 20, 25, 25); fill(Green); ellipse(100, 20, 25, 25); fill(Purple); ellipse(20, 60, 25, 25); fill(Yellow); ellipse(60, 60, 25, 25); fill(Orange); ellipse(100, 60, 25, 25); fill(Black); ellipse(20, 100, 25, 25); fill(White); ellipse(60, 100, 25, 25); fill(Grey); ellipse(100, 100, 25, 25); fill(Cyan); ellipse(20, 140, 25, 25); fill(Magenta); ellipse(60, 140, 25, 25); fill(Brown); ellipse(100, 140, 25, 25); fill(DSkyBlue); ellipse(20, 180, 25, 25); fill(HotPink); ellipse(60, 180, 25, 25); fill(BAlmond); ellipse(100, 180, 25, 25);

//brush size/stroke fill(0); textSize(20); text(a,10, 410); ellipse(60, 425, 5,5); ellipse(60, 440, 8,8); ellipse(60, 455, 10,10); ellipse(60, 475, 15,15); ellipse(60, 500, 20,20); ellipse(60, 530, 25,25); ellipse(60, 570, 35,35); ellipse(60, 620, 45,45);

}

void chooseColor() { currentColor = get(mouseX,mouseY); }

void mousePressed(){ if (mouseX<pWidth){ if (mouseX<pHeight){ chooseColor();} } } void mouseDragged(){ fill(currentColor); noStroke(); ellipse(mouseX,mouseY, 3, 3); }

Chrisir

first you need to format your code better when posting here in the forum

Then I made it so that the sketch checks if mouseY is

• smaller than 199, then we choose a color or
• bigger, then we choose a new brush size/radius.

this looks like this

    if (mouseY<199) { 
      chooseColor(); // your function 
      println("here");
    } else {
      // mouseY is bigger
      chooseWeight();   // new function 
    }//else

The new variable radius stores this radius. I just check whether the mouseY is bigger than the position of every black circle that denotes brush sizes. I do this in the function chooseWeight().

Remark

In the long run you define an abstract button and have all your button positions x,y in an array (a list of buttons) and then when the ouse is clicked you just look the position up in the list and execute the command of the button (e.g. color or brush size).

Best, Chrisir ;-)

// colors 
color BG = color(255); 
color Red = color(255, 0, 0); 
color Blue = color(0, 0, 255); 
color Green = color (0, 128, 0); 
color Purple = color(128, 0, 128); 
color Yellow = color(255, 255, 0); 
color Orange = color(255, 157, 52); 
color White = color(255); 
color Grey = color(128, 128, 128); 
color Black = color(0); 
color Cyan = color(0, 255, 255); 
color Magenta = color(255, 0, 255); 
color Brown = color(139, 69, 19); 
color DSkyBlue = color(0, 191, 255); 
color HotPink = color(255, 105, 180); 
color BAlmond = color(255, 235, 205);

color currentColor;

//Brush
String a = "Brush Size";

PImage img; 
int pWidth = 125; 
int pHeight = 700;

float radius=1; 

void setup() { 
  size(750, 650); 
  background(BG); 
  smooth();

  img = loadImage("color4.png");
}

void draw() {

  //color palette
  fill(#F5F5F5); 
  rect (0, 0, pWidth, pHeight);

  println(mouseX+","+mouseY);

  stroke(0); 
  fill(Red); 
  ellipse(20, 20, 25, 25); 
  fill(Blue); 
  ellipse(60, 20, 25, 25); 
  fill(Green); 
  ellipse(100, 20, 25, 25); 
  fill(Purple); 
  ellipse(20, 60, 25, 25); 
  fill(Yellow); 
  ellipse(60, 60, 25, 25); 
  fill(Orange); 
  ellipse(100, 60, 25, 25); 
  fill(Black); 
  ellipse(20, 100, 25, 25); 
  fill(White); 
  ellipse(60, 100, 25, 25); 
  fill(Grey); 
  ellipse(100, 100, 25, 25); 
  fill(Cyan); 
  ellipse(20, 140, 25, 25); 
  fill(Magenta); 
  ellipse(60, 140, 25, 25); 
  fill(Brown); 
  ellipse(100, 140, 25, 25); 
  fill(DSkyBlue); 
  ellipse(20, 180, 25, 25); 
  fill(HotPink); 
  ellipse(60, 180, 25, 25); 
  fill(BAlmond); 
  ellipse(100, 180, 25, 25);

  //brush size/stroke
  fill(0); 
  textSize(20); 
  text(a, 10, 410); 
  ellipse(60, 425, 5, 5); 
  ellipse(60, 440, 8, 8); 
  ellipse(60, 455, 10, 10); 
  ellipse(60, 475, 15, 15); 
  ellipse(60, 500, 20, 20); 
  ellipse(60, 530, 25, 25); 
  ellipse(60, 570, 35, 35); 
  ellipse(60, 620, 45, 45);
}

void mousePressed() { 
  if (mouseX<pWidth) {
    //
    if (mouseY<199) { 
      chooseColor();
      println("here");
    } else {
      // mouseY is bigger
      chooseWeight();
    }//else
  }//if
} 

void chooseColor() { 
  currentColor = get(mouseX, mouseY);
}

void chooseWeight() {

  if (mouseY>413) {
    radius=1;
  } 
  if (mouseY>433) {
    radius=2;
  }
  if (mouseY>449) {
    radius=3;
  }
  if (mouseY>488) {
    radius=4;
  }
  if (mouseY>516) {
    radius=5;
  }
  if (mouseY>555) {
    radius=12;
  }
  if (mouseY>600) {
    radius=24;
  }
  //
}

void mouseDragged() { 
  // when on right side (canvas) 
  if (mouseX>pWidth) {
    //draw (using stored values)
    fill(currentColor); 
    noStroke(); 
    ellipse(mouseX, mouseY, radius, radius);
  }
}
//

Chrisir

How to post in the processing forum.

Best is to hit ctrl-t in processing first before copy paste into the forum (https://forum.processing.org).

You can edit your post (click the small gear and the 'Edit').

How to format Code:

empty line before and after the code section

select (highlight) entire code with the mouse

hit ctrl-o OR click the small C in the command bar

newbie_ma

Thank you so much Chrisir! I never thought that I could just use mouseY for the brush size alone. I thought that mouseX and mouseY needed to be coded together for each command. I will keep that in mind. I really learned something new today. Thanks again! I will also ensure to follow the steps that you provided regarding format code before posting it here. thanks again!!!

Chrisir

you are welcome!