# Should negative width in image produce mirroring?

**URL:** <https://discourse.processing.org/t/should-negative-width-in-image-produce-mirroring/6366>\
**Category:** Coding Questions\
**Created:** [December 6, 2018, 2:05pm UTC](https://discourse.processing.org/t/should-negative-width-in-image-produce-mirroring/6366 "2018-12-06T14:05:23Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [December 6, 2018, 2:05pm UTC](https://discourse.processing.org/t/should-negative-width-in-image-produce-mirroring/6366/1 "2018-12-06T14:05:23Z")

</div>

I wonder if this is a bug…

```auto
PGraphics canvas;
void setup() {
  size(600, 600); // P2D make no difference
  canvas = createGraphics(width, height);
}
void draw() {
  background(255);

  canvas.beginDraw();
  canvas.clear();
  canvas.fill(0);
  canvas.text("hello", 50, 50);
  canvas.endDraw();

  // 1. original
  image(canvas, 0, 0);

  // 2. mirror using negative scale Fails
  image(canvas, width, 50, -width, height);

  // 3. mirror using transformation matrix Ok
  translate(width, 0);
  scale(-1, 1);

  image(canvas, 0, 0);
}

```

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

The “hello” bottom left should be mirrored horizontally in the same manner as the one on the right, right?

Update: I guess I expected that coming from openFrameworks… I see that p5.js also doesn’t do that:

[https://editor.p5js.org/abe/sketches/Hyvz2pIJE](https://editor.p5js.org/abe/sketches/Hyvz2pIJE)

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [December 7, 2018, 8:10am UTC](https://discourse.processing.org/t/should-negative-width-in-image-produce-mirroring/6366/2 "2018-12-07T08:10:17Z")

</div>

You should probably look at the 9 argument version of image(…) for this.

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [December 7, 2018, 9:21am UTC](https://discourse.processing.org/t/should-negative-width-in-image-produce-mirroring/6366/3 "2018-12-07T09:21:55Z")

</div>

Thank you @neilcsmith, good find. It’s not [documented](https://processing.org/reference/image_.html).  
It would work like this:

```auto
  // 1. original
  image(canvas, 0, 0);

  // 2. horizontal flip 
  image(canvas, 0, 0, canvas.width, canvas.height, 
        canvas.width, 0, 0, canvas.height);

```

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [December 7, 2018, 9:33am UTC](https://discourse.processing.org/t/should-negative-width-in-image-produce-mirroring/6366/4 "2018-12-07T09:33:00Z")

</div>

Yes, I’ve never understood why this isn’t documented. It’s a really important method and been there a long time. Incidentally I also added a version with 6 coordinates in PraxisLIVE to easily draw unscaled sub-regions - would be useful upstream too.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 7, 2018, 11:59am UTC](https://discourse.processing.org/t/should-negative-width-in-image-produce-mirroring/6366/5 "2018-12-07T11:59:52Z")

</div>

> [@hamoid](#):
>
> It’s not documented:  
> image(canvas, 0, 0, canvas.width, canvas.height, canvas.width, 0, 0, canvas.height);

while it is documented for the COPY

> **[copy() / Reference](https://processing.org/reference/PImage_copy_.html)**
>
> Copies a region of pixels from one image into another. If the source and destination regions aren't the same size, it will automatically resize source pixels to fit the specified target region. No alp…

> pimg.copy(src, sx, sy, sw, sh, dx, dy, dw, dh)

but looks like it has a different parameter understanding as your example?

and for a other test

> scale(-1,1);

it works like this, but possibly is not what you want.  
 ![snap-032](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2f22c0cfde110424ec46f3d0c8a39aee6d4a3c5b.png)

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [December 7, 2018, 1:20pm UTC](https://discourse.processing.org/t/should-negative-width-in-image-produce-mirroring/6366/6 "2018-12-07T13:20:28Z")

</div>

You can see I used `scale` also in my original example above 🙂 I know how to do that, I was only confused because negative width was not working as I expected (I was mixing OF and Processing).

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 7, 2018, 1:25pm UTC](https://discourse.processing.org/t/should-negative-width-in-image-produce-mirroring/6366/7 "2018-12-07T13:25:47Z")

</div>

but dw = 0 instead dw = -width i also not understand

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [December 7, 2018, 1:28pm UTC](https://discourse.processing.org/t/should-negative-width-in-image-produce-mirroring/6366/8 "2018-12-07T13:28:55Z")

</div>

It’s not `dw`. See

> <https://github.com/processing/processing/blob/master/core/src/processing/core/PGraphics.java#L3803>

It’s two uv1 and uv2 (texture coordinates). So two points defining a rectangle in the image.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 7, 2018, 1:51pm UTC](https://discourse.processing.org/t/should-negative-width-in-image-produce-mirroring/6366/9 "2018-12-07T13:51:33Z")

</div>

> <https://github.com/processing/processing/blob/5391a001a0625066182b11618f3e014e482327d7/core/src/processing/core/PGraphics.java#L3792>

v.s.

> // 2. horizontal flip  
> image(canvas, 0, 0, canvas.width, canvas.height,  
> canvas.width, 0, **0,** canvas.height);

would still mean for me that you copy a empty rectangle

//\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

// sorry for my beginner scale test , but i needed a easy example,  
and your title sounds like: SCALE() not working / mirroring  
the title should be more like

> IMAGE() not working as expected.

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [December 7, 2018, 3:43pm UTC](https://discourse.processing.org/t/should-negative-width-in-image-produce-mirroring/6366/10 "2018-12-07T15:43:03Z")

</div>

Does this explain it?

 ![p5image8args](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1266f37dd34644c1ec3f41dfacda1554fb20b2f8.png)

They last two arguments also define a point, not a width and a height.