# Help with a "Drawing" App

**URL:** <https://discourse.processing.org/t/help-with-a-drawing-app/10688>\
**Category:** Coding Questions\
**Created:** [April 27, 2019, 3:27pm UTC](https://discourse.processing.org/t/help-with-a-drawing-app/10688 "2019-04-27T15:27:56Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 28, 2019, 1:18am UTC](https://discourse.processing.org/t/help-with-a-drawing-app/10688/3 "2019-04-28T01:18:16Z")

</div>

there is a not so nice but more easy way of slider i call  
MouseWheelPlusPlus  
and not need extra settings window as it uses console to show info.

```auto
// painter_basic_mousewheelplusplus

void setup() {
  size(300, 300);
  println("use: \n[s] for save picture\n mousewheelplusplus: press\n[r] red\n[g] green\n[b] blue\n[w] brushsize\nand turn mousewheel");
  fill(brush);
  noStroke();
  background(255);
}

void draw() {
  // drawing mode background(200,200,0);
  if ( mousePressed ) circle(mouseX, mouseY, wval);
}

// _______________________________________________ OPERATION Mouse Wheel Plus Plus
int rval, gval, bval; // drawn circle fill color RGB
color brush =color(0, 0, 0, 255);
int wval=5; // brush size
String outfile = "data/mypic.png";

void mouseWheel(MouseEvent event) { // move mouse wheel
  float e = 2*event.getCount();
  if ( keyPressed && key == 'r' ) { 
    rval += e;
    rval = constrain(rval, 0, 255);
  }  
  if ( keyPressed && key == 'g' ) { 
    gval += e;
    gval = constrain(gval, 0, 255);
  }  
  if ( keyPressed && key == 'b' ) { 
    bval += e;
    bval = constrain(bval, 0, 255);
  }  
  if ( keyPressed && key == 'w' ) { 
    wval += e;
    wval = constrain(wval, 2, width/2);
  }
  println("R "+rval+" G "+gval+" B "+bval+" brushsize "+wval);
  brush = color(rval, gval, bval);
  fill(brush);
  noStroke();
}

void keyPressed() {
  if ( key == 's' ) {
    save(outfile);
    println("saved to "+outfile);
  }
}

```

now the console feedback is a little bit poor, so i made a  
custom cursor show the brush in size and color!

```auto
// painter_basic_mousewheelplusplus 
// V0.2 with cursorimage ( brush color and size )

int rval, gval, bval; // drawn circle fill color RGB
color brush =color(0, 0, 0, 100);
int wval=5; // brush size
String outfile = "data/mypic.png";
PImage mycursor;
int csize = 30;

// _______________________________________________ SETUP
void setup() {
  size(300, 300);
  println("use mouse LEFT press for paint, RIGHT press for erase");
  println("use key: \n[s] for save picture\n mousewheelplusplus: press\n[r] red\n[g] green\n[b] blue\n[w] brush size\nand turn mousewheel");
  colorMode(RGB, 100);
  fill(brush);
  noStroke();
  background(100);
  mycursor = createImage(csize, csize, ARGB);
  set_cursor();
}

// _______________________________________________ DRAW
void draw() { // drawing mode background(200,200,0);
  if ( mousePressed ) {
    if ( mouseButton == LEFT ) fill(brush);
    else if ( mouseButton == RIGHT ) fill(100);
    circle(mouseX, mouseY, wval);
  }
}

// _______________________________________________ OPERATION Mouse Wheel Plus Plus
void mouseWheel(MouseEvent event) { // move mouse wheel
  float e = event.getCount();
  if ( keyPressed && key == 'r' ) rval += e;
  if ( keyPressed && key == 'g' ) gval += e;
  if ( keyPressed && key == 'b' ) bval += e; 
  if ( keyPressed && key == 'w' ) wval += e;
  rval = constrain(rval, 0, 100);
  gval = constrain(gval, 0, 100);
  bval = constrain(bval, 0, 100);
  wval = constrain(wval, 1, 30);
  println("R "+rval+" G "+gval+" B "+bval+" brushsize "+wval);
  brush = color(rval, gval, bval);
  fill(brush);
  noStroke();
  set_cursor();
}

void keyPressed() {
  if ( key == 's' ) {
    save(outfile);
    println("saved to "+outfile);
  }
}

void set_cursor() {
  for ( int i = 0; i<mycursor.width; i++ ) for ( int j = 0; j<mycursor.height; j++) mycursor.set(i, j, color(0, 0, 0, 0)); // set cursor transparent
  for ( int i = 0; i<wval; i++ ) for ( int j = 0; j<wval; j++) mycursor.set(i, j, color(rval, gval, bval, 100)); // show brush color and size
  cursor(mycursor, 0, 0);
}

```

![SNAG-0094](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0924603cc272e759ba65dd12b3179070197ae4ce.jpeg)  
( sorry, the cursor not show in the snap )

---

_[View the full topic](https://discourse.processing.org/t/help-with-a-drawing-app/10688)._