Question

I hope someone can help me here. I’m pretty much a noob trying to make an interactive graphic showing soccer teams moving up or down FIFA rankings. I loaded pictures I created outside of Processing to represent the teams and I want them to move based on a mouseclick event.

My problem right now is that when I test the app it doesn’t size according to the settings I put in. Most of the images get cut off. I tried frame.setResizable() and while I can manipulate the size of the window to a degree my images are still cut off.

Below is my code and I am working on Processing 2.0B7 on a Macbook Pro running on OS X:

//Setting up the images that will go into the sketch

PImage img1;
PImage img2;
PImage img3;
PImage img4;
PImage img5;
PImage img6;
PImage img7;
PImage img8;
PImage img9;
PImage img10;
PImage img11;
PImage img12;
PImage img13;
PImage img14;
PImage img15;
PImage img16;
PImage img17;

//loading the images from the file
void setup() {
  size(600, 1200); 
  frame.setResizable(true);  
  img1 = loadImage("Click.png");
  img2 = loadImage("Team_Algeria.png");
  img3 = loadImage("Team_Angola.png");
  img4 = loadImage("Team_BurkinaFaso.png");
  img5 = loadImage("Team_CapeVerde.png");
  img6 = loadImage("Team_DRCongo.png");
  img7 = loadImage("Team_Ethiopia.png");
  img8 = loadImage("Team_Ghana.png");
  img9 = loadImage("Team_IvoryCoast.png");
  img10 = loadImage("Team_Mali.png");
  img11 = loadImage("Team_Morocco.png");
  img12 = loadImage("Team_Niger.png");
  img13 = loadImage("Team_Nigeria.png");
  img14 = loadImage("Team_SouthAfrica.png");
  img15 = loadImage("Team_Togo.png");
  img16 = loadImage("Team_Tunisia.png");
  img17 = loadImage("Team_Zambia.png");
}


int a = 0;

//Drawing the images into the sketch
void draw() {
  background(#000000);
  image(img1, 400, 100);
  image(img2, 100, 200);
  image(img3, 100, 260);
  image(img4, 100, 320);
  image(img5, 100, 380);
  image(img6, 100, 440);
  image(img7, 100, 500);
  image(img8, 100, 560);
  image(img9, 100, 620);
  image(img10, 100, 680);
  image(img11, 100, 740);
  image(img12, 100, 800);
  image(img13, 100, 860);
  image(img14, 100, 920);
  image(img15, 100, 980);
  image(img16, 100, 1040);
  image(img17, 100, 1100);
}

Answer 1

I am not sure what you mean by cutoff, but remember you are only stating positions, so if the image is bigger (in your case than 60 height), they will overlap on top of each other. What is the exact size of the png images you are loading?

Try assigning also size to the images, i.e. adding two more arguments as per the ref:

image(img2, 100, 200, whateverWidth, 60);  // I put 60 since it is the vertical space you are leaving between images

Does this help?