# Resize sketch error

**URL:** <https://discourse.processing.org/t/resize-sketch-error/647>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [June 2, 2018, 7:51pm UTC](https://discourse.processing.org/t/resize-sketch-error/647 "2018-06-02T19:51:59Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![clab](https://avatars.discourse-cdn.com/v4/letter/c/c89c15/32.png) [@clab](https://discourse.processing.org/u/clab)\
**Post date:** [June 2, 2018, 7:51pm UTC](https://discourse.processing.org/t/resize-sketch-error/647/1 "2018-06-02T19:51:59Z")

</div>

Hi all I am trying to resize my sketch but I keep getting a horrible error, and I am not sure what to do.

```auto
import SimpleOpenNI.*;
import processing.opengl.*;
SimpleOpenNI kinect;

int closestValue;
float minT = 500;
float maxT = 2000;
PImage img;

// declare global variables for the
// previous x and y coordinates
int previousX;
int previousY;

int blob_array[];
int userCurID;
int cont_length = width*height;

color c1;
color c2;
float textColor = 0;
PFont Font1;

void setup(){
  size(1350, 1150);
  //size(1920, 1280);
  frameRate(20);
  surface.setResizable(true);
  noStroke();
  kinect = new SimpleOpenNI(this);
  kinect.enableDepth();
  kinect.setMirror(true);
  kinect.enableUser();
  colorMode(HSB, 100);
  img = createImage(width, height, RGB);
  smooth();
  Font1 = createFont("Arial Bold", 20);
  blob_array=new int[cont_length];
  c1 = color(random(36), 255, 255);
  c2 = color(random(36), 255, 255);
}

void draw(){
  background(0);
  
  img.resize(width, height);

  kinect.update();
  loadPixels();
  
  int[] depth = kinect.depthMap();

  float sumX = 0;
  float sumY = 0;
  float totalPixels = 0;

  int[] userMap =null;
  int userCount = kinect.getNumberOfUsers();
  if (userCount > 0) {
  userMap = kinect.userMap();
  }

    for(int y = 0; y < 480; y++){
      for(int x = 0; x < 640; x++){
        float n = map(y, 0, 480, 0, 1);
        // randomized gradient color
        if (second() % 10 == 0) {
          c1 = color(random(36), 255, 255);
          c2 = color(random(36), 255, 255);
        }
        color newc = lerpColor(c1, c2, n);
        stroke(newc);
        //line(0, y, img.width, y);
        int offset = x + y * 640;
        int d = depth[offset];

      // min and max threshold that is set
        if(d > minT && d < maxT && x > 100){
          img.pixels[offset] = newc;

      // if there is no user detected
        if (userMap != null && userMap[offset] > 0) {
          userCurID = userMap[offset];
          blob_array[offset] = 255;

          fill(200,0,200);
        }

          closestValue = d;
          sumX += x;
          sumY += y;
          totalPixels++;
        } else {
      // makes background black
          img.pixels[offset] = color(0);
      }
    }
   }
   // updates the img pixels
    img.updatePixels();
    image(img, 0, 0, width, height);
    // get center of mass of a user
    //float avgX = sumX / totalPixels;
    //float avgY = sumY / totalPixels;

    IntVector userList = new IntVector();
    kinect.getUsers(userList);
    for (int i=0; i<userList.size(); i++) {
      int userId = userList.get(i);
    // get center of mass of a user
    PVector position = new PVector();
    kinect.getCoM(userId, position);
    // rainbow text color
    textSize(20);
    if (textColor >= 255) {
      textColor=0;
    } else {
      textColor++;
    }
    kinect.convertRealWorldToProjective(position, position);
    textFont(Font1);
    text("you're hot", position.x, position.y);
    fill(textColor, 255,255);
  }
}

```

This is my code and this is my error

 ![07%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/cb0ab9cc2d856f26ce46de80008db9b60eabc413.png)

Please let me know what I can do to fix this error. Thank you in advance!

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [June 3, 2018, 12:20am UTC](https://discourse.processing.org/t/resize-sketch-error/647/2 "2018-06-03T00:20:22Z")

</div>

I don’t see where you are resizing your sketch. You are resizing your image, which you are doing in `draw()` which is probly not a good idea but this is not causing this error.

What you need to do is to run a simple sketch using the P3D renderer and see if you can reproduce the problem. Remove the statement `surface.setResizable(true);` and see if that line is the culprit. For this, you should consider writing and MCVE that reproduces the error. Don’t forget to comment about your OS, Processing version and also talk about your graphics card. With an mcve, people having machines like yours could test your code and verify if they can reproduce the effect.

Kf

---

<div class="post-metadata">

**Author:** ![clab](https://avatars.discourse-cdn.com/v4/letter/c/c89c15/32.png) [@clab](https://discourse.processing.org/u/clab)\
**Post date:** [June 3, 2018, 4:34pm UTC](https://discourse.processing.org/t/resize-sketch-error/647/3 "2018-06-03T16:34:30Z")

</div>

Sorry about that. I am using macOS with Kinect v1.

`surface.setResizable(true)` is not the problem in this case because I have commented it out before and I still get the error. With this I think the error has to do with `img = createImage(width, height, RGB);` where it is not creating the image with the width and height provided. I have another code that I have worked with that is able to resize the sketch when running but I am not sure why this one is not working… I have a feeling it has to do with the `createImage()` but I need to `createImage()`.

This is the code that I have that is able to resize the sketch:

```auto
import processing.opengl.*;
import org.openkinect.freenect.*;
import org.openkinect.processing.*;
import SimpleOpenNI.*;

SimpleOpenNI kinect;

int closestValue;
int closestX;
int closestY;
int userID;
int[] userMapping;
PImage depthImage;
PImage cam;

void setup()
{
    size(640,480);
    //size(1920, 1280);
    frameRate(25);
    background(0);
    surface.setResizable(true);
    noStroke();
    fill(102);
    kinect = new SimpleOpenNI(this);
    kinect.setMirror(true);
    kinect.enableDepth();
    kinect.enableUser();
}

void draw()
{
    background(51);
    kinect.update();

    depthImage = kinect.userImage();
    loadPixels(); // prepare the color pixels
    userMapping = kinect.userMap(); // get pixels for the user tracked
    cam = kinect.userImage().get();
    image(cam, 0, 0, width, height);
    int[] depthValues = kinect.userMap();

    IntVector userList = new IntVector();
    kinect.getUsers(userList);

    for (int i=0; i<userList.size(); i++) {
      int userId = userList.get(i);

    PVector position = new PVector();
    kinect.getCoM(userId, position);

    //kinect.convertRealWorldToProjective(position, position);
    fill(255,255,255);
    textSize(40);
    text("you're hot", position.x, position.y, 25, 25);

    loadPixels();
    for (int y=0; y < 480; y++) {
        for (int x=0; x < 640; x++) {
            int pixel = x + y * 640;
            int currentDepthValue = depthValues[pixel];

            if ( currentDepthValue > 610 || currentDepthValue > 1525 || currentDepthValue < closestValue)
                pixels[pixel] = color(0,0,0);
        }
    }
    updatePixels();
    }
}

```

Please let me know what you guys think! thank you!

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [June 3, 2018, 6:12pm UTC](https://discourse.processing.org/t/resize-sketch-error/647/4 "2018-06-03T18:12:41Z")

</div>

> [@clab](#):
>
> int cont\_length = width\*height;

Ok, this doesn’t address your problem, but I want to point out this line is not right, referring to your first post. You need to assign this value **inside** `setup()` as width and height are never valid in a global scope.

Also, if you create the image with a dimension of width x height, then there is no need to resize it in `draw()`.

Also you need to call `img.loadPixels()` which it is different to just calling `loadPixels()`. Do you spot the difference? The second one loads the pixels of the current main sketch, where all the drawing is taking place. The first one works on the pixels provided by the PImage object.

Also, what is the dimensions of the kinect image? Is it 480x640 pixels? if so, you should replace all `magic numbers` 480 and 640 by width and height.

If after implementing these changes, your image problem still persists, you will need to strip down your code to a minimum version that reproduces the problem. Implement the suggested changes first and see if it solves the issue.

Kf

---

<div class="post-metadata">

**Author:** ![clab](https://avatars.discourse-cdn.com/v4/letter/c/c89c15/32.png) [@clab](https://discourse.processing.org/u/clab)\
**Post date:** [June 3, 2018, 9:28pm UTC](https://discourse.processing.org/t/resize-sketch-error/647/5 "2018-06-03T21:28:18Z")

</div>

Sorry what do you mean by magic numbers?

---

<div class="post-metadata">

**Author:** ![clab](https://avatars.discourse-cdn.com/v4/letter/c/c89c15/32.png) [@clab](https://discourse.processing.org/u/clab)\
**Post date:** [June 3, 2018, 10:21pm UTC](https://discourse.processing.org/t/resize-sketch-error/647/6 "2018-06-03T22:21:17Z")

</div>

I was able to solve my resizing problem but now I have this part where it doesn’t center the sketch.  
I am raising my hand but nothing ☹ thanks in advance!

I have attached below

 ![17%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/c5f3455d7ffefee170d73214038feb47dfa09da9.png)

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [June 3, 2018, 10:26pm UTC](https://discourse.processing.org/t/resize-sketch-error/647/7 "2018-06-03T22:26:37Z")

</div>

Hmmm it is not important. Magic numbers refers to numbers that appear in your code that do the job “magically”. However, for clarity, those numbers, if constant, should be defined as constants. In your case, you do not need to do so as you have the following fields you can use instead: `width` and `height`. I encourage ppl to assign proper labels to their numbers in a sketch. In your case, it is very important. Why? Because you are working with three objects that have dimensions:

- Your sketch which you define via `size()`
- Your PImage object. Dimensions defined via `createImage()`
- Your kinect unit, which provides dimensions as dictated by the spec sheet of the device.

It is important because you can create a sketch or a PImage with different dimensions that your kinect unit. Nothing wrong with this, but assigning proper names to your variables will make your code easy to maintain and you will be able to spot errors yourself.

Kf

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [June 3, 2018, 10:28pm UTC](https://discourse.processing.org/t/resize-sketch-error/647/8 "2018-06-03T22:28:44Z")

</div>

It will be hard to debug as most ppl don’t have access to an unit. consider posting your latest code and feel free to guess what is wrong.

Kf

---

<div class="post-metadata">

**Author:** ![clab](https://avatars.discourse-cdn.com/v4/letter/c/c89c15/32.png) [@clab](https://discourse.processing.org/u/clab)\
**Post date:** [June 3, 2018, 10:34pm UTC](https://discourse.processing.org/t/resize-sketch-error/647/9 "2018-06-03T22:34:37Z")

</div>

@kfrajer thank you so much for your help with this! I very much appreciate your help! Down below I have attached my latest code. This is able to resize and everything but now I have an error of which it is not centered. I have my hand raised but it is not showing so because that part of the screen seems to be missing of some sort. I have also attached the photo below again. Thank you again.

```auto
import SimpleOpenNI.*;
import processing.opengl.*;
SimpleOpenNI kinect;

int closestValue;
float minT = 500;
float maxT = 2000;
PImage img;
PImage cam;

// declare global variables for the
// previous x and y coordinates
int previousX;
int previousY;

int blob_array[];
int userCurID;
int cont_length = 1450*1250;

color c1;
color c2;
float textColor = 0;
PFont metaBold;

void setup(){
  size(1450, 1250);
  //size(1920, 1280);
  frameRate(20);
  surface.setResizable(true);
  noStroke();
  kinect = new SimpleOpenNI(this);
  kinect.enableDepth();
  kinect.setMirror(true);
  kinect.enableUser();
  colorMode(HSB, 100);
  img = createImage(1450, 1250, RGB);
  img.resize(640,640);
  smooth();
  blob_array=new int[cont_length];
  c1 = color(random(36), 255, 255);
  c2 = color(random(36), 255, 255);
  metaBold = createFont("GOTHAM-BOLD.TTF", 20);
  //image(img, 0, 0, width, height);
}

void draw(){
  background(0);

  kinect.update();
  img.loadPixels();
  //image(img, 0, 0);
  
  cam = kinect.userImage().get();
  image(cam, 0, 0, width, height);
  int[] depth = kinect.depthMap();

  float sumX = 0;
  float sumY = 0;
  float totalPixels = 0;

  int[] userMap =null;
  int userCount = kinect.getNumberOfUsers();
  if (userCount > 0) {
  userMap = kinect.userMap();
  }

    for(int y = 0; y < 480; y++){
      for(int x = 0; x < 640; x++){
        float n = map(y, 0, 480, 0, 1);
        // randomized gradient color
        if (second() % 10 == 0) {
          c1 = color(random(36), 255, 255);
          c2 = color(random(36), 255, 255);
        }
        color newc = lerpColor(c1, c2, n);
        stroke(newc);
        //line(0, y, img.width, y);
        int offset = x + y * 640;
        int d = depth[offset];

      // min and max threshold that is set
        if(d > minT && d < maxT && x > 100){
          img.pixels[offset] = newc;

      // if there is no user detected
        if (userMap != null && userMap[offset] > 0) {
          userCurID = userMap[offset];
          blob_array[offset] = 0;

          //fill(200,0,200);
        }

          closestValue = d;
          sumX += x;
          sumY += y;
          totalPixels++;
        } else {
      // makes background black
          img.pixels[offset] = color(0);
      }
    }
   }
   // updates the img pixels
    img.updatePixels();
    image(img, 0, 0,width, height);
    // get center of mass of a user
    //float avgX = sumX / totalPixels;
    //float avgY = sumY / totalPixels;

    IntVector userList = new IntVector();
    kinect.getUsers(userList);
    for (int i=0; i<userList.size(); i++) {
      int userId = userList.get(i);
    // get center of mass of a user
    PVector position = new PVector();
    kinect.getCoM(userId, position);
    // rainbow text color
    textSize(20);
    if (textColor >= 255) {
      textColor=0;
    } else {
      textColor++;
    }
    kinect.convertRealWorldToProjective(position, position);
    textFont(metaBold);
    text("you're hot", position.x, position.y);
    fill(textColor, 255,255);
  }
}

```

 ![17%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/c5f3455d7ffefee170d73214038feb47dfa09da9.png)

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [June 6, 2018, 1:17am UTC](https://discourse.processing.org/t/resize-sketch-error/647/10 "2018-06-06T01:17:44Z")

</div>

I don’t have an unit to test your code on. I think your cam could have a resolution that is different from your depth data. Can you check the documentation and confirm what is the resolution of your kinect RGB data and the resolution of the depth data? Or could you run these lines in `draw()`:

```java
println("Depth length is ", depth.length);
println("Cam size is ",cam.width, cam.height);

```

Kf