# Need to get drawing under picture

**URL:** <https://discourse.processing.org/t/need-to-get-drawing-under-picture/16344>\
**Category:** Coding Questions\
**Created:** [December 12, 2019, 10:30am UTC](https://discourse.processing.org/t/need-to-get-drawing-under-picture/16344 "2019-12-12T10:30:03Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![keeg23](https://avatars.discourse-cdn.com/v4/letter/k/4da419/32.png) [@keeg23](https://discourse.processing.org/u/keeg23)\
**Post date:** [December 12, 2019, 10:30am UTC](https://discourse.processing.org/t/need-to-get-drawing-under-picture/16344/1 "2019-12-12T10:30:03Z")

</div>

The code I have now I am having trouble getting the actual drawing under the picture, was told it may be the mousepressed section but could not solve the problem thank you!

```auto
PImage myElonStart, myMonroe, myLennon, selectOne, 
  lennonLil, monroeLil, elonLil, lennonBig, monroeBig, elonBig, 
  myBlueCan, myRedCan, myPinkCan, myGreenCan, myTanCan, myScroll, 
  mySave, myRestart, myBrush1, myBrush2, myBrush3, paintCan;
PFont thePopArtFont;
boolean saveTheImage =false;
boolean justSaved = false;
boolean showElon = false;
boolean showMonroe = false;
boolean showLennon = false;
boolean dispCol;
float col;

// ***********COLORS*****************
color bluePaint = color(0, 144, 255);
color currentColor = color(0, 144, 255);
color black = color(0);
color redPaint = color(255, 4, 4);
color greenPaint = color (92, 207, 102);
color pinkPaint = color (253, 80, 116);
color tanPaint = color (245, 170, 91);
color orgBackground = color (255, 122, 10);

boolean typeIsCan=true;

void setup() {
  size (1280, 720);
  //colorMode(HSB, 100, 100, 100);
  background(pinkPaint);
  //load images
  myElonStart = loadImage("elonData.png");
  myMonroe = loadImage("monroeData.png");
  myLennon = loadImage("lennonData.png");
  lennonLil = loadImage("lennonLil.png");
  monroeLil = loadImage("monroeLil.png");
  elonLil = loadImage("elonLil.png");
  lennonBig = loadImage("lennonBig.png");
  monroeBig = loadImage("monroeBig.png");
  elonBig = loadImage("elonBig.png");
  paintCan = loadImage("paintCan.png");
  mySave = loadImage("save.png");
  myRestart = loadImage("restart.png");
  myScroll = loadImage("scroll.png");
  selectOne = loadImage("selectOne.png");

  //load font
  thePopArtFont = createFont("GoldenHillsDEMO.ttf", 50);
  textFont(thePopArtFont);
}

void draw() {
  colorMode(HSB, 100, 100, 100);
  checkRollovers();
  myBorder(); //Draws blue border around window
  //Paint Tool
  if (dispCol)
  {  
    noStroke();
    fill(col, 100, 100);

    rect(8, 250, 85, 90);
  }
  stroke(0, 0, 0);
  strokeWeight(35);

  stroke(col, 100, 100);
  strokeWeight(22);
  if (mousePressed)
  {
    line(mouseX, mouseY, pmouseX, pmouseY);
  }

  fill(black);
  text("Pop Art Paint Program", width/3, 50);
  fill(redPaint);
  text("Pop Art Paint Program", width/3.01, 47);
  

  myButtonLayout();
}

void mouseWheel(MouseEvent event)
{
  float e = event.getCount();    
  col += e;
  if (col > 100) col = 0;
  if (col < 0) col = 100;
  dispCol = true;
}

void checkRollovers () {
  //Save button rollover
  if ((mouseX >100) && (mouseX <200) && (mouseY >618) && (mouseY <718)) {
    saveTheImage=true;
    cursor(WAIT);
  } else {
    saveTheImage=false;
    cursor(ARROW);
  }
  //RESTART BUTTON CHECK
  if ((mouseX>1051) && (mouseX <1162) && (mouseY>620) && (mouseY<710)) {
    cursor(WAIT);
  } else {
    cursor(ARROW);
  }

  //Lennon Check
  if ((mouseX>1188) && (mouseX <1288) && (mouseY>136) && (mouseY<236)) {
    cursor(CROSS);
  } else {
    cursor(ARROW);
  }

  //Monroe Check
  if ((mouseX>1188) && (mouseX <1288) && (mouseY>260) && (mouseY<360)) {
    cursor(CROSS);
  } else {
    cursor(ARROW);
  }

  //Elon Check
  if ((mouseX>1188) && (mouseX <1288) && (mouseY>377) && (mouseY<477)) {
    cursor(CROSS);
  } else {
    cursor(ARROW);
  }
}

void mousePressed() {
  if (saveTheImage == true) {
    saveImage();
    background(redPaint);
    justSaved = true;
    saveTheImage = false;
  } 
  if ((mouseX>10) && (mouseX<80) && (mouseY>5) && (mouseY<121))
  {
    typeIsCan =false;
    currentColor = bluePaint;
  }
}

void mouseReleased() {
  if (justSaved == true) {
    background(orgBackground);
    justSaved = false;
  }

  //RESTART BUTTON
  if ((mouseX>1051) && (mouseX <1162) && (mouseY>620) && (mouseY<710)) {
    background(orgBackground);
  }

  //Lennon Big
  if ((mouseX>1188) && (mouseX <1288) && (mouseY>136) && (mouseY<236)) {
    image(lennonBig, width/3, 100);
  }
  //Monroe Big
  if ((mouseX>1188) && (mouseX <1288) && (mouseY>260) && (mouseY<360)) {
    image(monroeBig, width/3, 100);
  }

  //Elon Big
  if ((mouseX>1188) && (mouseX <1288) && (mouseY>377) && (mouseY<477)) {
    image(elonBig, width/4, 100);
  }
}

void myBorder() {
  fill(0, 144, 255);
  noStroke();
  rect(0, 0, 100, 611);
  rect(0, 610, 1280, 720);
  rect(1180, 0, 1280, 620);
}

void myButtonLayout() {
  //Paint Can
  image(paintCan, 0, height/3);
  image(myScroll, 0, 180);
  //Images of People
  image(lennonLil, 1188, 136);
  image(monroeLil, 1188, 260);
  image(elonLil, 1188, 377);
  image(selectOne, 1188, 100);
  //Start Restart Button
  image(mySave, 100, 615);
  image(myRestart, 1080, 615);
}

void saveImage() {
  PImage partialSave = get(115, 65, 1000, 535);

  String path = sketchPath("Images/");

  File file = new File(path);
  int folderSize = 0;
  if (file.exists() && file.isDirectory()) {
    folderSize = file.listFiles().length;
  }
  partialSave.save(path+"PopArtImage" + folderSize + "jpg");
}

```

Example of what is happening  
 ![Screen Shot 2019-12-12 at 5.28.38 AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8b4cf3579ea0f681bc878a58be97ddb9bf5e0fad.png)

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [December 12, 2019, 10:47am UTC](https://discourse.processing.org/t/need-to-get-drawing-under-picture/16344/2 "2019-12-12T10:47:51Z")

</div>

I‘m not quite sure what you mean by „actual drawing under the picture“. What should it look like? Where would the difference be between the image you posted and what you want?

---

<div class="post-metadata">

**Author:** ![keeg23](https://avatars.discourse-cdn.com/v4/letter/k/4da419/32.png) [@keeg23](https://discourse.processing.org/u/keeg23)\
**Post date:** [December 12, 2019, 10:50am UTC](https://discourse.processing.org/t/need-to-get-drawing-under-picture/16344/3 "2019-12-12T10:50:04Z")

</div>

I want like the drawing as in the red line to be under the outline of the picture of john lennon, so it is almost like you are coloring it in, instead of drawing right over the face, so the black outline should still show after drawing over it

---

<div class="post-metadata">

**Author:** ![Waboqueox](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/waboqueox/32/5643_2.png) [@Waboqueox](https://discourse.processing.org/u/Waboqueox)\
**Post date:** [December 12, 2019, 10:57am UTC](https://discourse.processing.org/t/need-to-get-drawing-under-picture/16344/4 "2019-12-12T10:57:05Z")

</div>

@keeg23 Can you try to put the face after the lines? (and draw it every frame)

---

<div class="post-metadata">

**Author:** ![keeg23](https://avatars.discourse-cdn.com/v4/letter/k/4da419/32.png) [@keeg23](https://discourse.processing.org/u/keeg23)\
**Post date:** [December 12, 2019, 10:58am UTC](https://discourse.processing.org/t/need-to-get-drawing-under-picture/16344/5 "2019-12-12T10:58:46Z")

</div>

So how would i set that up exactly sorry this is the first program I have ever wrote

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [December 12, 2019, 11:06am UTC](https://discourse.processing.org/t/need-to-get-drawing-under-picture/16344/6 "2019-12-12T11:06:28Z")

</div>

Seeing you’re working with layers, what might simplify things is to set up a layer specifically for your ‘brush’ results. See the example below:

```auto
PGraphics drawingBoard;

void setup() {
  size(400, 400);
  drawingBoard = createGraphics(width, height);
}

void draw() {
  background(240); 
  yourBrush();

  // draw a rectangle, which represents one of your images  
  noStroke();
  fill(0, 255, 0);
  rect(width/2, height/2, 100, 100);
}

void yourBrush() {
  drawingBoard.beginDraw();
  drawingBoard.strokeWeight(10);
  drawingBoard.stroke(255, 100, 100);
  if (mousePressed) {
    drawingBoard.line(mouseX, mouseY, pmouseX, pmouseY);
  }
  drawingBoard.endDraw();
  image(drawingBoard, 0, 0);
}

```

Whenever you’re using your mouse to draw on the stage, it places those results only on the `drawBoard`. Place your image on top on it afterwards.

---

<div class="post-metadata">

**Author:** ![Waboqueox](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/waboqueox/32/5643_2.png) [@Waboqueox](https://discourse.processing.org/u/Waboqueox)\
**Post date:** [December 12, 2019, 11:07am UTC](https://discourse.processing.org/t/need-to-get-drawing-under-picture/16344/7 "2019-12-12T11:07:39Z")

</div>

You can for example use flags to check what mode is happening (drawing over witch image) and meanwhile you are in that mode, put the image…

I don’t have the images and have not study in detail the flow of your program, but something like when you take the image

```auto
  if ((mouseX>1188) && (mouseX <1288) && (mouseY>136) && (mouseY<236)) {
    image(lennonBig, width/3, 100);
  }

```

set a flag

```auto
 //Lennon Big
  if ((mouseX>1188) && (mouseX <1288) && (mouseY>136) && (mouseY<236)) {
    image(lennonBig, width/3, 100);
    flagImage3 = true; // you can use arrays too, in fact is better if you have many images
  }

```

and in the draw function, after the line:

```auto
  if (mousePressed)
  {
    line(mouseX, mouseY, pmouseX, pmouseY);
  }

```

put the image too:

```auto

  if (mousePressed)
  {
    line(mouseX, mouseY, pmouseX, pmouseY);
  }

if(flagImage3)
    image(lennonBig, width/3, 100);
else if (flagImage2)
    image(monroeBig, width/3, 100);
...etc

```

And when you take other mode or other picture, reset flags:

```auto
  if ((mouseX>1188) && (mouseX <1288) && (mouseY>136) && (mouseY<236)) {
    image(lennonBig, width/3, 100);
    flagImage3 = true; 
    flagImage2 = false;
    flagImage1 = false;
....
  }

```

---

<div class="post-metadata">

**Author:** ![keeg23](https://avatars.discourse-cdn.com/v4/letter/k/4da419/32.png) [@keeg23](https://discourse.processing.org/u/keeg23)\
**Post date:** [December 12, 2019, 11:11am UTC](https://discourse.processing.org/t/need-to-get-drawing-under-picture/16344/8 "2019-12-12T11:11:43Z")

</div>

so would the flagImage be a boolean I would set to false for a global variable

---

<div class="post-metadata">

**Author:** ![Waboqueox](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/waboqueox/32/5643_2.png) [@Waboqueox](https://discourse.processing.org/u/Waboqueox)\
**Post date:** [December 12, 2019, 11:15am UTC](https://discourse.processing.org/t/need-to-get-drawing-under-picture/16344/9 "2019-12-12T11:15:55Z")

</div>

yes, also you can use an int too and set it to 0:

```auto
if (flagImage == 0)
   println("No images");
else if(flagImage == 3)
   image(lennonBig, width/3, 100);
else if (flagImage == 2)
    image(monroeBig, width/3, 100);
...

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [December 14, 2019, 5:23pm UTC](https://discourse.processing.org/t/need-to-get-drawing-under-picture/16344/10 "2019-12-14T17:23:48Z")

</div>

Some approaches:

If your lennon is a transparent png, then

1. each frame redraw the orange circle, the current draw path, and then lennon. You can either
  - store the draw path as an ArrayList of set of stored coordinates (so that it can be redrawn every time) or
  - save the draw path pixels to a separate transparent PGraphics buffer (which can then be displayed with image(buffer) each time).

If you really don’t want to redraw, then

1. you can either change the global blendMode() to affect how drawing on top of the image behaves – for example, DARKEN won’t replace black pixels, because they are already as dark as they can be – or
2. you can create a custom brush which manipulates pixels in this way wherever the mouse is – for example, finding orange-ish pixels and replacing them with red.