How can I make this work? (PImages) (Solved)

SarahJ

I am currently writing a sketch that will display a different image each time a button on the screen is clicked. There is a default image that appears when the program starts (like how a dress up game would work). I would like for the image to be replaced with a new image, and that one to be replaced with the next image, and so on. Unfortunately, I'm not quite sure how to do this. I'm thinking an array might help, but I'm not sure how I'd use that in here either. I'm using Javascript. Please help. Thanks!

kfrajer

I would like for the image to be replaced with a new image

What action would drive to change images?

If I understand what you need, for example shopping for sunglasses, what you want is for an image to change for each sunglasses in your shopping list. (I just made an scenario where I picture a dress up game). You could use arrays:

http://p5js.org/examples/objects-array-of-objects.html

What code do you have so far?

Kf

SarahJ

What action would drive to change images?

I am attempting to make the image change with mouseClicked(), but it's not working.

What code do you have so far?

I have quite a bit (for me anyway). I'll put all of it for context since there's a couple other things I did before running into this issue. This is what I did while I was waiting for response. Basically, everything runs fine until I attempt to click the "animal" button (labeled either dog or cat depending on which the user chooses). I made a global variable "int num;" and attempted to make it increase every time the user clicks the animal button, but the number never changes. Depending on which number is stored in num, the picture should change, but since num is always 0, it never does. Do you know a way to fix this or just an easier way to do this in general? Thanks!

My Code:

//Sarah Ortiz //PImages to use PImage model; PImage whiteCat; PImage blackCat; PImage calicoCat; PImage tabbyCat; PImage whiteDog; PImage brownDog; PImage blackDog; PImage greyDog;

//number of times animal button is clicked int num; //this is what won't change

//x and y position of model and dog/cat int modelX; int modelY; int animalX; int animalY; //background color float red; float blue; float green; float alpha;

//width and height of buttons int buttonWidth; int buttonHeight;

//x and y positions for dog and cats buttons int dogsX; int catsX; int buttonsY; //same for both

//x and y positions of text inside dogs/cats buttons int dogsTextX; int catsTextX; int orX; int textY; //same for all text

//determines whether or not dog/cat button was clicked boolean mouseClicked;

//determines if the clothes buttons and model can move up boolean clothes; //determines if model and animal can move left boolean modelLeft;

//x and y positions of clothes int clothesX; int[] clothesY;

//x and y positions of text inside the clothes buttons int clothesTextX; int[] clothesTextY;

//determines whether dogs or cats was selected boolean dog; boolean cat;

