Mouse Clicked and Dragged for 2 functions

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!

Tagged:

Answers

  • 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

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

  • edited March 2018 Answer ✓

    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);
      }
    }
    //
    
  • 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
    
  • 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!!!

  • you are welcome!

Sign In or Register to comment.