# Changing colour depending on location

**URL:** <https://discourse.processing.org/t/changing-colour-depending-on-location/14799>\
**Category:** Libraries\
**Created:** [October 19, 2019, 1:40pm UTC](https://discourse.processing.org/t/changing-colour-depending-on-location/14799 "2019-10-19T13:40:25Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![DatSoi](https://avatars.discourse-cdn.com/v4/letter/d/5daacb/32.png) [@DatSoi](https://discourse.processing.org/u/DatSoi)\
**Post date:** [October 19, 2019, 1:40pm UTC](https://discourse.processing.org/t/changing-colour-depending-on-location/14799/1 "2019-10-19T13:40:25Z")

</div>

Hi there, im a huge beginner to processing, but i was wondering how you could go about changin the colour of an image depending on the location of an object, (a users face location which is being located by OpenCV).

Thanks

---

<div class="post-metadata">

**Author:** ![biran4454](https://avatars.discourse-cdn.com/v4/letter/b/9dc877/32.png) [@biran4454](https://discourse.processing.org/u/biran4454)\
**Post date:** [October 19, 2019, 1:55pm UTC](https://discourse.processing.org/t/changing-colour-depending-on-location/14799/2 "2019-10-19T13:55:39Z")

</div>

Try tint():  
`tint(float red, float green, float blue)`  
[https://processing.org/reference/tint\_.html](https://processing.org/reference/tint_.html)

---

<div class="post-metadata">

**Author:** ![DatSoi](https://avatars.discourse-cdn.com/v4/letter/d/5daacb/32.png) [@DatSoi](https://discourse.processing.org/u/DatSoi)\
**Post date:** [October 19, 2019, 2:09pm UTC](https://discourse.processing.org/t/changing-colour-depending-on-location/14799/3 "2019-10-19T14:09:23Z")

</div>

How would i go about calling the location of an object? ie. coordinated of a face or a mouse. Also whats the best way to have it change colour only when that object is in a certain area?

---

<div class="post-metadata">

**Author:** ![biran4454](https://avatars.discourse-cdn.com/v4/letter/b/9dc877/32.png) [@biran4454](https://discourse.processing.org/u/biran4454)\
**Post date:** [October 19, 2019, 2:11pm UTC](https://discourse.processing.org/t/changing-colour-depending-on-location/14799/4 "2019-10-19T14:11:04Z")

</div>

I am not very familiar with OpenCV, but I’ll try to find out what I can `:)`

---

<div class="post-metadata">

**Author:** ![biran4454](https://avatars.discourse-cdn.com/v4/letter/b/9dc877/32.png) [@biran4454](https://discourse.processing.org/u/biran4454)\
**Post date:** [October 19, 2019, 2:18pm UTC](https://discourse.processing.org/t/changing-colour-depending-on-location/14799/5 "2019-10-19T14:18:32Z")

</div>

Do you mean a code object, (created from a class), or a real-world object that was found by OpenCV?  
Could you expand a little on your question?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 19, 2019, 2:25pm UTC](https://discourse.processing.org/t/changing-colour-depending-on-location/14799/6 "2019-10-19T14:25:51Z")

</div>

tint is the right way, after get the face to a extra image

```auto
// copy PDE / File / Examples / Contributed Libraries / OpenCV for Processing / FaceDetection
// mod for 
// https://discourse.processing.org/t/changing-colour-depending-on-location/14799
import gab.opencv.*;
import java.awt.Rectangle;

OpenCV opencv;
Rectangle[] faces;
PImage face;
int x,y,w,h;

void setup() {
  opencv = new OpenCV(this, "test.jpg");
  size(1080, 720);

  opencv.loadCascade(OpenCV.CASCADE_FRONTALFACE);  
  faces = opencv.detect();
  println("found faces "+faces.length);
  if ( faces.length >= 1) {
    x = faces[0].x;
    y = faces[0].y;
    w = faces[0].width;
    h = faces[0].height;
    face = opencv.getInput().get(x,y,w,h);
  } 
  noLoop();
}

void draw() {
  image(opencv.getInput(), 0, 0);
  tint(0, 153, 204, 126);
  image(face,x,y);
  noFill();
  stroke(0, 255, 0);
  strokeWeight(3);
  for (int i = 0; i < faces.length; i++) {
    rect(faces[i].x, faces[i].y, faces[i].width, faces[i].height);
  }
  
}

```

 ![openCV_face_tint](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4facfd72db1e7f3039b1be7794b15795a1d7e47d.png)

---

<div class="post-metadata">

**Author:** ![DatSoi](https://avatars.discourse-cdn.com/v4/letter/d/5daacb/32.png) [@DatSoi](https://discourse.processing.org/u/DatSoi)\
**Post date:** [October 20, 2019, 4:48am UTC](https://discourse.processing.org/t/changing-colour-depending-on-location/14799/7 "2019-10-20T04:48:10Z")

</div>

Bascally, i am looking to have an image change colour if the face (from openCV) is in a certain area.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 20, 2019, 6:17am UTC](https://discourse.processing.org/t/changing-colour-depending-on-location/14799/8 "2019-10-20T06:17:39Z")

</div>

sorry, that now sounds much more easy to change the whole picture color

```auto
// copy PDE / File / Examples / Contributed Libraries / OpenCV for Processing / FaceDetection
// mod for 
// https://discourse.processing.org/t/changing-colour-depending-on-location/14799
// v02. only change whole picture color if face rect in spec area

import gab.opencv.*;
import java.awt.Rectangle;

OpenCV opencv;
Rectangle[] faces;
PImage face; // optional
int x, y, w, h; // face position from CV
PVector centerf, areaf;
int xk=400, yk=400, wk=150, hk=150; // check area for face position
int lim = 200; // pix dist both area centers
boolean over= false;

void setup() {
  opencv = new OpenCV(this, "test.jpg");
  size(1080, 720);

  opencv.loadCascade(OpenCV.CASCADE_FRONTALFACE);  
  faces = opencv.detect();
  println("found faces "+faces.length);
  if ( faces.length >= 1) {
    x = faces[0].x;
    y = faces[0].y;
    w = faces[0].width;
    h = faces[0].height;
    println(x, y, w, h);
    centerf = new PVector(x+w/2, y+h/2);
    areaf = new PVector(xk+wk/2, yk+hk/2);
    over = ( areaf.dist(centerf) < lim ); // check if face near defined area center    
    face = opencv.getInput().get(x, y, w, h); // optional
  } 
  noLoop();
}

void draw() {
  if ( over ) tint(200, 0, 0, 126); // colorchange all picture if face close
  image(opencv.getInput(), 0, 0);
  image(face, 0, 0); // optional
  for (int i = 0; i < faces.length; i++) {
    noFill();
    stroke(0, 255, 0);
    strokeWeight(3);
    rect(faces[i].x, faces[i].y, faces[i].width, faces[i].height);
    stroke(200, 0, 0);
    rect(xk,yk,wk,hk);
    line(xk+wk/2,yk+hk/2,x+w/2,y+h/2);
  }
}

```

 ![openCV_faceposition_picture_tint](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/13a12c23e681f506a90c398284644a781eacad66.jpeg)

---

<div class="post-metadata">

**Author:** ![DatSoi](https://avatars.discourse-cdn.com/v4/letter/d/5daacb/32.png) [@DatSoi](https://discourse.processing.org/u/DatSoi)\
**Post date:** [October 20, 2019, 6:53am UTC](https://discourse.processing.org/t/changing-colour-depending-on-location/14799/9 "2019-10-20T06:53:19Z")

</div>

Hahah im still a little confused. Ive attached an image of the print.

Basically, the seahorse is the printed image on to the persons face. And the coral in the corners would be grey (dis-coloured). my plan is to have the coral turn colourful if the seahorse (face) is near the coral

 ![coral](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6588a2a8cf26a8c2a476763b4a48e27923a07b09.jpeg)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 20, 2019, 7:05am UTC](https://discourse.processing.org/t/changing-colour-depending-on-location/14799/10 "2019-10-20T07:05:49Z")

</div>

> [@DatSoi](#):
>
> (a users face location which is being located by OpenCV).

i expected that this part is working already?  
but you not show your code so i started from a working example of that library  
what i just loaded after you posted this.

if you have problems with that library i can not help as i also not know it.  
anyhow you might need to rephrase your question

* * *

independent that latest approach with

checking the distance of two rectangles

- one predefined in code
- one found by the openCV

and depending on that do a TINT on the picture

is that part answered now?

---

<div class="post-metadata">

**Author:** ![DatSoi](https://avatars.discourse-cdn.com/v4/letter/d/5daacb/32.png) [@DatSoi](https://discourse.processing.org/u/DatSoi)\
**Post date:** [October 20, 2019, 7:11am UTC](https://discourse.processing.org/t/changing-colour-depending-on-location/14799/11 "2019-10-20T07:11:25Z")

</div>

Yeah the basic code works, where it detects a face and prints an image onto the face. Ive shown my code below;

As for my question, the coral image and the actual background are 2 different images. And i just want the coral to change tint() if the face is near it. Does that make more sense?

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

PImage img;
PImage background;
PImage imgCoral;

color colCoral;

Capture video;
OpenCV opencv;

void setup() {
size(1920, 1080);
colorMode (HSB);

frameRate(60);

  img = loadImage ("photo1.png");
    
  imgCoral = loadImage ("coral.png");
  
  background=loadImage ("sea.png");
  
  video = new Capture(this, 640, 480);
  opencv = new OpenCV(this, 640, 480);
  opencv.loadCascade(OpenCV.CASCADE_FRONTALFACE); 
  
  video.start();
  
}

void draw() {
  background (background);
  image(imgCoral,0,0);
  scale(2);
  opencv.loadImage(video);
  
  noFill();
  stroke(0, 0, 0);
  strokeWeight(3);
  Rectangle[] faces = opencv.detect();
    
  for (int i = 0; i < faces.length; i++) {
    println(faces[i].x + "," + faces[i].y);
    image(img, faces[i].x, faces[i].y, faces[i].width,faces[i].height);
    
  }
}

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

```