› › ›

How to make a "brush" object that follows the mouse with size and color parameters?

the_metal_bugthe_metal_bug
edited January 2017 in Questions about Code

I have been watching a lot of Dan's videos on Processing and p5.js, and I have recently been working on a kind of doodle sketch program where you can draw things and then save them as images in Processing. I have most of it done already, but there is a feature that I would like to add but I'm not sure how to. Basically what I would like to do is have a "brush" object follow the mouse so that you can see things such as the color of the brush or the size of the brush before actually drawing anything, because as of right now you don't really have any other way to know than to draw something. I have limited knowledge of js, and even more limited knowledge of Processing, or any other OOP language, such as Java itself, so I don't have a clue as to how to actually make said "brush" object.

This is the code:

color rgb;
int R, G, B = 0;
int SW = 1;
int count = 1;

void setup() {
  size(1000, 1000);
  background(255);
  strokeWeight(SW);
}
void keyPressed() {
  //Backspace "clears" canvas
  if (keyCode == 8) {          
    noStroke();
    fill(255);
    rect(0, 0, width, height);
  }
         if (keyCode == 38)           {SW += 1; strokeWeight(SW);}   //Increases stroke weight by 1
    else if (keyCode == 40 && SW > 1) {SW -= 1; strokeWeight(SW);}   //Decreases stroke weight by 1 if > 1

  //Color control
         if (keyCode == 155 && R < 255) {R+=1; rgb = color(R,G,B);}  //Increases red   value if < 255
    else if (keyCode == 127 && R > 0)   {R-=1; rgb = color(R,G,B);}  //Decreases red   value if > 0
         if (keyCode == 36  && G < 255) {G+=1; rgb = color(R,G,B);}  //Increases green value if < 255
    else if (keyCode == 35  && G > 0)   {G-=1; rgb = color(R,G,B);}  //Decreases green value if > 0
         if (keyCode == 33  && B < 255) {B+=1; rgb = color(R,G,B);}  //Increases blue  value if < 255
    else if (keyCode == 34  && B > 0)   {B-=1; rgb = color(R,G,B);}  //Decreases blue  value if > 0

  //Color "presets"
         if (keyCode == 48){R = 255; G = 255; B = 255; rgb = color(R,G,B);}  //White
         if (keyCode == 49){R = 0;   G = 0;   B = 0;   rgb = color(R,G,B);}  //Black
         if (keyCode == 50){R = 255; G = 0;   B = 0;   rgb = color(R,G,B);}  //Red
         if (keyCode == 51){R = 0;   G = 255; B = 0;   rgb = color(R,G,B);}  //Green
         if (keyCode == 52){R = 0;   G = 0;   B = 255; rgb = color(R,G,B);}  //Blue
         if (keyCode == 53){R = 255; G = 127; B = 0;   rgb = color(R,G,B);}  //Orange
         if (keyCode == 54){R = 255; G = 255; B = 0;   rgb = color(R,G,B);}  //Yellow
         if (keyCode == 55){R = 0;   G = 255; B = 255; rgb = color(R,G,B);}  //Cyan
         if (keyCode == 56){R = 255; G = 0;   B = 255; rgb = color(R,G,B);}  //Magenta
         if (keyCode == 57){R = 127; G = 0;   B = 255; rgb = color(R,G,B);}  //Purple
  //End color control

     //Save with "S"
     if (keyCode == 83){
       save("Sketch_"+count+".jpg");
       count++;
     }

     println("rgb("+R+","+G+","+B+")");
}
void draw() {
  stroke(rgb);

  //Draws a line with mouse
  if (mousePressed == true) {                 
    line(pmouseX, pmouseY, mouseX, mouseY);
  }
}

Thanks in advance.

Tagged:

Best Answer

Answers

  • Lord_of_the_GalaxyLord_of_the_Galaxy
    edited January 2017

    Yikes! Your code is scary looking.
    Just draw the tip of your brush, simple.
    Use point(mouseX, mouseY);.
    And use a buffer ArrayList to keep track of points.

  • shiffmanshiffman
    Answer ✓

    This is a common problem in a lot of programs -- you want some elements that draw trails (the drawing) and some that do not (the brush). I would suggest investigation createGraphics() -- you can have the drawn elements there while "showing" the brush only on the main canvas. The separate offscreen graphics object then becomes the background. You'll also need to add some mouse interaction probably (draw only when clicked etc.) I realize this is confusing, it's a great topic for a video tutorial actually.

  • the_metal_bugthe_metal_bug

    I will certainly look in to that when I get a chance. If I'm understanding what you're saying correctly, then it will be exactly what I'm thinking of. If you make a video about it that would be really interesting and helpful. Thanks!

  • jeremydouglassjeremydouglass
    edited January 2017

    @the_metal_bug --

    Here are two ways of approaching your problem.

    1. PGraphics

      As Dan Shiffman pointed out, in general you may want to draw things that persist (the drawing layer) and that are updated each frame (the icon / marker). You can adapt the official PGraphics example sketch from the reference and using a simple line from the continuous lines example:

      Like this:

      PGraphics pg;
void setup() {
  size(100, 100);
  pg = createGraphics(100, 100);
}
void draw() {
  background(192);
  // draw brush stroke
  if(mousePressed){
    pg.beginDraw();
    pg.stroke(0);
    pg.strokeWeight(2);
    pg.line(pmouseX, pmouseY, mouseX, mouseY);
    pg.endDraw();
  }
  image(pg, 0, 0);
  // draw brush marker
  rect(mouseX-5,mouseY-5,10,10);
}

    2. cursor()

      Specifically, you may simply to want to change the mouse pointer into a special "brush" icon. There is already a function for this in Processing: cursor() (which can take use a pre-set icon or can take an image as an argument). Here is the continuous lines example again, this time with a cursor call added.

      Like this:

      PImage img;
void setup() {
  img = loadImage("https:" + "//processing.org/img/processing3-logo.png");
  img.resize(32,32);
  cursor(img);
}

void draw() {
  if (mousePressed == true) {
    line(mouseX, mouseY, pmouseX, pmouseY);
  }
}

    You can also combine the two methods -- draw the brush using any Processing drawing techniques into a PGraphics pgcursor, then load it into the mouse cursor with cursor(pgcursor).

  • Lord_of_the_GalaxyLord_of_the_Galaxy

    Of course. Should have thought of that.

  • Lord_of_the_GalaxyLord_of_the_Galaxy

    Oh, I didn't realise it was the Shiffman who answered this question, as in the same guy who wrote Nature of Code. Cool.

Sign In or Register to comment.