Help with a "Drawing" App

Processing Coding Questions
1

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
image.png1366×768 64.7 KB

2

one quick and dirty solution set up multiple pgraphics 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.

1 Like
3

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.

// 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!

// 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
( sorry, the cursor not show in the snap )