Skip to content
Advertisement

Processing – Resize canvas based on jpg dimensions

I have a basic program where stock images form the background for a larger program – but a number of the images have slightly different sizes compared to each other.

My initial code loads up the background image and tries to set the canvas size based on the image dimensions:

    PImage bg;
    void setup() {
    bg = loadImage("102.jpg");
    println(bg.width);
    println(bg.height);
    wWidth = bg.width;
    wHeight = bg.height;
    size(wWidth,wHeight);
    }
    void draw() {
      background(bg);
    }

I get ‘IllegalStateException’ error bg.width and bg.height are 806 and 1229, when I include 806 and 1229 instead of wWidth and wHeight respectively, I get the output I want – would I need to declare the size() in a different way? Or would it be simpler to try and resize the jpg files via processing to the same size?

Advertisement

Answer

That would’ve worked in Processing 2, but things changed in Processing 3: you simply need to use settings().

Here’s a minimal sketch that loads in image and changes the sketch size to the image dimensions:

PImage img;

void settings(){
  img = loadImage("https://processing.org/img/processing-web.png");
  println(img.width, img.height);
  size(img.width, img.height);
}
void setup(){
  image(img, 0, 0);
}

You’re code would look something like:

PImage bg;
int wWidth;
int wHeight;

void settings(){
  bg = loadImage("102.jpg");
  println(bg.width);
  println(bg.height);
  wWidth = bg.width;
  wHeight = bg.height;
  size(wWidth, wHeight);
}

void setup() {
  
}
void draw() {
  background(bg);
}

As slightly simpler version would be:

PImage bg;

void settings(){
  bg = loadImage("102.jpg");
  println(bg.width);
  println(bg.height);
  size(bg.width, bg.height);
}

void setup() {
  
}
void draw() {
  background(bg);
}

The wWidth, wHeight variables might be redundant since Processing’s width,height variables store the same data after size() has been called.

Advertisement