# How to animate an Image?

**URL:** <https://discourse.processing.org/t/how-to-animate-an-image/25819>\
**Category:** Coding Questions\
**Created:** [November 29, 2020, 9:08pm UTC](https://discourse.processing.org/t/how-to-animate-an-image/25819 "2020-11-29T21:08:30Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![corken](https://avatars.discourse-cdn.com/v4/letter/c/97f17d/32.png) [@corken](https://discourse.processing.org/u/corken)\
**Post date:** [November 29, 2020, 9:08pm UTC](https://discourse.processing.org/t/how-to-animate-an-image/25819/1 "2020-11-29T21:08:30Z")

</div>

Hello,

my question is how to animate an moving object. In my code I can move Mario and added the animation. But it is at 60 fps by default so its really fast. When I cap the FPS the animation obviously is slower but also my character movement is, which i dont want. Any help to solve this?

```auto
int xpos = 200;
int ypos = 700;
int speed = 5;
boolean wKey, aKey, sKey, dKey;
PImage character;
PImage[] animation = new PImage[3];
int animationCase = 0;

void setup(){
  size(1000,1000);
  character = loadImage("MarioStanding.png");
  animation[0] = loadImage("MarioMoving1.png");
  animation[1] = loadImage("MarioMoving2.png");
  animation[2] = loadImage("MarioMoving3.png");
}
void draw(){
  refresh(animationCase);
  animationCase++;
  if(wKey == true){
    if(ypos > 0){
      ypos-=speed;
    }
  }
  if(sKey == true){
    if(ypos < height-character.height){
      ypos+=speed;
    }
  }
  if(dKey == true){
    if(xpos < width-character.width){
      xpos+=speed;
    }
  }
  if(aKey == true){
    if(xpos > 0){
      xpos-=speed;
    }
  }
  if(animationCase == 3){
    animationCase = 0;
  }
}
void refresh(int animationValue){
  background(0,0,0);
  image(animation[animationValue],xpos,ypos,character.width,character.height);
}
void keyReleased(){
  if(key == 'w'){
    wKey = false;
  }
  if(key == 'a'){
    aKey = false;
  }
  if(key == 's'){
    sKey = false;
  }
  if(key == 'd'){
    dKey = false;
  }
}
void keyPressed(){
  if(key == 'w'){
    wKey = true;
  }
  if(key == 'a'){
    aKey = true;
  }
  if(key == 's'){
    sKey = true;
  }
  if(key == 'd'){
    dKey = true;
  }
}

```

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [November 29, 2020, 10:56pm UTC](https://discourse.processing.org/t/how-to-animate-an-image/25819/2 "2020-11-29T22:56:03Z")

</div>

you need to decouple the animation from the display rate. it is a good idea to create an animation class which contains its own animation properties. this [example](https://editor.p5js.org/hotfooted/sketches/UkUiSLo_q) is for p5js and isn’t in a class structure but you can see how a spritesheet is loaded and an independent animation fps is generated. if you search for _programming sprite animation class_ i’m sure you will find something that will assist. Best of luck.

EDIT: i found a really good [post](https://gamedev.stackexchange.com/a/53709) on building an animation class i used once i hope it’s helpful.