# Rotate(); does not work in double for loop in createGraphics canvas

**URL:** <https://discourse.processing.org/t/rotate-does-not-work-in-double-for-loop-in-creategraphics-canvas/37304>\
**Category:** Coding Questions\
**Created:** [June 3, 2022, 3:25pm UTC](https://discourse.processing.org/t/rotate-does-not-work-in-double-for-loop-in-creategraphics-canvas/37304 "2022-06-03T15:25:38Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Annemiek](https://avatars.discourse-cdn.com/v4/letter/a/278dde/32.png) [@Annemiek](https://discourse.processing.org/u/Annemiek)\
**Post date:** [June 3, 2022, 3:25pm UTC](https://discourse.processing.org/t/rotate-does-not-work-in-double-for-loop-in-creategraphics-canvas/37304/1 "2022-06-03T15:25:38Z")

</div>

hi!

I’m a trying to make a poster generator inside P5.js. I’m quite new to programming and for every new step I watch tutorials so I know what to do. Right now I am facing a problem with rotating my ellipses. At the moment the ellipses are not rotating but I also do not get an error. The specific part of code is in the function pattern() part.

I think it has something to do with createGraphics(). If I use poster.rotate(45) (like I do with drawing the ellipses, poster.ellipse()) the ellipses are going crazy and moving all over the place.

I hope you can help me to rotate the ellipses 🙂 If you need more information, please tell me!  
(English is not my native language, so I’m sorry if it’s not all clear)

```auto

function setup() {  
  createCanvas(windowWidth, windowHeight);
  poster = createGraphics(500,700);
}

function draw() {
  angleMode(DEGREES);
  ellipseMode(CENTER);
  drawPoster();
  image(poster,0,0);
}

function drawPoster(){ 
  poster.background(0);
  poster.fill(0);
  pattern(); 
}

function pattern(){
  push();
  translate(0,0);

  for (let x=25; x<=425; x=x+200) {
    for (let y=25; y<=650; y=y+200) { 
      poster.fill(255);

      push();
      translate (x,y);
      rotate(45);
      poster.ellipse(x+25,y+12.5,50,25);
      pop();
      
    }
  }
  pop();
}

```

---

<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:** [June 3, 2022, 3:42pm UTC](https://discourse.processing.org/t/rotate-does-not-work-in-double-for-loop-in-creategraphics-canvas/37304/2 "2022-06-03T15:42:29Z")

</div>

You need everywhere apply the transformations etc to the poster as it is instead applied to the main graphics context …

> [@Annemiek](#):
>
> ```auto
> function pattern(){
> poster.push();
> poster.translate(0,0);
> 
> for (let x=25; x<=425; x=x+200) {
> for (let y=25; y<=650; y=y+200) { 
> poster.fill(255);
> 
> poster.push();
> poster.translate (x,y);
> poster.rotate(45);
> poster.ellipse(x+25,y+12.5,50,25);
> poster.pop();
>       
> }
> }
> poster.pop();
> }
> 
> ```

Cheers  
— mnse

---

<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:** [June 3, 2022, 3:55pm UTC](https://discourse.processing.org/t/rotate-does-not-work-in-double-for-loop-in-creategraphics-canvas/37304/3 "2022-06-03T15:55:12Z")

</div>

Hello @Annemiek.

Example without createGraphics():

```auto
function setup() {  
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  angleMode(DEGREES);
  ellipseMode(CENTER);
  drawPoster();
  image(poster,0,0);
}

function drawPoster(){ 
  background(0);
  fill(0);
  pattern(); 
}

function pattern(){
  let count = 0;
  for (let x=25; x<=425; x=x+200) {
    for (let y=25; y<=650; y=y+200) { 
      fill(255);
     push();
      translate (x, y);
      //rotate(45); // Try this
      rotate(count*30); // Or this
      count++;
      ellipse(0, 0, 50, 25); // You are translating so do not use x, y here !
     pop();
      text(count, x, y+50); // Not translated or rotated!
    }
  }
}

```

Once that is working you can use _createGraphics()_ and add _poster._ prefix where it is needed.

Note what happens with _count++_ and _poster.count++_

_print()_ statements are useful during development.

Output with some modifications to loop increments and offsets:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/2/3294a7dda05e273a191a010f07393da3556b9285.png)

`:)`

---

<div class="post-metadata">

**Author:** ![Annemiek](https://avatars.discourse-cdn.com/v4/letter/a/278dde/32.png) [@Annemiek](https://discourse.processing.org/u/Annemiek)\
**Post date:** [June 3, 2022, 8:12pm UTC](https://discourse.processing.org/t/rotate-does-not-work-in-double-for-loop-in-creategraphics-canvas/37304/4 "2022-06-03T20:12:24Z")

</div>

thank you! I had tried to put poster. in front of everything before, but made a mistake in the first translate part. I made the circles appear in the middle of the screen, but when I used poster.translate() it dissapeared out of the screen, which made me think it was not working. But I deleted that part and with the tips of glv it is now working 🙂