# Head tracking Gradient brushes

**URL:** <https://discourse.processing.org/t/head-tracking-gradient-brushes/9684>\
**Category:** Libraries\
**Created:** [March 27, 2019, 3:57pm UTC](https://discourse.processing.org/t/head-tracking-gradient-brushes/9684 "2019-03-27T15:57:40Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![daankuyper](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/daankuyper/32/4315_2.png) [@daankuyper](https://discourse.processing.org/u/daankuyper)\
**Post date:** [March 27, 2019, 3:57pm UTC](https://discourse.processing.org/t/head-tracking-gradient-brushes/9684/1 "2019-03-27T15:57:40Z")

</div>

Hey everybody,

I’m quite new to processing. I’ve done 1 very simple project before involving processing and a kinect where I only used a image sequence that changed when the distance changed of the user.

The problem I have now is with this project where I’m trying to move a Random gradient brush, via head tracking on the kinect. I have made a piece of code for this where it tracks the mouseX and mouseY but how do I change these coordinates to track a head of the user on the kinect?

the code:

```auto
ArrayList<Brush> brushes; 

void setup() {
  size(displayWidth, displayHeight);

  brushes = new ArrayList<Brush>();
  for (int i = 0; i < 10; i++) {
    brushes.add(new Brush());
  }
}

void draw() {
  PFont font;
  font = createFont("Montserrat-Regular.otf", 12);
  textFont(font);
  fill(0);
  text("SS20", 1250, 800);

// PImage img;
// img = loadImage("aura.jpg");
// image(img, 0, 0);
// tint(255,20); 

  fill(255, 7);
  rect(0, 0, width, height);
  for (Brush brush : brushes) {
    brush.paint();
  }
}

void mouseMoved() {
  setup();
}

class Brush {
  float angle;
  int components[];
  float x, y;
  color clr;

  Brush() {
    angle = random(TWO_PI);
    x = random(width);
    y = random(height);
    clr = color(random(255), random(255), random(255), 15);
    components = new int[10];
    for (int i = 0; i < 10; i++) {
      components[i] = int(random(1, 1));
    }
  }

  void paint() {
    float a = 0;
    float r = 0;
    float x1 = x;
    float y1 = y;
    float u = random(0.5, 1);

    fill(clr);
    noStroke();    

    beginShape();
    while (a < TWO_PI) {
      vertex(x1, y1); 
      float v = random(0.95, 1);
      x1 = mouseX + r * cos(angle + a) * u * v;
      y1 = mouseY + r * sin(angle + a) * u * v;
      a += PI / 150;
      for (int i = 0; i < 2; i++) {
        r += sin(a * components[i]);
      }
    }
    endShape(CLOSE);

    if (x < 0 || x > width ||y < 0 || y > height) {
      angle += HALF_PI;
    }

    x += 0 * cos(angle);
    y += 0 * sin(angle); 
    angle += random(-0.01, 0.01);
  }
}

```

---

<div class="post-metadata">

**Author:** ![figraham](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/figraham/32/4161_2.png) [@figraham](https://discourse.processing.org/u/figraham)\
**Post date:** [March 27, 2019, 7:59pm UTC](https://discourse.processing.org/t/head-tracking-gradient-brushes/9684/2 "2019-03-27T19:59:02Z")

</div>

The way I would approach this is to use [opencv for processing](https://github.com/atduskgreg/opencv-processing#facedetection). I’d take a look at the face tracking example. Also I think the [live cam test](https://github.com/atduskgreg/opencv-processing/blob/master/examples/LiveCamTest/LiveCamTest.pde) is using face tracking as the example. It looks like it gives you rectangles. So you could convert that to a point by averaging the x and width and then the y and height.

---

<div class="post-metadata">

**Author:** ![daankuyper](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/daankuyper/32/4315_2.png) [@daankuyper](https://discourse.processing.org/u/daankuyper)\
**Post date:** [March 28, 2019, 9:26am UTC](https://discourse.processing.org/t/head-tracking-gradient-brushes/9684/3 "2019-03-28T09:26:36Z")

</div>

But why am I not able to do this with the Kinect?

---

<div class="post-metadata">

**Author:** ![figraham](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/figraham/32/4161_2.png) [@figraham](https://discourse.processing.org/u/figraham)\
**Post date:** [March 29, 2019, 8:45pm UTC](https://discourse.processing.org/t/head-tracking-gradient-brushes/9684/4 "2019-03-29T20:45:10Z")

</div>

Sorry it took me a while to follow up. If you are using windows and the [KinectPV2](http://codigogenerativo.com/code/kinectpv2-k4w2-processing-library/) library then there a number of ways to approach head tracking. You can you the [skeleton tracker](https://github.com/ThomasLengeling/KinectPV2/blob/master/KinectPV2/examples/SkeletonMaskDepth/SkeletonMaskDepth.pde) or the [face tracking](https://github.com/ThomasLengeling/KinectPV2/blob/master/KinectPV2/examples/SimpleFaceTracking/SimpleFaceTracking.pde) examples as a guide for where to go.

As far as I know this kind of stuff isn’t available in openkinect for processing because it relies on the Windows SDK. You could still try feeding the kinect image into opencv but I don’t know how opencv detects faces. It might have trouble with a grayscale depth image.