# Loop draw with rotating image

**URL:** <https://discourse.processing.org/t/loop-draw-with-rotating-image/22118>\
**Category:** Coding Questions\
**Created:** [June 23, 2020, 10:03pm UTC](https://discourse.processing.org/t/loop-draw-with-rotating-image/22118 "2020-06-23T22:03:02Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![aerob](https://avatars.discourse-cdn.com/v4/letter/a/ecd19e/32.png) [@aerob](https://discourse.processing.org/u/aerob)\
**Post date:** [June 23, 2020, 10:03pm UTC](https://discourse.processing.org/t/loop-draw-with-rotating-image/22118/1 "2020-06-23T22:03:02Z")

</div>

Hello guys,

I am new to processing… but im having a lot of fun learning new ways of programming. In this particular code i have a png which rotates in a 90 degrees angle. what im missing is that the png starts in the top left corner and then symmetrically loop the draw to fill the whole canvas from left to right with the png. as if it writes something from top left to bottom right corner.  
I dont know if ive explained everything but feel free to ask.  
Thank you for the help!

kind regards,  
aerob

```auto
PImage pim;
float rot=0;
int y=0;
int x=0;

void setup(){
    size (3840,1080);
    frameRate(1);
  
  pim = loadImage("img.png");
}

void draw(){
 
  background(255);
  translate(x+75, y+50);
  rotate(rot);
  image(pim,-pim.width/2,-pim.height/2);

 rot+=PI/2;    

}   

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 23, 2020, 10:16pm UTC](https://discourse.processing.org/t/loop-draw-with-rotating-image/22118/2 "2020-06-23T22:16:29Z")

</div>

yeah, you can just add something to x:

x++;

so the image should move right.

Now, when x reaches width, you want to start a new line (like when you read).

This means, set x to 0 and increase y, right?

Hey, and welcome to the forum!

Chrisir 😉