# 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:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![l1osar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/l1osar/32/4848_2.png) [@l1osar](https://discourse.processing.org/u/l1osar)\
**Post date:** [April 27, 2019, 3:27pm UTC](https://discourse.processing.org/t/help-with-a-drawing-app/10688/1 "2019-04-27T15:27:56Z")

</div>

Hello! I’m learnig processing, so I had the idea of creating an app to work like paint or Ilustrator. I figured out a lot of stuff, but couldn’t realize how to “save” the current drawing.

I want to create a different screen to select colors and stuff, so the GUI doesn’t look so “dirty”. But I can’t find a way to not lose what is in the drawing screen already. Because, for what I understand of the problem, I should use background() to create the “other screen”, but it will delete my drawing.

Does anyone have worked with something related or just happen to know a way to help me or give me a direction? Thanks so much in advance!

P.S.: the screenshot is just how the app looks rn.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/fbff7fab2a0abe3adef87b0ab16bf7f1ac7a3b94.png)

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [April 27, 2019, 3:33pm UTC](https://discourse.processing.org/t/help-with-a-drawing-app/10688/2 "2019-04-27T15:33:33Z")

</div>

one quick and dirty solution set up multiple [pgraphics](https://processing.org/reference/PGraphics.html) one for the drawing canvas, one for the color selector (if that’s what you mean) and another for your controls and draw what is needed with a state var.

---

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