Should negative width in image produce mirroring?


#1

I wonder if this is a bug…

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

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


#2

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


#3

Thank you @neilcsmith, good find. It’s not documented.
It would work like this:

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

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

#4

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.


#5

while it is documented for the COPY
https://processing.org/reference/PImage_copy_.html

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


#6

You can see I used scale also in my original example above :slight_smile: 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).


#7

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


#8

It’s not dw. See

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


#9

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.


#10

Does this explain it?

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