Need to get drawing under picture

Processing Coding Questions
1

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!

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

1 Like
2

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?

3

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

4

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

5

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

6

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:

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.

2 Likes
7

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

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

set a flag

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

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

put the image too:


  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:

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

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

9

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

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

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.
1 Like