# Processing Kinect Tracking - Change .jpg file to .gif -

**URL:** <https://discourse.processing.org/t/processing-kinect-tracking-change-jpg-file-to-gif/15865>\
**Category:** Libraries\
**Created:** [November 27, 2019, 11:42am UTC](https://discourse.processing.org/t/processing-kinect-tracking-change-jpg-file-to-gif/15865 "2019-11-27T11:42:38Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![12345](https://avatars.discourse-cdn.com/v4/letter/1/ec9cab/32.png) [@12345](https://discourse.processing.org/u/12345)\
**Post date:** [November 27, 2019, 11:42am UTC](https://discourse.processing.org/t/processing-kinect-tracking-change-jpg-file-to-gif/15865/1 "2019-11-27T11:42:38Z")

</div>

Hi, I’m currently having trouble trying to change a jpg which is moving with the tracker into a gif file - so multiple images can be shown whilst moving around a screen.

Alternatively I’m trying to load more than one image, would this be to do with image arrays? So the image changed and left a trail of new images on a loop.

I’m not sure if I have explained this well but I have attached my code. Any help would be greatly appreciated! Thank you

```auto
import org.openkinect.freenect.*;
import org.openkinect.freenect2.*;
import org.openkinect.processing.*;
import org.openkinect.tests.*;
import org.openkinect.freenect.*;

import org.openkinect.processing.*;

// The kinect stuff is happening in another class
KinectTracker tracker;
Kinect kinect;

int[] paint_x = new int[10000];
int[] paint_y = new int[10000];
int index =0;
PImage art;

PImage bg;
int y;

void setup() {
  size(1450, 825);
   
 kinect = new Kinect(this);
  tracker = new KinectTracker();
  art = loadImage("Desktop/SECONDTRACKPROTOTYPE/artone.jpg");
   bg = loadImage("Desktop/SECONDTRACKPROTOTYPE/WhiteCanvas.jpg");
}

void draw() {
  background(bg);
  
  
  line (0, y, width, y);
  
  y ++;
  if (y>height) {
    y=0;
  }

  // Run the tracking analysis
  tracker.track();
  // Show the image
  //tracker.display();

  // Let's draw the raw location
  PVector v1 = tracker.getPos();
  fill(50, 100, 250, 200);
  noStroke();
  ellipse(v1.x, v1.y, 20, 20);

  // Let's draw the "lerped" location
  PVector v2 = tracker.getLerpedPos();
  fill(50, 100, 250, 200);
  noStroke();
  ellipse(v2.x, v2.y, 100, 100);
  paint_x[index]=int(v2.x);
  paint_y[index]=int(v2.y);
  index ++;
  // Display some info
  int t = tracker.getThreshold();
  fill(0);
  
    
    for(int i=0;i<paint_x.length; i++){
      image (art, paint_x[i], paint_y[i]);
    }
}

// Adjust the threshold with key presses
void keyPressed() {
  int t = tracker.getThreshold();
  if (key == CODED) {
    if (keyCode == UP) {
      t+=5;
      tracker.setThreshold(t);
    } else if (keyCode == DOWN) {
      t-=5;
      tracker.setThreshold(t);
    }
  }
}

```

---

<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:** [November 27, 2019, 1:26pm UTC](https://discourse.processing.org/t/processing-kinect-tracking-change-jpg-file-to-gif/15865/2 "2019-11-27T13:26:44Z")

</div>

i try to get the idea, ignoring the code,

do you want to use a animated GIF in processing?

```auto
String infile = "hit-the-fan.gif";
PImage img;

void setup() {
  img = loadImage(infile);
}

void draw() {
  image(img, 0, 0);
}

```

the animation will not show.

please ignore that if i understand you wrong.