# Using opencv.detect() and using the face position to replace mouse position in an existing sketch

**URL:** <https://discourse.processing.org/t/using-opencv-detect-and-using-the-face-position-to-replace-mouse-position-in-an-existing-sketch/27651>\
**Category:** Libraries\
**Created:** [February 7, 2021, 2:27pm UTC](https://discourse.processing.org/t/using-opencv-detect-and-using-the-face-position-to-replace-mouse-position-in-an-existing-sketch/27651 "2021-02-07T14:27:33Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![eelhum](https://avatars.discourse-cdn.com/v4/letter/e/3d9bf3/32.png) [@eelhum](https://discourse.processing.org/u/eelhum)\
**Post date:** [February 7, 2021, 2:27pm UTC](https://discourse.processing.org/t/using-opencv-detect-and-using-the-face-position-to-replace-mouse-position-in-an-existing-sketch/27651/1 "2021-02-07T14:27:33Z")

</div>

Here's the code i currently have, for some reason i keep getting back ArrayIndexOutOfBoundsException = 0; when in theory i thought replacing the faces[i].x in place of mouseX and faces[i].y in place of mouseY would make sense

**Face Detect Squares**

```
package ccpd.library;
int barWidth = 20;
int lastBar = -1;
float max_distance;
import gab.opencv.;
import processing.video.;
import java.awt.*;
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);
video.start();
noStroke();
max_distance = dist(0, 0, width, height);
}
void draw() {
background(0);
scale(2);
opencv.loadImage(video);
image(video, 0, 0 );
noFill();
can remove square on face
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);
rect(faces[i].x, faces[i].y, faces[i].width, faces[i].height);
}
//to fill the squares with diff colour
int whichBar = mouseX / barWidth*2;
if (whichBar != lastBar) {
int barX = whichBar * barWidth;
// fill(mouseY, height, height);
stroke(0, 255, 0);
strokeWeight(3);
fill(mouseY, 0, 255);
for (int i = 0; i <= width; i += 20) {
  for (int j = 0; j <= height; j += 20) {
    //float size = dist(mouseX, mouseY, i, j);
    //change from mouseX,mousyY to positions of the face?
    float size = dist(faces[i].x, faces[i].y, i, j);
    size = size/max_distance * 150;
    rect(i, j, size, size);
  }
}

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

```

**Just squares (working)**

```
package ccpd.utilities;
int barWidth = 20;
int lastBar = -1;
float max_distance;
void setup() {
size(640, 360);
stroke(0, 255, 0);
strokeWeight(2);
max_distance = dist(0, 0, width, height);
// colorMode(HSB, height, height, height);
}
void draw() {
background(0);
//to fill the squares with diff colour
int whichBar = mouseY / barWidth*2;
if (whichBar != lastBar) {
int barX = whichBar * barWidth;
fill(mouseY, height, height);
fill(mouseY, 0, 255);
//the squares
for (int i = 0; i <= width; i += 20) {
for (int j = 0; j <= height; j += 20) {
    float size = dist(mouseX, mouseY, i, j);
    size = size/max_distance * 150;
    rect(i, j, size, size);
  }
}

}
}
```

---

<div class="post-metadata">

**Author:** ![eelhum](https://avatars.discourse-cdn.com/v4/letter/e/3d9bf3/32.png) [@eelhum](https://discourse.processing.org/u/eelhum)\
**Post date:** [February 7, 2021, 2:36pm UTC](https://discourse.processing.org/t/using-opencv-detect-and-using-the-face-position-to-replace-mouse-position-in-an-existing-sketch/27651/2 "2021-02-07T14:36:40Z")

</div>

> [@eelhum](#):
>
> ` float size = dist(faces[i].x, faces[i].y, i, j);`

this is the line that I thought would make this work! Am i doing it wrong?

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [February 7, 2021, 6:12pm UTC](https://discourse.processing.org/t/using-opencv-detect-and-using-the-face-position-to-replace-mouse-position-in-an-existing-sketch/27651/3 "2021-02-07T18:12:59Z")

</div>

Hi,

Welcome to the forum! 😉

Remember that you can press `Ctrl+T` in the Processing code editor to auto format your code (specially for indentation).

Also be sure to correctly use the ``` ``` characters to format your entire code and have syntax highlighting so it’s easier to read.

I think your issue is that the line :

```auto
float size = dist(faces[i].x, faces[i].y, i, j);

```

Is in a loop where `i` goes from `0` to `width` :

```auto
for (int i = 0; i <= width; i += 20) {}

```

But if the `faces` array does not contains `i + 1` elements, then you have an `ArrayIndexOutOfBoundsException` because you are trying to access an element at an index that is too high.

What you want is to loop over all the faces in the array regardless it’s length (like you did in the code) :

```auto
for (int i = 0; i < faces.length; i++) {
  // Do something with faces[i]
}

```

Hope it helps! 😉

---

<div class="post-metadata">

**Author:** ![eelhum](https://avatars.discourse-cdn.com/v4/letter/e/3d9bf3/32.png) [@eelhum](https://discourse.processing.org/u/eelhum)\
**Post date:** [February 8, 2021, 5:44am UTC](https://discourse.processing.org/t/using-opencv-detect-and-using-the-face-position-to-replace-mouse-position-in-an-existing-sketch/27651/4 "2021-02-08T05:44:21Z")

</div>

Hi Joseph!! Sorry about that! I was worried that i didn’t format it right.

AH i see!! I understand now, I’ll give it a shot. I appreciate your help! Thank you 😃