Need Help constraining bouncing images to boundary of canvas

Hello Everyone, I am Mel! I have very little experience with processing, but I have an art project that I've created. My goal is to have 4 shapes bouncing around the screen, and when you click one, a sound will play. So far, I have figured out how to create the shapes, make them move around. However, my first problem is that only the flower image I have stays mostly within the screen. All other shapes are far off and barely show up in one rotation. I understand that this is similar to "bouncing ball" exercises, yet I'm still lost on how to keep the four of my shapes with the boundary.

This below is what I have so far. Sorry that you wont be able to play the code, but hopefully I was detailed enough for you to get the picture.Thank you for reading this and any help is much appreciated!!!

import ddf.minim.*;

Minim minim;
AudioPlayer winter;
AudioPlayer summer;
AudioPlayer spring;
AudioPlayer autumn;


PImage flower;
PImage fire;
PImage sun;
PImage snowman;
float xpos, ypos;    // Starting position of shape

float xspeed = 5;  // Speed of the shape
float yspeed = 10;  // Speed of the shape

int xdirection = 1;  // Left or Right
int ydirection = 1;  // Top to Bottom
import processing.sound.*;



void setup() {
  size(800, 800);
  noStroke();
  frameRate(50);
  flower = loadImage("Flower.png");
  flower.resize(200, 200);
  sun = loadImage("Sun.png");
  sun.resize(200, 200);
  fire = loadImage("campfire.png");
  fire.resize(200, 200);
  snowman = loadImage("snowman.png");
  snowman.resize(200, 200);
  xpos = width/1.8;
  ypos = height/2;


  // will play sound
  minim = new Minim(this);
  winter = minim.loadFile("Winter Mix.wav");
  summer = minim.loadFile("Summer Mix.wav");
  spring = minim.loadFile("Spring Mix.wav");
  autumn = minim.loadFile("Autumn Mix.wav");
}

void draw() {
  background(#CBE9F0);

  // Update the position of the shape
  xpos = xpos + ( xspeed * xdirection );
  ypos = ypos + ( yspeed * ydirection );

  // Test to see if the shape exceeds the boundaries of the screen
  // If it does, reverse its direction by multiplying by -1
  if (xpos > width || xpos < 5) {
    xdirection *= -1;
  }
  if (ypos > height || ypos < 10) {
    ydirection *= -1;
  }

  // Draw the shape
  image(flower, xpos, ypos);
  image(sun, -xpos, ypos);
  image(fire, xpos, -ypos);
  image(snowman, -xpos, -ypos);
}
void keyPressed()
{
  if (winter.isPlaying() )
  {
    winter.pause();
  } else if (winter.position() == winter.length() )
  {
    winter.rewind();
    winter.play();
  }
  summer.rewind();
  summer.play();
}
void mousePressed()
{
  spring.rewind();
}