have a question about displaying an array of an image

carminehk · April 2018

so im back again, i need to use an array to display an image and cant really seem to get it currently i have a if mousePressed statement because im not sure how to initialize the if statement to loop the array i guess?

here is what i have

main class

PImage img_boat;
PImage img_Iceberg;
Boat my_boat;
Iceberg[] my_iceberg;
float mouseX=50;
float mouseY;
float posX=5;
float posY=150;
int totalIceberg=0;

void setup() {
  size(800, 400);
  background(255);
  img_boat=loadImage("imgBoat.png");
  my_boat=new Boat();
  my_iceberg = new Iceberg[75];
}
void draw() {
  background(31, 80, 222);
  my_boat.setLocation(mouseX, mouseY);
  my_boat.display();
}

void mouseClicked() {
  if (mousePressed==true) {
    my_iceberg[totalIceberg] = new Iceberg();
    totalIceberg++;
    if ( totalIceberg >= my_iceberg.length)
      totalIceberg = 0;
  }
}


void keyPressed() {
  if (keyPressed) {
    if (key =='W' || key == 'w') {
      posY--;
    }
    if (key== 'd' || key=='D') {
      posX++;
    }
    if (key== 'a' || key =='A') {
      posX--;
    }
    if (key== 's' || key =='S') {
      posY++;
    }
  }
}

class Boat {
  float x, y;


  Boat() {
    x=width/2;
    y=height/2;
  }
  void setLocation(float tempX, float tempY) {
    x=tempX;
    y=tempY;
  }
  void display() {
    image(img_boat, posX, posY);
    img_boat.resize(80, 80);
  }
}

class Iceberg {
  float x, y; //variables for location
  float speed; //variabke for speed
  float c;
  float r;

  Iceberg() {
    x=125;
    y=25;
    speed=random(1, 3);
    r=6;
    c=color(30,60,150);
    img_Iceberg=loadImage("iceberg.png");
  }
  void setLocation(float tempoX, float tempoY) {
    x=tempoX;
    y=tempoY;
  }

  void move() {
    x=x+speed;
    if (x> width) x=0;
    y=y-speed;
    if (y<-50)y=400;
  }


  void display() {  //displays iceberg
    fill(c);
    noStroke();
    image(img_Iceberg,x,y);
  }
}

outcome of this is its a game where you need to navigate your ship through the moving icebergs

not sure what im missing or what i could solve it with since rn my icebergs arent displaying, i had a .display function being used but the example im using doesnt use that also it doesnt use an image soo.

thanks in advance seem everyone here always seems to help

koogs · April 2018

please add this to the old question.

carminehk · April 2018

ok just added it

kfrajer · April 2018

Your code requires heavy modification.

I can see you need to work in some basic concepts.

Let's start

The declare mouseX, mouseY in your code. Processing provides you these variables. When you decalre a new set of variables in the global scpe, you will overshadow Processing's variables and it will lead to lots of headaches. Check the reference for mouseX and mouseY to learn more.
Check the following code:

