How do I draw shapes over an image?

Processing Coding Questions
1

Hello
It’s super simple but I’m trying to write a code where I have a background image and when you click on it or run the mouse over it, squares appear and stay on the page. I know it’s most likely to do with the order of the code, but I can’t figure it out.

Here is my code so far, no shapes are appearing:

PImage img1;

void setup(){
  size(800,600);
  noLoop();
  background(225);
  smooth();
  img1 = loadImage("Screenshot Sketch 7.png");
   
}

void draw(){
  image(img1,0,0,800,600);
  mousePressed();
  rect(100, 100, mouseX, mouseY);
}

Thanks for any help! :slight_smile:

1 Like
2

Hey nevermind, I figured it out!

PImage img1;

void setup(){
size(800,600);
img1 = loadImage("Screenshot Sketch 7.png");
image(img1,0,0,800,600);
}

void draw(){
  mousePressed();
  rect(mouseX,mouseY,mouseX,mouseY);
}
1 Like
3

Glad you worked it out – draw the image once, then each frame in draw put a rectangle at the current mouse position.

That line mousePressed() is not necessary.

I’m guessing that for your rect, you want the 3rd and 4th term to be the size of the rectangle – e.g. 10, 10 or 40, 40.