# mousePressed() to change image on openCV

**URL:** <https://discourse.processing.org/t/mousepressed-to-change-image-on-opencv/19931>\
**Category:** Libraries\
**Created:** [April 19, 2020, 12:24pm UTC](https://discourse.processing.org/t/mousepressed-to-change-image-on-opencv/19931 "2020-04-19T12:24:10Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![uwu](https://avatars.discourse-cdn.com/v4/letter/u/b782af/32.png) [@uwu](https://discourse.processing.org/u/uwu)\
**Post date:** [April 19, 2020, 12:24pm UTC](https://discourse.processing.org/t/mousepressed-to-change-image-on-opencv/19931/1 "2020-04-19T12:24:10Z")

</div>

Hey, I’m just starting out with Processing!

I’m trying to make a simple ‘digital fitting room’. I’m using openCV to attach the clothes to the body (it isn’t perfect but it’s enough).

I want to change the clothes attached to the body every time the user clicks. I’ve tried using mousePressed() but I still couldn’t figure out how to do it.

Here’s my code right now.

Sorry if it’s a whole mess, I’m not too sure what I’m doing most of the time.

Thanks in advance to anyone!

```auto
import gab.opencv.*;
import processing.video.*;
import java.awt.*;

boolean hasClicked;

PImage hat;
PImage moustache;
PImage hat2;
PImage dress;

Capture video;
OpenCV opencv;

void setup() {
  size(640, 480);
  video = new Capture(this, 640/2, 480/2);
  opencv = new OpenCV(this, 640/2, 480/2);
  opencv.loadCascade(OpenCV.CASCADE_FRONTALFACE);  
  
  hat = loadImage("hat.png");
  hat2 = loadImage("hat2.png");
  moustache = loadImage("moustache.png");
  dress = loadImage("dress.png");
 
  video.start();
}

void draw() {
  
  scale(2);
  opencv.loadImage(video);

  image(video, 0, 0 );

  noFill();
  stroke(0, 255, 0);
  strokeWeight(3);
  Rectangle[] faces = opencv.detect();
  println(faces.length);

  for (int i = 0; i < faces.length; i++) {
    println(faces[i].x + "," + faces[i].y);
    image(hat,faces[i].x, faces[i].y-70, faces[i].width, faces[i].height);
    image(moustache,faces[i].x, faces[i].y+20, faces[i].width, faces[i].height);
    image(dress,faces[i].x, faces[i].y+130, faces[i].width, faces[i].height);
  }
}

void mousePressed(){
  hasClicked = true

void captureEvent(Capture c) {
  c.read();
}

```

---

<div class="post-metadata">

**Author:** ![Schred](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/schred/32/13146_2.png) [@Schred](https://discourse.processing.org/u/Schred)\
**Post date:** [April 19, 2020, 1:18pm UTC](https://discourse.processing.org/t/mousepressed-to-change-image-on-opencv/19931/2 "2020-04-19T13:18:48Z")

</div>

I’m not sure if I understand what your goal is. Do you want to change `hat`, `moustache`, `hat2` and `dress` whenever the mouse is pressed?

---

<div class="post-metadata">

**Author:** ![uwu](https://avatars.discourse-cdn.com/v4/letter/u/b782af/32.png) [@uwu](https://discourse.processing.org/u/uwu)\
**Post date:** [April 19, 2020, 3:06pm UTC](https://discourse.processing.org/t/mousepressed-to-change-image-on-opencv/19931/3 "2020-04-19T15:06:28Z")

</div>

Ah, sorry if I wasn’t too clear. I haven’t finished adding all the assets but basically what I want to do is, for example, whenever the mouse is pressed hat would turn to hat2. The same will go with the rest of the assets (perhaps dress to dress2 and so on).

---

<div class="post-metadata">

**Author:** ![Schred](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/schred/32/13146_2.png) [@Schred](https://discourse.processing.org/u/Schred)\
**Post date:** [April 19, 2020, 3:23pm UTC](https://discourse.processing.org/t/mousepressed-to-change-image-on-opencv/19931/4 "2020-04-19T15:23:54Z")

</div>

Thanks for the clarification, I see what you are trying to do know! 😄

I would declare a new variable for each piece of clothing, which you can use to specify which kind to display:

```auto
PImage activeHat, activeMoustache, activeDress;

```

and initialize them like this:

```auto
void setup() {
  // ...

  activeHat = hat;
  activeMoustache = moustache;
  activeDress = dress;
  // Or you could randomize it if you want.
}

```

Then change your `draw` method to display these `active` images.  
Now you can easily change the clothing just by assigning those variables other values:

```auto
void mousePressed() {
  activeHat = hat2;
  activeMoustache= moustache2;
  activeDress = dress2;
}

```

You could obviously apply a lot more customization to your `mousePressed` method, but this should be all you need for now. 😉