Displaying image on mouse click

Processing Coding Questions
1

Hello!
This is my first time using processing and I can’t work my problem out. Hopefully someone can help!

I am trying to display an image that follows the cursor of the mouse, and when the mouse is clicked I want a flower to appear, stay visible and remain in the same spot of the moment it was clicked. I want to be able to do this repeatedly, such that the vines(the image mouseCursor) that appear and follow my mouse has flowers added to it whenever I click. Such that eventually vines with a lot of flowers can be visible.
At the moment the flower disappears when the mouse is not clicked. To my understanding this is because draw is a loop and the functionality of mousepressed is a temporary function. However I can’t figure out how else I am supposed to achieve this.

float x;
float y;
float easing = 0.05;
float offset = 0;
int num = 50;
float mx = new float[num];
float my = new float[num];
PImage mouseCursor;
PImage flower;

void setup() {
size(1920, 1080);
noStroke();
smooth();
fill(255, 153);
mouseCursor = loadImage(“MouseCursor3.png”);
flower = loadImage(“flower.png”);
}

void draw() {
background(255);
int which = (frameCount/3) % num;
mx[which] = mouseX;
my[which] = mouseY;

for (int i = 0; i < num; i++) {
// which+1 is the smallest (the oldest in the array)
float targetX = mouseX;
float dx = targetX - x;
x += dx * easing;
float targetY = mouseY;
float dy = targetY - y;
y += dy * easing;
int index = (which+1 + i) % num;
image(mouseCursor,mx[index], my[index], 181, 126);
}

if (mousePressed) {
  image(flower,x, y, 40, 40);

  }

}

2

Hello Daphn,

Please edit your previous post and format your code using this icone </> in the text editor.

At the beginning of your draw() loop you are calling background(255). What it does is putting a white value to all the pixels of your window so basically erasing everything that you previously drawn on it.

When you click the mouse, you are indeed drawing an image but that image will stay only until you enter a new draw() loop that will erase the screen once again. So let’s say your sketch is running at 60 frames per second, it means that the draw() loop is called every 16ms so not very long…

Also, the way you are detecting a click of a mouse is not the one that you want I think. With your code, mousePressed is detecting the real time state of your mouse. So if you keep the mouse button pressed, then you should draw your image constantly (and you should then be able to see it continuously).

What you want instead I guess, is to add an image only once per click. For this you can call the mouseClicked() function outside of you draw() loop. This is a function that is triggered by an event and in this case the click of a mousse button.

Now, you don’t want to draw your image in that function because you will run into the same issue as previously. Instead, you want to keep track of where you clicked, and draw an image at that position in the draw() function. That way you can keep drawing it even after you clear your screen.

To keep track of where you clicked, you can for example use an array list of PVector.

Take a look at the following code. It does what you want but with ellipses:

ArrayList<PVector> clickedPos = new ArrayList<PVector>();

void setup() {
  size(800, 600);
  
  // Define the style of our ellipses
  noStroke();
  fill(220);
}

void draw() {
  background(20); // Clear the window
  
  for (int i = 0; i < clickedPos.size(); i++) {
    ellipse(clickedPos.get(i).x, clickedPos.get(i).y, 10, 10);
  }
}

void mouseClicked() {
  // Add a new position to the array
  // The positions will be used to draw the ellipses
  clickedPos.add(new PVector(mouseX, mouseY));
}
1 Like