The thing what I want to make is similar to paint program. The problem is when I draw some lines(Not just lines. Whole things I drew are included in this case.), those lines only drawn back of a image I put in before I draw that.

At first, I thought it was just problem of code's order. But it wasn't.

I just want draw some lines on the image like paint program. Like this:enter image description here

1 Answers

1
George Profenza On Best Solutions

You can paint into a separate "layer" using PGraphics. Once you initialise an instance you can use the typical drawing methods within beginDraw() / endDraw() (as the reference example suggests).

The only thing left is to save the final image which is simple enough using save()

Here's a modified example of Examples > Basics > Image > LoadDisplay which uses a separate PGraphics instance to draw into as the mouse is dragged and saves the final image when the s key is pressed:

/**
 * Based on Examples > Basics > Image > Load and Display 
 * 
 * Images can be loaded and displayed to the screen at their actual size
 * or any other size. 
 */

PImage img;  // Declare variable "a" of type PImage
// reference to layer to draw into
PGraphics paintLayer;

void setup() {
  size(640, 360);
  // The image file must be in the data folder of the current sketch 
  // to load successfully
  img = loadImage("moonwalk.jpg");  // Load the image into the program

  // create a separate layer to draw into
  paintLayer = createGraphics(width,height);
}

void draw() {
  // Displays the image at its actual size at point (0,0)
  image(img, 0, 0);
  // Displays the paint layer
  image(paintLayer,0,0);
}

void mouseDragged(){
  // use drawing commands between beginDraw() / endDraw() calls
  paintLayer.beginDraw();
  paintLayer.line(mouseX,mouseY,pmouseX,pmouseY);
  paintLayer.endDraw();
}

void keyPressed(){
  if(key == 's'){
    saveFrame("annotated-image.png");
  }
}