void keyPressed() { //if (keyPressed) {

No need to check for the variable keyPressed as you are already in the keyPressed() function which it is triggered only when a key is pressed. Using the keyPressed variable is redundant.

You are attempting to control your boat with your mouse and your keyboard. Not a recommended option. My suggestion is that you stick to one or the other.
To see the icebergs, you need to draw them.
To see multiple icebergs, you need to make sure they are placed in different positions.
I don't have the images of your boat or icebergs, but I do hope your icebergs are small images. If you need to make them smaller, check the resize() function describe inside the PImagekeyword in the Reference section in the Processing site.
I didn't test the code as I do not have the images. Check the changes I made.
Naming your variables: Iceberg[] my_iceberg; Since this array will hold multiple icebergs, it should be plural. This will make your code more clear.
Check how I init your array container for the icebergs in setup().

Kf

final int N_ICEBERGS=15;

PImage img_boat;
PImage img_Iceberg;

Boat my_boat;
Iceberg[] my_iceberg;

//float mouseX;  //CHANGED
//float mouseY;  //CHANGED
float posX=5;
float posY=150;
int totalIceberg=0;

void setup() {
  size(800, 400);
  background(255);
  img_boat=loadImage("imgBoat.png");
  my_boat=new Boat();
  my_iceberg = new Iceberg[N_ICEBERGS];

  for (int i=0; i<N_ICEBERGS; i++) {    //CHANGED
    my_iceberg[i]=new Iceberg();
  }
}
void draw() {
  background(31, 80, 222);
  //my_boat.setLocation(mouseX, mouseY);  //CHANGE
  my_boat.display();

  for (Iceberg ic : my_iceberg) {    //CHANGED
    ic.display();
    //ic.update(); // <----maybe a good idea (?)
  }
}

void mouseClicked() {
}


void keyPressed() {
  //if (keyPressed) {  //CAHNGE
  if (key== 'd' || key=='D') {
    posX++;
  }
  if (key== 'a' || key =='A') {
    posX--;
  }
  if (key =='W' || key == 'w') {
    posY--;
  }
  if (key== 's' || key =='S') {
    posY++;
  }
  //}  //CAHNGE

  //Check for boundaries
  if(posX<0) posX=0;
  if(posX>width) posX=width;
}

class Boat {
  float x, y;


  Boat() {
    x=width/2;
    y=height/2;
  }
  void setLocation(float tempX, float tempY) {
    x=tempX;
    y=tempY;
  }
  void display() {
    image(img_boat, posX, posY);
    img_boat.resize(80, 80);
  }
}

class Iceberg {
  float x, y; //variables for location
  float speed; //variabke for speed
  float c;
  float r;

  Iceberg() { 
    x=random(width);   //CHANGE
    y=random(img_Iceberg.height, height-img_Iceberg.height);
    speed=random(1, 3);
    r=6;
    c=color(30, 60, 150);
    img_Iceberg=loadImage("iceberg.png");
  }
  void setLocation(float tempoX, float tempoY) {
    x=tempoX;
    y=tempoY;
  }

  void move() {
    x=x+speed;
    if (x> width) x=0;
    y=y-speed;
    if (y<-50)y=400;
  }


  void display() {  //displays iceberg
    fill(c);
    noStroke();
    image(img_Iceberg, x, y);
  }
}

koogs · April 2018

can you move that to the old question as well - i'm just about to delete this one.

carminehk · April 2018

ok so i have some questions in reply to what you posted; what does the ic.update do in line 33? also what does the for( iceberg ic: my_icebergs) statement does it do? is that changing iceberg to ic and now the ic.display in line 32 mean the image should be shown? (im not familiar with these since ive never used them)

also i had the mouseX and mouseY in there because it was in the example i was using but i did notice it was unnecessary since i had the keyPressed. since everything worked and i wasnt sure if it had any effect i figured leaving it wasnt an issue.

i get a lot of what you changed but i have some more questions now;

at line 88 i am getting an npe error and im not sure why also the image still isnt displaying which im not sure why if the ic.display in line 32 is meant to display it or if its not i need another display statement which i tried adding but gave a error for .display doesnt exist which confused me since i have a display function made in the iceberg class

thanks for taking the time to help me with my questions

kfrajer · April 2018

what does the ic.update do in line 33

That is a suggestion. You have a function for displaying. You can have a function for updating. For instance, icebergs could appear or disappear. Imaging a piece of ice bouncing above and below the surface (in reality it does not happen... but... heck... a cool game feature). Update could be used to update the position of the icebergs in case they drift over time.

also what does the for( iceberg ic: my_icebergs) statement does it do

Another way to write a for loop to iterate through all the elements of an array. Check this:

int[] vals={0,1,2,3,4,5};

for(int value:vals){
   println(value);
}

also i had the mouseX and mouseY in there because

Maybe it wasn't an issue in your code but that is because you created your own mouseX and mouseY fields at the beginning of your program. In your case, you can control your boat with the keyboard.

at line 88 i am getting an npe error

I should have mentioned the code above was not tested since I do not have your images. Now I see the problem. You need to load the image first, like this:

  Iceberg() {
    img_Iceberg=loadImage("iceberg.png");
    x=random(img_Iceberg.width, width-img_Iceberg.width);   
    y=random(img_Iceberg.height, height-img_Iceberg.height);
    speed=random(1, 3);
    r=6;
    c=color(30, 60, 150);
  }

Hope now everything works.

Kf

Howdy, Stranger!

Categories

In this Discussion

have a question about displaying an array of an image

Answers