# Image distort - warp

**URL:** <https://discourse.processing.org/t/image-distort-warp/9600>\
**Category:** Coding Questions\
**Created:** [March 25, 2019, 11:17am UTC](https://discourse.processing.org/t/image-distort-warp/9600 "2019-03-25T11:17:28Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![dimpapadop](https://avatars.discourse-cdn.com/v4/letter/d/ba9def/32.png) [@dimpapadop](https://discourse.processing.org/u/dimpapadop)\
**Post date:** [March 25, 2019, 11:17am UTC](https://discourse.processing.org/t/image-distort-warp/9600/1 "2019-03-25T11:17:28Z")

</div>

Hallo, i am trying to distort an image to fit to a skewed / distorted shape.  
For example when i give the 4 corners of a shape and make it fit there even though it is not a rectangle.

I tried the easy way with vertex() and texture() like below - from the vertex() examples… in processing’s site…

```auto
PImage img;

void setup(){
size(200, 200,P3D);
 img = loadImage("laDefense.png");}

void draw(){
background(255);
noStroke();
beginShape();
texture(img);
// "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(mouseX, mouseY, 0, 0);
vertex(80, 5, 100, 0);
vertex(95, 90, 100, 100);
vertex(40, 95, 0, 100);
endShape();
}

```

but the image inside the texture does not seem to always retain every pixels correct placing / mapping.

could you help me achieve that with the pixel array?  
I saw this sketch that achieves that with wrap too which is more complicates (but i do not understand the math).  
How could i achieve that by just giving the new upper left, upper right lower left and lower right corner’s coordinates, and distort the image there correctly?  
https://www.openprocessing.org/sketch/170639

thank you in advance