# How to move an image including horizontal and vertical inversion

**URL:** <https://discourse.processing.org/t/how-to-move-an-image-including-horizontal-and-vertical-inversion/17473>\
**Category:** Coding Questions\
**Created:** [January 31, 2020, 8:46am UTC](https://discourse.processing.org/t/how-to-move-an-image-including-horizontal-and-vertical-inversion/17473 "2020-01-31T08:46:42Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![all](https://avatars.discourse-cdn.com/v4/letter/a/e9bcb4/32.png) [@all](https://discourse.processing.org/u/all)\
**Post date:** [January 31, 2020, 8:46am UTC](https://discourse.processing.org/t/how-to-move-an-image-including-horizontal-and-vertical-inversion/17473/1 "2020-01-31T08:46:43Z")

</div>

Hello,

My aim is to get the same behavior than line(x1, y1, x2, y2) but with a PNG image image(img, x1, y1, x2, y2) using the imageMode(CORNERS);

My PNG image have a transparent background and the line go from the upper-left corner to the bottom-right corner.

This point requires the inversion of the image when the x2, y2 coordinates are lower than x1, y1. And here is my problem because I don’t know how to get this inversion. The image is always in the same “order”.

I have a small sketch to figure all of that i necessary.

Thank you !

---

<div class="post-metadata">

**Author:** ![matheplica](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/matheplica/32/21035_2.png) [@matheplica](https://discourse.processing.org/u/matheplica)\
**Post date:** [January 31, 2020, 9:46am UTC](https://discourse.processing.org/t/how-to-move-an-image-including-horizontal-and-vertical-inversion/17473/2 "2020-01-31T09:46:46Z")

</div>

You can use [https://processing.org/reference/scale\_.html](https://processing.org/reference/scale_.html)

```auto
pushMatrix();
scale(-1, 1);//or something like that
image(...
popMatrix();

```

---

<div class="post-metadata">

**Author:** ![all](https://avatars.discourse-cdn.com/v4/letter/a/e9bcb4/32.png) [@all](https://discourse.processing.org/u/all)\
**Post date:** [January 31, 2020, 10:13am UTC](https://discourse.processing.org/t/how-to-move-an-image-including-horizontal-and-vertical-inversion/17473/3 "2020-01-31T10:13:17Z")

</div>

Thank you a lot.  
I will check this way as soon as possible.

---

<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:** [January 31, 2020, 3:31pm UTC](https://discourse.processing.org/t/how-to-move-an-image-including-horizontal-and-vertical-inversion/17473/4 "2020-01-31T15:31:33Z")

</div>

Hello,

Consider examples here:  
[https://processing.org/reference/vertex\_.html](https://processing.org/reference/vertex_.html)

I modified code from the above link:

```auto
//https://processing.org/reference/vertex_.html

size(512, 256, P3D);
PImage img = loadImage("hiclipart.com.png");

noStroke();
background(0);

beginShape();
texture(img);
tint(255, 255, 0);
// "laDefense.jpg" is 100x100 pixels in size so
// the values 0 and 100 are used for the
// parameters "u" and "v" to map it directly
// to the vertex points
vertex(0, 0, 0, 0);
vertex(255, 0, 255, 0);
vertex(255, 255, 255, 255);
vertex(0, 255, 0, 255);
endShape();

translate(256, 0, 0);
  
beginShape();
texture(img);
tint(0, 255, 0);
// "laDefense.jpg" is 100x100 pixels in size so
// the values 0 and 100 are used for the
// parameters "u" and "v" to map it directly
// to the vertex points
vertex(0, 0, 255, 255);
vertex(255, 0, 255, 0);
vertex(255, 255, 0, 0);
vertex(0, 255, 0, 255);
endShape();  

```

You will have to modify u, v mapping to suit your needs.

Rename to test.png:  
 ![hiclipart.com](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/9a5d3eb70a01f6168036cca9926310e2dd8292f3.png)

Output:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/43b4a54bb0b4679909d9affc8ca213d9478cdcb5.png)