# Problem with rotated PGraphics

**URL:** <https://discourse.processing.org/t/problem-with-rotated-pgraphics/12366>\
**Category:** Processing.py\
**Created:** [June 28, 2019, 8:30pm UTC](https://discourse.processing.org/t/problem-with-rotated-pgraphics/12366 "2019-06-28T20:30:56Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Raums](https://avatars.discourse-cdn.com/v4/letter/r/f0a364/32.png) [@Raums](https://discourse.processing.org/u/Raums)\
**Post date:** [June 28, 2019, 8:30pm UTC](https://discourse.processing.org/t/problem-with-rotated-pgraphics/12366/1 "2019-06-28T20:30:56Z")

</div>

I’ve spent a couple hours trying to make an MCVE of this but haven’t been able to replicate the problem. The main program is at 2k lines so I can’t post it here. I’ve been stuck on this for a while so really hoping someone has a hint.

I have a design I’m generating pictured here:  
 ![54%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/afac78080695e6f92e4fb035b857c85da98f5992.png)  
When I render this to the screen it looks fine.  
When I render it to a PGraphic I’ve created and display it via image() it still looks fine, but when I do a rotate() before calling image() to render it to the screen, the lines end up distorted.  
 ![34%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/fb981753289739394e7525891eeba47e1a65d5da.png)  
Here’s a zoom:

 ![13%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3a23c82ef371fed5b8e51cc4efc02b7b6ed3886b.png)

This doesn’t happen when I call rotate() and render it directly to the screen.

I thought this might be a problem with antialiasing being used once on the PGraphic and once when it was rendered via image(), so I tried noSmooth() on the PGraphic, and got different, but still broken results.  
Here’s noSmooth() with no rotation:  
 ![07%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d55daaf01f5599c9a8d2f7c847cf6fc9c7fd12f4.png)  
And here it is with rotation:  
 ![44%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c6005567a1e69324a392e01c0254c8f665d07c08.png)  
Zoom:

 ![55%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0140594ebddade2ad627885421e5c8460c2ab177.png)

I thought I found the answer when I came across this thread: [offscreen PGraphics is ugly](https://forum.processing.org/two/discussion/13355/offscreen-pgraphics-is-ugly) which suggests that the problem is antialiasing mixing my black pixels with transparent pixels, from the PGraphic, but drawing a background to my PGraphic as soon as I instantiate it doesn’t seem to have an effect. All of the examples above have pg.background(200) called right after instantiation and before anything else is drawn to them.

I’ll keep trying to replicate the problem in a MCVE, but would much appreciate any ideas on what’s going wrong.

---

<div class="post-metadata">

**Author:** ![LittleBoxes](https://avatars.discourse-cdn.com/v4/letter/l/ee59a6/32.png) [@LittleBoxes](https://discourse.processing.org/u/LittleBoxes)\
**Post date:** [June 28, 2019, 9:27pm UTC](https://discourse.processing.org/t/problem-with-rotated-pgraphics/12366/2 "2019-06-28T21:27:16Z")

</div>

I think it’s because PGraphics make a bitmap image and when you rotate a bitamp image, processing makes some approximations.  
if you want to rotate your figure properly you must do the rotation when drawing ( or re draw your figure) your figure not with PGraphics.

am I understandable enough (I’m not English fluent…)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 29, 2019, 1:43am UTC](https://discourse.processing.org/t/problem-with-rotated-pgraphics/12366/3 "2019-06-29T01:43:38Z")

</div>

By default (w/o 3rd parameter) **createGraphics()** instantiates a JAVA2D PGraphics (PGraphicsJava2D):  
[Py.Processing.org/reference/createGraphics.html](http://Py.Processing.org/reference/createGraphics.html)

Also, if you want your PGraphics to have all styles of the main canvas, you need to repeat each 1 you did to the main canvas to the off-screen PGraphics as well:

Here’s a Python Mode example about applying the same styles to both the main canvas and an off-screen canvas:

```auto
def setup():
    size(800, 600)
    smooth(1)
    noLoop()

    applyStyles(g) # apply styles to the main canvas

    global pg
    pg = createGraphics(width, height)
    applyStyles(pg) # apply styles to an off-screen canvas

def applyStyles(pg, WEIGHT=1.5, STROKE=0xffFF00FF, FILL=-1):
    pg.primaryGraphics or pg.smooth(3)
    
    with pg.beginDraw():
        pg.colorMode(RGB)
        pg.blendMode(REPLACE)

        pg.strokeCap(ROUND)
        pg.strokeJoin(MITER)
        pg.strokeWeight(WEIGHT)

        pg.stroke(STROKE)
        pg.fill(FILL)

    return pg

```

And its corresponding Java Mode too:

```auto
PGraphics pg;

void setup() {
  size(800, 600);
  smooth(1);
  noLoop();

  applyStyles(getGraphics()); // apply styles to the main canvas

  pg = createGraphics(width, height);
  applyStyles(pg); // apply the same styles to an off-screen canvas
}

static final PGraphics applyStyles(final PGraphics pg) {
  pg.smooth(1);
  pg.beginDraw();

  pg.colorMode(RGB);
  pg.blendMode(REPLACE);

  pg.strokeCap(ROUND);
  pg.strokeJoin(MITER);
  pg.strokeWeight(1.5);

  pg.stroke(#FF00FF);
  pg.fill(-1);

  pg.endDraw();
  return pg;
}

```

---

<div class="post-metadata">

**Author:** ![Raums](https://avatars.discourse-cdn.com/v4/letter/r/f0a364/32.png) [@Raums](https://discourse.processing.org/u/Raums)\
**Post date:** [June 29, 2019, 5:41pm UTC](https://discourse.processing.org/t/problem-with-rotated-pgraphics/12366/4 "2019-06-29T17:41:06Z")

</div>

Thanks. Are you suggesting the problem is that I’m not applying the correct setting to one of the PGraphics somewhere or is this just a by-the-way? Either way, useful I’ll try implementing -thanks.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 29, 2019, 6:09pm UTC](https://discourse.processing.org/t/problem-with-rotated-pgraphics/12366/5 "2019-06-29T18:09:48Z")

</div>

> [@Raums](#):
>
> Are you suggesting the problem is that I’m not applying the correct setting to one of the PGraphics somewhere…

Yea, just a guess that it might be the problem given we haven’t seen your code. 😳

Pay close attention to the renderer type and chosen **smooth()** level. 🧐

---

<div class="post-metadata">

**Author:** ![Raums](https://avatars.discourse-cdn.com/v4/letter/r/f0a364/32.png) [@Raums](https://discourse.processing.org/u/Raums)\
**Post date:** [July 11, 2019, 11:57pm UTC](https://discourse.processing.org/t/problem-with-rotated-pgraphics/12366/6 "2019-07-11T23:57:11Z")

</div>

@GoToLoop You were right. Anything other than smooth(3) creates the jaggies for me. Thanks!