# How to rotate an image continuously?

**URL:** <https://discourse.processing.org/t/how-to-rotate-an-image-continuously/19564>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [April 9, 2020, 6:17am UTC](https://discourse.processing.org/t/how-to-rotate-an-image-continuously/19564 "2020-04-09T06:17:21Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![NKF](https://avatars.discourse-cdn.com/v4/letter/n/b9e5f3/32.png) [@NKF](https://discourse.processing.org/u/NKF)\
**Post date:** [April 9, 2020, 6:17am UTC](https://discourse.processing.org/t/how-to-rotate-an-image-continuously/19564/1 "2020-04-09T06:17:21Z")

</div>

I know how to rotate an image but I don’t know how to make it rotates continuously by itself  
Could someone teach me pls

```auto
void setup()
{
  size(500,500, P3D);
  background(255);
}

void draw()
{
translate(width/2, height/2);
rotateZ(PI/3.0);
rect(-26, -26, 52, 52);
}

```

---

<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:** [April 9, 2020, 6:31am UTC](https://discourse.processing.org/t/how-to-rotate-an-image-continuously/19564/2 "2020-04-09T06:31:59Z")

</div>

Hello,

One method:

```auto
float angle; //Angle in radians

void setup()
  {
  size(500,500, P3D);
  background(255);
  }

void draw()
  {
  translate(width/2, height/2);
  angle = angle + TAU/500; //TAU rad = TWO_PI rad = 360 deg
  rotateZ(angle);
  rect(-26, -26, 52, 52);
  }

```

Resources:  
[https://processing.org/](https://processing.org/)  
[https://processing.org/reference/TAU.html](https://processing.org/reference/TAU.html)

`:)`

---

<div class="post-metadata">

**Author:** ![NKF](https://avatars.discourse-cdn.com/v4/letter/n/b9e5f3/32.png) [@NKF](https://discourse.processing.org/u/NKF)\
**Post date:** [April 9, 2020, 7:00am UTC](https://discourse.processing.org/t/how-to-rotate-an-image-continuously/19564/3 "2020-04-09T07:00:21Z")

</div>

glv, thanks a lot !! sorry for asking some simple questions cause I’m new to processing…

---

<div class="post-metadata">

**Author:** ![NKF](https://avatars.discourse-cdn.com/v4/letter/n/b9e5f3/32.png) [@NKF](https://discourse.processing.org/u/NKF)\
**Post date:** [April 9, 2020, 7:10am UTC](https://discourse.processing.org/t/how-to-rotate-an-image-continuously/19564/4 "2020-04-09T07:10:13Z")

</div>

But I find that if I use these codes, I can’t add a background

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [April 9, 2020, 8:44am UTC](https://discourse.processing.org/t/how-to-rotate-an-image-continuously/19564/5 "2020-04-09T08:44:11Z")

</div>

```auto
void draw() {
  translate(width/2, height/2);
  pushMatrix();
  angle = angle + TAU/500; //TAU rad = TWO_PI rad = 360 deg
  rotateZ(angle);
  rect(-26, -26, 52, 52);
  popMatrix();
}

```

You can use `pushMatrix()` and `popMatrix()` to isolate transformations. Your background() will be added before `pushMatrix()` either before or after the translate depending on your `imageMode(...)`

---

<div class="post-metadata">

**Author:** ![NKF](https://avatars.discourse-cdn.com/v4/letter/n/b9e5f3/32.png) [@NKF](https://discourse.processing.org/u/NKF)\
**Post date:** [April 9, 2020, 9:16am UTC](https://discourse.processing.org/t/how-to-rotate-an-image-continuously/19564/6 "2020-04-09T09:16:21Z")

</div>

quark, sorry, I try it, put image() before and after translate but still can’t generate the background. What is my problem?

```auto
float angle; 
PImage bg;
void setup()
  {
  size(500,500,P3D);
  bg = loadImage("galaxy.png");
  }

void draw()
  {
  image(bg,0,0,width,height);
  translate(width/2, height/2);
 
  pushMatrix();
  angle = angle + PI/100;      
  rotateZ(angle);
  rect(-26, -26, 52, 52);
  popMatrix();
  }

```

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [April 9, 2020, 9:23am UTC](https://discourse.processing.org/t/how-to-rotate-an-image-continuously/19564/7 "2020-04-09T09:23:49Z")

</div>

Do you get an error message?

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [April 9, 2020, 9:29am UTC](https://discourse.processing.org/t/how-to-rotate-an-image-continuously/19564/8 "2020-04-09T09:29:45Z")

</div>

Do you want the galaxy image to rotate endlessly?

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [April 9, 2020, 9:33am UTC](https://discourse.processing.org/t/how-to-rotate-an-image-continuously/19564/9 "2020-04-09T09:33:13Z")

</div>

Try this

```auto
float angle; 
PImage bg;
void setup()
{
  size(500, 500, P3D);
  bg = loadImage("galaxy.png");
  imageMode(CENTER);
}

void draw()
{
  translate(width/2, height/2);

  pushMatrix();
  angle = angle + PI/100;      
  rotateZ(angle);
  image(bg, 0, 0, 1.42 * width, 1.42 * height);
  popMatrix();
  rect(-26, -26, 52, 52);
}

```

---

<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:** [April 9, 2020, 10:23am UTC](https://discourse.processing.org/t/how-to-rotate-an-image-continuously/19564/10 "2020-04-09T10:23:39Z")

</div>

> [@NKF](#):
>
> but still can’t generate the background

Hello,

Your posted code works:

```auto
float angle; 
PImage bg;
void setup()
  {
  size(500,500,P3D);
  bg = loadImage("galaxy.png");
  }

void draw()
  {
  image(bg,0,0,width,height);
  translate(width/2, height/2);
 
  pushMatrix();
  angle = angle + PI/100;      
  rotateZ(angle);
  rect(-26, -26, 52, 52);
  popMatrix();
  }

```

Please read the reference very carefully and it will become clear:

> **[loadImage() / Reference](https://processing.org/reference/loadImage_.html)**
>
> Loads an image into a variable of type PImage. Four types of images ( .gif, .jpg, .tga, .png) images may be loaded. To load correctly, images must be located in the …

> **[background() / Reference](https://processing.org/reference/background_.html)**
>
> The background() function sets the color used for the background of the Processing window. The default background is light gray. This function is typically used within draw() to clear th…

I borrowed the image from the reference, renamed it and dragged and dropped it on sketch and it added it to data folder.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/049b02a56053a8eec608e5d1714c56aa5cb94dca.jpeg)

`:)`

---

<div class="post-metadata">

**Author:** ![NKF](https://avatars.discourse-cdn.com/v4/letter/n/b9e5f3/32.png) [@NKF](https://discourse.processing.org/u/NKF)\
**Post date:** [April 9, 2020, 10:32am UTC](https://discourse.processing.org/t/how-to-rotate-an-image-continuously/19564/11 "2020-04-09T10:32:11Z")

</div>

Oh I solve it now! It is my minor mistake, I write the wrong image type so it can’t show the image.  
Thank you very much quark and glv

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [April 9, 2020, 10:37am UTC](https://discourse.processing.org/t/how-to-rotate-an-image-continuously/19564/12 "2020-04-09T10:37:32Z")

</div>

Glad you got it to work.

I did ask if there was an error message and if you had told us that Processing couldn’t find the image file it would have saved us all a lot of effort. In future make sure you report any error messages. 😄

---

<div class="post-metadata">

**Author:** ![NKF](https://avatars.discourse-cdn.com/v4/letter/n/b9e5f3/32.png) [@NKF](https://discourse.processing.org/u/NKF)\
**Post date:** [April 9, 2020, 11:28am UTC](https://discourse.processing.org/t/how-to-rotate-an-image-continuously/19564/13 "2020-04-09T11:28:37Z")

</div>

okay, thanks a lot 😀 😀