void setup() { size(1000,600); red = random(200); green = random(200); blue = random(200); alpha = random(50, 256); background(red, green, blue, alpha);

//initialize PImages model = loadImage("Model.png"); whiteCat = loadImage("whiteCat.png"); blackCat = loadImage("blackCat.png"); calicoCat = loadImage("calicoCat.png"); tabbyCat = loadImage("tabbyCat.png"); whiteDog = loadImage("whiteDog.png"); blackDog = loadImage("blackDog.png"); brownDog = loadImage("brownDog.png"); greyDog = loadImage("greyDog.png");

//num = 0;

//all other initializations modelX = 300; modelY = height + 30; animalX = 570; animalY = height + 380;

buttonWidth = width/5; buttonHeight = 100;

dogsX = width/4 + 5; catsX = width - (width/4 - 10); buttonsY = height/2;

dogsTextX = width/4 - 40; catsTextX = width - width/4 - 30; orX = width/2 - 20; textY = height/2 + 10;

mouseClicked = false; clothes = false; modelLeft = false; dog = false; cat = false;

`clothesX = width - width/7; clothesY = new int[5]; fillClothesY(clothesY);

clothesTextX = width - width/4 + 40; clothesTextY = new int[5]; fillClothesTextY(clothesTextY); }`

void draw() { background(red, green, blue, alpha); line(width/2, 0, width/2, 700); //for alignment drawButtons(); moveButtons(10); moveClothesButtons(10); drawModels(); moveModels(2); println(num); //debugging - this is the number that won't change }

void mouseClicked() { if(mouseX > (dogsX - buttonWidth/2) && mouseX < (dogsX + buttonWidth/2) && mouseY > (buttonsY - buttonHeight/2) && mouseY < (buttonsY + buttonHeight/2)) { //runs moveButtons mouseClicked = true; dog = true; } if(mouseX > (catsX - buttonWidth/2) && mouseX < (catsX + buttonWidth) && mouseY > (buttonsY - buttonHeight/2) && mouseY < (buttonsY + buttonHeight)) { //runs moveButtons mouseClicked = true; cat = true; } if(mouseX > clothesX && mouseX < clothesX + buttonWidth && mouseY > height - 200 && mouseY < 150) { //determines which animal should be drawn on the screen num++; //again, not working if (num == 4) { num = 0; } } }

//fillClothesY //Paramteres: y position array //Return: none //evenly spaces the clothes buttons offscreen void fillClothesY(int[] y) { for (int i = 0; i < y.length; i++) { //starts offscreen y[i] = height + ((i * 110) + 80); } }

//fillClothesTextY //Paramteres: y position array //Return: none //evenly spaces the clothes text offscreen void fillClothesTextY(int[] y) { for (int i = 0; i < y.length; i++) { y[i] = height + ((i*110) + 95); } }

//drawButtons //Perameters: none //Return: none //draws dogs and cats buttons to the screen //draws clothes buttons off screen //draws the text to the screen void drawButtons() { //dogs/cats rectMode(CENTER); fill(255); noStroke(); rect(dogsX,buttonsY,buttonWidth, buttonHeight, 10); rect(catsX, buttonsY, buttonWidth, buttonHeight, 10);

//dogs/cats text fill(0); textSize(35); text("Dogs", dogsTextX, textY); text("or", orX, textY); text("Cats", catsTextX, textY);

//clothes buttons fill(255); for(int i = 0; i < clothesY.length; i++) { rect(clothesX, clothesY[i], buttonWidth, buttonHeight, 10); } //clothes text fill(0); text("Hair", clothesTextX, clothesTextY[0]); text("Top", clothesTextX, clothesTextY[1]); text("Bottoms", clothesTextX, clothesTextY[2]); text("Shoes", clothesTextX, clothesTextY[3]); if (dog == true) { text("Dog", clothesTextX, clothesTextY[4]); } else if (cat == true) { text("Cat", clothesTextX, clothesTextY[4]); } }

//moveButtons //Perameters: speed at which buttons move //Return: none //moves the dogs/cats buttons out of the screen void moveButtons(int speed) { if (mouseClicked == true) { buttonsY = buttonsY - speed; textY = textY - speed; if(buttonsY == -100) { buttonsY = -100; textY = -100; mouseClicked = false; clothes = true; } } }

//moveClothesButtons //Parameters: speed at which buttons will slide into screen //Return: none //moves clothes buttons onto screen void moveClothesButtons(int speed) { if (clothes == true) { for(int i = 0; i < clothesY.length; i++) { clothesY[i] = clothesY[i] - speed; clothesTextY[i] = clothesTextY[i] - speed; modelY = modelY - speed/5; animalY = animalY - speed/5; //println(clothesTextY[i]); debugging if(clothesY[i] == (i * 110) + 80) { clothesY[i] = (i * 110) + 80; clothesTextY[i] = (i * 110) + 95; modelY = 30; animalY = 380; clothes = false; modelLeft = true; } } } }

//drawModels //Perameters: none //Return: none //draws the model and dog or cat to screen void drawModels() { if(dog == true) { image(model,modelX,modelY); switchAnimal(); } if(cat == true) { image(model, modelX,modelY); switchAnimal(); } }

//switchAnimal //Parameter: none //return: none //switches the png of the first animal with another depending on the value of num void switchAnimal() { if(dog == true) { if (num == 0) { image(whiteDog,animalX,animalY); } if (num == 1) { image(brownDog,animalX,animalY); } if (num == 2) { image(blackDog,animalX,animalY); } if (num == 3) { image(greyDog,animalX,animalY); } } if(cat == true) { if (num == 0) { image(whiteCat,animalX,animalY); } if (num == 1) { image(blackCat,animalX,animalY); } if (num == 2) { image(calicoCat,animalX,animalY); } if (num == 3) { image(tabbyCat,animalX,animalY); } } }

//moveModels //Parameters: none //Return: None //moves the model and dog/cat to the left of the screen void moveModels(int speed) { if(modelLeft == true) { modelX = modelX - speed; animalX = animalX - speed; if(modelX == 50) { modelX = 50; animalX = 320; modelLeft = false; } } }

SarahJ

Turns out I typed the x and y coordinates wrong. I feel really dumb. Thanks anyway!

kfrajer

Regarding your first question, here is an example sketch showing how to work with an array of PImage elements:

https://forum.processing.org/one/topic/loading-pimage-into-an-array.html

Notice that you can use this type of array to describe your animals as well. You could have an array for dogs and one for cats. If in the future you want to add more dogs or cats, you would only need to expand the size of their arrays.

Related to your second question, num always shows 0 because it doesn't seem to be incremented. Looking are your code, it suppose to increment in your clothes button. However there is a trick. You seem to work with a set of coordinates for your buttons, but then you move your buttons.

I couldn't figure out the sequence of events and what position you were referring to when clicking your buttons. I would like to suggest to introduce this next class into your code, only if you are comfortable working with classes:

class Button {
  String label;
  float x;      
  float y;    
  float w;    
  float h;    

  // constructor
  Button(String labelB, float xpos, float ypos, float widthB, float heightB) {
    label = labelB;
    x = xpos;
    y = ypos;
    w = widthB;
    h = heightB;
  }

  void Draw() {
    fill(218);
    stroke(141);
    rect(x, y, w, h, 10);
    textAlign(CENTER, CENTER);
    fill(0);
    text(label, x + (w / 2), y + (h / 2));
  }

  boolean MouseIsOver() {
    if (mouseX > x && mouseX < (x + w) && mouseY > y && mouseY < (y + h)) {
      return true;
    }
    return false;
  }
}

Here is a sample code showing the class in action. I demonstrate the hover effect (You don't need this one) and the click action/response. Introducing this code in your sketch would make things easier for you to control. Just keep in mind that when drawing these buttons, you need to operate in rectMode(CORNER). This is important because your rectMode in your sketch is CENTER.

Button b1;
String onClickStr="";
void setup() {
  size(600, 400);
  rectMode(CORNER);
  textAlign(CENTER, CENTER);
  b1=new Button("Tap me!", width*0.2, 200, width*0.6, 50);
}

void draw() {
  background(92);
  b1.Draw();

  if (b1.MouseIsOver()==true) {
    text("On button", width/2.0, height*0.75);
  } else {
    text("Away from button", width/2.0, height*0.75);
  }  

  text(onClickStr, width/2.0, height*0.9);
}

void mouseReleased() {
  if (b1.MouseIsOver()==true) {
    onClickStr="Clicked on Button!!!";
  } else {
    onClickStr="Clicked outside of button";
  }
}

I hope this helps,

Kf

SarahJ

Thank you so much! I ended up finding the problem on my own, but this is very useful information.