# Using scale() to rotate a moving gif

**URL:** <https://discourse.processing.org/t/using-scale-to-rotate-a-moving-gif/30230>\
**Category:** Processing\
**Created:** [May 23, 2021, 12:42am UTC](https://discourse.processing.org/t/using-scale-to-rotate-a-moving-gif/30230 "2021-05-23T00:42:44Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Blomer478](https://avatars.discourse-cdn.com/v4/letter/b/58956e/32.png) [@Blomer478](https://discourse.processing.org/u/Blomer478)\
**Post date:** [May 23, 2021, 12:42am UTC](https://discourse.processing.org/t/using-scale-to-rotate-a-moving-gif/30230/1 "2021-05-23T00:42:44Z")

</div>

I’ve been trying to make this work for a good couple of hours but I really can’t see what is wrong.  
I have an animated gif that goes from left to right and once it get out of the screen it goes back to the left, that works, the animation runs smoothly and it does what I wanted. The problem is that I want to flip the image in the X axis while it’s out of the screen so it looks like the gif turns around and goes to the other side. I know this can be done using scale(-1.0,1.0) but for whatever reason it doesn’t seem to work. Does someone know what the problem is?

```auto
PImage bg;
PImage[] mono = new PImage[35];
float monoX= -200;
float monoY = 450;
float speed = 4.0;
int direction = 1;
float rotation= 1.0;

void setup(){
  bg=loadImage("data/fondo.jpg");
  for (int i=0; i < 34; i++){
   mono[i] = loadImage("data/mono/mono" + i + ".png");
   if(i > 35){
     i = 1;
   } 
  }
  size(1000,900);
}

void draw(){
  frameRate(30);
  tint(255,128);
  image(bg,0,0);
  noTint();
  scale(rotation,1.0);
  image( mono[frameCount%34], monoX,monoY, width/2, height/2);
  monoX += speed * direction;
  
  if((monoX > 850) || (monoX < -450)){
    direction = -direction;
    rotation = -rotation;
  }
}

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [May 23, 2021, 5:12pm UTC](https://discourse.processing.org/t/using-scale-to-rotate-a-moving-gif/30230/2 "2021-05-23T17:12:51Z")

</div>

Hi @Blomer478,

Welcome to the forum! 😉

Few things on your code first :

- Usually it’s a convention to put the `size(1000, 900)` function at the top of the `setup()` function so it’s the first instruction

- In the first for loop where you load images, you don’t need to say :

- Specifying `frameRate(30)` in the `draw()` loop is not optimal because you can just call it once in the setup function and it will be set for the whole sketch. Also unless you specifically want to restrict the framerate, you can just remove it and it will be around 60fps depending on your sketch and computer.

To answer your question, I think that the issue is that when using the `scale()` function with a negative value, it’s mirroring the whole coordinate system from the top left corner :

![scale_demo](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/92be618942fca4a075b9262b349fec2efab4a47e.gif)

So your images end up on the left side of the visible screen and therefore are not visible.

To make it work you need to use the [`translate()`](https://processing.org/reference/translate_.html) function in order to translate the whole coordinate system to the location of your image then you can call the `scale()` function to invert it. The last thing to consider is that the `image()` function display the image from the top left corner and you might want to use `imageMode(CENTER)` in order to draw them from their center :

![scale_center](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/ed92a1d00fb169ec1c0b476ee85ed40bd015f341.gif)

You can check the tutorial on the coordinate system in Processing on the website :

[https://processing.org/tutorials/transform2d/](https://processing.org/tutorials/transform2d/)

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [May 23, 2021, 5:24pm UTC](https://discourse.processing.org/t/using-scale-to-rotate-a-moving-gif/30230/3 "2021-05-23T17:24:56Z")

</div>

Not related to the topic, but how do you make your gifs?

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [May 23, 2021, 5:28pm UTC](https://discourse.processing.org/t/using-scale-to-rotate-a-moving-gif/30230/4 "2021-05-23T17:28:02Z")

</div>

Ahah it was made in Processing then recorded as a video then gif 😉

---

<div class="post-metadata">

**Author:** ![Blomer478](https://avatars.discourse-cdn.com/v4/letter/b/58956e/32.png) [@Blomer478](https://discourse.processing.org/u/Blomer478)\
**Post date:** [May 23, 2021, 7:55pm UTC](https://discourse.processing.org/t/using-scale-to-rotate-a-moving-gif/30230/5 "2021-05-23T19:55:51Z")

</div>

whoa thank you very much! I undestand the problem now. Thanks for all the advice, I truely appreciate it. I’ll be trying those things and see what happens