# How can I change Image background with mouse click?

**URL:** <https://discourse.processing.org/t/how-can-i-change-image-background-with-mouse-click/38189>\
**Category:** Beginners\
**Created:** [August 1, 2022, 3:27pm UTC](https://discourse.processing.org/t/how-can-i-change-image-background-with-mouse-click/38189 "2022-08-01T15:27:26Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![steven](https://avatars.discourse-cdn.com/v4/letter/s/94ad74/32.png) [@steven](https://discourse.processing.org/u/steven)\
**Post date:** [August 1, 2022, 3:27pm UTC](https://discourse.processing.org/t/how-can-i-change-image-background-with-mouse-click/38189/1 "2022-08-01T15:27:26Z")

</div>

I just want to make a 2D rpg games with the background of the game can change in different stages of the game. Please send help:((

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 1, 2022, 3:46pm UTC](https://discourse.processing.org/t/how-can-i-change-image-background-with-mouse-click/38189/2 "2022-08-01T15:46:26Z")

</div>

Hello,

Resources here:

[https://processing.org/tutorials/interactivity](https://processing.org/tutorials/interactivity)  
[https://processing.org/reference/mouseClicked\_.html](https://processing.org/reference/mouseClicked_.html) \< You should be able to adapt this to change the background.

`:)`

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [August 2, 2022, 10:50am UTC](https://discourse.processing.org/t/how-can-i-change-image-background-with-mouse-click/38189/3 "2022-08-02T10:50:58Z")

</div>

Hi @steven,

Sorry, but if you’re wondering how to set the proper background, the path to programming an RPG is a pretty demanding challenge…  
However, and as so often said, one grows with its tasks. 🙂

As it is always fun to do some coding…  
I just made a simple example for a game and how it could be structured and maybe you can get some ideas from it.  
(Doesn’t make much more than a movable player and sets the background of the room if the player is inside …)

Cheers  
— mnse

```auto
// Main Sketch

KeyHandler keyhandler;
World world;

void setup() {
  size(1000, 1000);
  keyhandler = new KeyHandler();
  world=new World();
}

void keyPressed() {
  keyhandler.update(key, true);
}

void keyReleased() {
  keyhandler.update(key, false);
}

void draw() {
  background(0);
  world.update();
  world.display();
}

// -----------------------------------------------------
public class KeyHandler {
  public final static int KEY_UP = 0;
  public final static int KEY_DN = 1;  
  public final static int KEY_LEFT = 2;
  public final static int KEY_RIGHT = 3;
  public final static int KEY_FIRE = 4;  
  private final boolean[] keyStates = new boolean[] {false, false, false, false,false};  
  public void update(char k, boolean state) {
    switch(k) {
    case 'w':
      keyStates[KEY_UP]=state;
      break;
    case 's':
      keyStates[KEY_DN]=state;
      break;
    case 'a':
      keyStates[KEY_LEFT]=state;
      break;
    case 'd':
      keyStates[KEY_RIGHT]=state;
      break;
    case ' ':
      keyStates[KEY_FIRE]=state;
      break;
    default:
    }
  } 
  public boolean isKeyOn(int k) {
    switch(k) {
    case KEY_UP: 
    case KEY_DN: 
    case KEY_LEFT: 
    case KEY_RIGHT: 
    case KEY_FIRE: 
      return keyStates[k];
    default:
      return false;
    }
  }
}

// -----------------------------------------------------
public class Room {
  int id;
  PVector pos, size;
  color bg;
  boolean isPlayerInside;
  int playerspeed; 

  public Room(int i, PVector p, PVector s) {
    id = i;
    playerspeed = i;    
    pos=p;
    isPlayerInside=false;    
    size=s;
    pushStyle();
    colorMode(HSB, 360, 100, 100);
    bg=color(random(360), 100, 100);
    popStyle();
  }

  public void update(Player p) {
    isPlayerInside = p.pos.x > pos.x && p.pos.x < pos.x+size.x && p.pos.y > pos.y && p.pos.y < pos.y+size.y;
    if (isPlayerInside) 
      p.speed=playerspeed;
  }

  public void display() {
    pushStyle();
    stroke(255);
    noFill();
    if (isPlayerInside) fill(bg);
    rect(pos.x, pos.y, size.x, size.y);
    popStyle();
  }
}

// -----------------------------------------------------
public class Player {  
  PVector pos, vel;
  float size = 40, speed = 5, rot=0;
  Cannon cannon;
  PVector firepos;

  public Player(PVector p) {  
    pos = p;
    vel = new PVector();
    cannon=new Cannon();
  }

  public void update() {
    vel.mult(0);
    if (keyhandler.isKeyOn(KeyHandler.KEY_UP)) 
      vel.y=-speed;
    else if (keyhandler.isKeyOn(KeyHandler.KEY_DN)) 
      vel.y=speed;
    if (keyhandler.isKeyOn(KeyHandler.KEY_LEFT)) 
      vel.x=-speed;
    else if (keyhandler.isKeyOn(KeyHandler.KEY_RIGHT))
      vel.x=speed;   
    // move      
    pos.add(vel);
    if (vel.x != 0 || vel.y != 0)
      rot= vel.heading();
      
    //check boundary
    if (pos.x < 0) {
      pos.x+=width;
    } else if (pos.x > width ) {
      pos.x-=width;
    }
    if (pos.y < 0) {
      pos.y+=height;
    } else if (pos.y > height ) {
      pos.y-=height;
    }
    
    if (keyhandler.isKeyOn(KeyHandler.KEY_FIRE) && cannon.isReadyToShoot()) {
      PVector tmp = PVector.add(pos, new PVector(size,0));
      firepos=new PVector(cos(rot) * (tmp.x-pos.x) - sin(rot) * (tmp.y-pos.y) + pos.x
                         ,sin(rot) * (tmp.x-pos.x) + cos(rot) * (tmp.y-pos.y) + pos.y);
      cannon.fire(firepos,PVector.fromAngle(rot).mult(10));
    }      
    cannon.update();
  }

  public void display() {
    pushMatrix();
    pushStyle();
    fill(255);
    stroke(128);
    strokeWeight(3);
    translate(pos.x, pos.y);
    rotate(rot);
    ellipse(0, 0, size, size);
    line(0, 0, size, 0);
    popStyle();
    popMatrix();
    cannon.display();
  }
}

// -----------------------------------------------------
class CannonBall {
  PVector pos;
  PVector vel;
  
  public CannonBall(PVector p, PVector v) {
    pos=p;
    vel=v;
  }
  
  public void update() {
    pos.add(vel);
  }
  
  public boolean isDead() {
    return (pos.x < 0 || pos.x > width || pos.y < 0 || pos.y >height);  
  }   
  
  public void display() {
    pushStyle();
    pushMatrix();
    translate(pos.x,pos.y);
    rotate(frameCount / 10.);
    stroke(255);
    fill(255,0,0);
    beginShape();   
    for (int i=0;i<10;i++) {
      float r = i%2==0 ? 10 : 5;
      vertex(r*cos(radians(36*i)),r*sin(radians(36*i)));
    }
    endShape();
    popMatrix();
    popStyle();
  }
  
}

// -----------------------------------------------------
class Cannon {
  ArrayList<CannonBall> cannonballs;
  int nextShot;
  int cannonDelay = 250;
  public Cannon() {
    cannonballs = new ArrayList<CannonBall>();
    nextShot = 0;
  }
  
  public boolean isReadyToShoot() {
    return millis() > nextShot;
  }
  
  public void fire(PVector p, PVector v) {
    if (isReadyToShoot()) {
      cannonballs.add(new CannonBall(p,v));
      nextShot = millis() + cannonDelay;
    }
  }
  
  public void update() {
    for (int i=cannonballs.size()-1;i>=0;i--) {
      CannonBall c=cannonballs.get(i);
      c.update();
      if (c.isDead()) {
        cannonballs.remove(i);
      }
    }     
  }
  
  public void display() {
    for (CannonBall b: cannonballs)
      b.display();    
  }
}

// -----------------------------------------------------
public class World {
  Room[] rooms;
  Player player;  

  public World() {
    rooms = new Room[] { new Room(2,new PVector(0, 0), new PVector(width/2, height/2)), 
                          new Room(4,new PVector(width/2, 0), new PVector(width/2, height/2)), 
                          new Room(6,new PVector(width/2, height/2), new PVector(width/2, height/2)), 
                          new Room(8,new PVector(0, height/2), new PVector(width/2, height/2))};
    player = new Player(new PVector(rooms[0].pos.x+rooms[0].size.x/2, rooms[0].pos.y+rooms[0].size.y/2));
  }

  public void update() {
    player.update();
    for (Room r : rooms) 
      r.update(player);
  }

  public void display() {
    for (Room r : rooms) 
      r.display();
    player.display();
  }
}

```

EDIT1: For fun fact the player changes its walking speed depending on the room 🙂  
EDIT2: As it was so much fun I’ve also added a little Cannon (Certainly for demonstration purposes only, so no targets … say no to weapons! …)

---

<div class="post-metadata">

**Author:** ![steven](https://avatars.discourse-cdn.com/v4/letter/s/94ad74/32.png) [@steven](https://discourse.processing.org/u/steven)\
**Post date:** [August 2, 2022, 12:40pm UTC](https://discourse.processing.org/t/how-can-i-change-image-background-with-mouse-click/38189/4 "2022-08-02T12:40:20Z")

</div>

Can i ask something about blinking text?

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [August 2, 2022, 12:58pm UTC](https://discourse.processing.org/t/how-can-i-change-image-background-with-mouse-click/38189/5 "2022-08-02T12:58:47Z")

</div>

Hi @steven,

you are free to ask whatever you want… 😉

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![steven](https://avatars.discourse-cdn.com/v4/letter/s/94ad74/32.png) [@steven](https://discourse.processing.org/u/steven)\
**Post date:** [August 2, 2022, 1:00pm UTC](https://discourse.processing.org/t/how-can-i-change-image-background-with-mouse-click/38189/6 "2022-08-02T13:00:01Z")

</div>

Can you give me and example on how to blink text? Please

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [August 2, 2022, 1:04pm UTC](https://discourse.processing.org/t/how-can-i-change-image-background-with-mouse-click/38189/7 "2022-08-02T13:04:33Z")

</div>

Hi @steven,

you can use the same approch as from your other topic…

> [@Changing image background with given specific time](https://discourse.processing.org/t/changing-image-background-with-given-specific-time/38186/3):
>
> Hi @steven, Pretty much everything listed you need by @glv. Maybe some meta description… On start Create an array with available images. Initialize variables for currentImageindex and nextUpdateTime with suitable values On draw loop check if currentTime \>= nextUpdateTime If true increment currentImageindex mod size of image array add interval to nextUpdateTime set background using currentImageIndex on available images Cheers — mnse

but instead of changing the background, switch on and off the text output …

Cheers  
— mnse

PS:

```auto
final String myMessage="Hello World!";
int nextOne = 0;
boolean showText = false;

void setup() {
  size(500, 500);
  textSize(50);
  fill(255);
  textAlign(CENTER, CENTER);
}

void draw() {
  background(0);
  if (millis() > nextOne) {
    showText = !showText;
    nextOne = millis() + floor(map(mouseX, 0, width, 500, 50));
  }
  if (showText)
    text(myMessage, width/2, height/2);
}

```