# Image() function with 4 points

**URL:** <https://discourse.processing.org/t/image-function-with-4-points/35182>\
**Category:** Beginners\
**Created:** [February 15, 2022, 4:52pm UTC](https://discourse.processing.org/t/image-function-with-4-points/35182 "2022-02-15T16:52:04Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Omri](https://avatars.discourse-cdn.com/v4/letter/o/bc79bd/32.png) [@Omri](https://discourse.processing.org/u/Omri)\
**Post date:** [February 15, 2022, 4:52pm UTC](https://discourse.processing.org/t/image-function-with-4-points/35182/1 "2022-02-15T16:52:04Z")

</div>

Hey,  
Is there any option to display an image in processing with 4 points coordinates? (top left, top right, bottom left, bottom right).  
in the references, I see with top left, bottom right

thanks 🙂

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [February 15, 2022, 5:06pm UTC](https://discourse.processing.org/t/image-function-with-4-points/35182/2 "2022-02-15T17:06:37Z")

</div>

> [@Omri](#):
>
> Is there any option to display an image in processing with 4 points coordinates?

Yes. [https://processing.org/reference/image\_.html](https://processing.org/reference/image_.html)

---

<div class="post-metadata">

**Author:** ![Omri](https://avatars.discourse-cdn.com/v4/letter/o/bc79bd/32.png) [@Omri](https://discourse.processing.org/u/Omri)\
**Post date:** [February 15, 2022, 5:33pm UTC](https://discourse.processing.org/t/image-function-with-4-points/35182/3 "2022-02-15T17:33:02Z")

</div>

thanks for the answer, but it didn’t what I meant. in this file it says that I can give:  
“img (PImage) the image to display  
a (float) x-coordinate of the image by default  
b (float) y-coordinate of the image by default  
c (float) width to display the image by default  
d (float) height to display the image by default”

and I want to give 4 points (4 coordinates)

---

<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:** [February 15, 2022, 5:38pm UTC](https://discourse.processing.org/t/image-function-with-4-points/35182/4 "2022-02-15T17:38:46Z")

</div>

> [@Omri](#):
>
> and I want to give 4 points (4 coordinates)

> **[imageMode() / Reference](https://processing.org/reference/imageMode_.html)**
>
> Modifies the location from which images are drawn by changing the way in which parameters given to image() are interpreted. The default mode is imageMode(CORNER), which interp…

---

<div class="post-metadata">

**Author:** ![PhoenixStormJr](https://avatars.discourse-cdn.com/v4/letter/p/43a26b/32.png) [@PhoenixStormJr](https://discourse.processing.org/u/PhoenixStormJr)\
**Post date:** [February 15, 2022, 9:02pm UTC](https://discourse.processing.org/t/image-function-with-4-points/35182/5 "2022-02-15T21:02:01Z")

</div>

Short answer: no. Long answer: you’d have to do something with PGraphics and the slope of each individual point, relative to each other point, then fill in the blanks with mean points.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 15, 2022, 10:01pm UTC](https://discourse.processing.org/t/image-function-with-4-points/35182/6 "2022-02-15T22:01:23Z")

</div>

> [@Omri](#):
>
> and I want to give 4 points (4 coordinates)

You need to calculate the 3rd and 4th number (width and height of the window) by saying

widthImg=x2-x1;  
heightImg=y2-y1;

using image() with 5 parameters is always slower than  
using it with 3 parameters, so you want to use resize command

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [February 15, 2022, 10:09pm UTC](https://discourse.processing.org/t/image-function-with-4-points/35182/7 "2022-02-15T22:09:31Z")

</div>

The following runs on my system:

```auto
PImage img;

void setup() {
  size(400,400);
  img = loadImage("myImage.jpg");
}

void draw() {
  image(img, 30, 60, 250, 200);
}

```

To my way of thinking there are four coordinates: x1, y1, x2, y2.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 15, 2022, 10:13pm UTC](https://discourse.processing.org/t/image-function-with-4-points/35182/8 "2022-02-15T22:13:30Z")

</div>

> [@Omri](#):
>
> Is there any option to display an image in processing with 4 points coordinates? (top left, top right, bottom left, bottom right).

In my understanding the OP wants an image function that would take 2 points instead of one point plus width and height.  
I tried to explain how to achieve this.

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [February 15, 2022, 10:34pm UTC](https://discourse.processing.org/t/image-function-with-4-points/35182/9 "2022-02-15T22:34:50Z")

</div>

I think he’s asking for four points which would be eight coordinates: 4x with 4y. I have no idea why he would want to do that; the original post is not very clear.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 15, 2022, 10:55pm UTC](https://discourse.processing.org/t/image-function-with-4-points/35182/10 "2022-02-15T22:55:14Z")

</div>

I think he means 4 parameters referring to the upper  
left and lower right corner (two points)

x1,y1 and x2,y2

---

<div class="post-metadata">

**Author:** ![PhoenixStormJr](https://avatars.discourse-cdn.com/v4/letter/p/43a26b/32.png) [@PhoenixStormJr](https://discourse.processing.org/u/PhoenixStormJr)\
**Post date:** [February 15, 2022, 11:42pm UTC](https://discourse.processing.org/t/image-function-with-4-points/35182/11 "2022-02-15T23:42:56Z")

</div>

GOT IT!!! Or I was able to get the bottom \*right point to move without moving the others. I would continue to go on and move the others as well, but this was very exhausting, it took me 2 hours to get all this. The image is at a slant exactly like you wanted. I hope you can get the idea of what to do, take my code, and make something of your own. Cheers!

```auto
//EXAMPLE

PGraphics exampleImage;

PGraphics editImage;

int newHeight = 40;

int [] pointHeight;

PImage returnImage;

int r;
int g;
int b;
int cX = 0;
int cY = 0;

int br;
int bg;
int bb;
int bcX = 0;
int bcY = 0;

int repeat = 0;
int repeat2 = 0;
int repeat3 = 0;

void setup(){
  //drawing image
  exampleImage = createGraphics(200,200);
  exampleImage.beginDraw();
  
  exampleImage.fill(color(255,0,0));
  exampleImage.rect(0,0,200,200);
  
  exampleImage.fill(color(200,50,0));
  exampleImage.rect(10,10,180,180);
  
  exampleImage.fill(color(150,100,0));
  exampleImage.rect(20,20,160,160);
  
  exampleImage.fill(color(100,150,0));
  exampleImage.rect(30,30,140,140);
  
  exampleImage.fill(color(50,200,0));
  exampleImage.rect(40,40,120,120);
  
  exampleImage.fill(color(0,255,0));
  exampleImage.rect(50,50,100,100);
  
  exampleImage.fill(color(0,200,50));
  exampleImage.rect(60,60,80,80);
  
  exampleImage.fill(color(0,150,100));
  exampleImage.rect(70,70,60,60);
  
  exampleImage.fill(color(0,100,150));
  exampleImage.rect(80,80,40,40);
  
  exampleImage.fill(color(0,50,200));
  exampleImage.rect(90,90,20,20);
  
  exampleImage.fill(color(0,0,255));
  exampleImage.rect(100,100,0,0);
  
  
  
  
  
  exampleImage.endDraw();
  
  fullScreen();
  background(255);
  image(exampleImage,0,0);
  
  // this is to determine the new size of the image
  // because if slanted up, then it won't work the same
  if(newHeight > 0){
    editImage = createGraphics(exampleImage.width,exampleImage.height+newHeight);
  }
  if(newHeight < 0){
    editImage = createGraphics(exampleImage.width,exampleImage.height);
  }
  
  
  //start drawing the fake image
  editImage.beginDraw();
  editImage.stroke(0);
  editImage.strokeWeight(1);
  editImage.fill(0);
  editImage.background(255);
  
  // we draw a line in the slant we
  // want our image to be
  editImage.line(0,exampleImage.height,exampleImage.width,exampleImage.height+newHeight);

  editImage.endDraw();
  
  //this shows what it looks like so far. 
  // you may wanna delete this. 
  image(editImage,300,0);
  
  
  //for every x position, we need to determine
  //the height of every bottom pixel.
  pointHeight = new int[exampleImage.width+1];
  
  
  cX = 100;
  cY = 0;
  r = 255;
  
  //this says that when the color is 0
  //then that must be the black line
  //we drew. Plug that height into 
  //pointHeight
  
  repeat = 0;
  while(repeat < exampleImage.width){
  
    cX = repeat;
    cY = 0;
    r = 255;
  
    while(r > 0){
      cY = cY + 1;
      r = round(red(editImage.get(cX,cY)));
    }
  
    pointHeight[repeat] = cY;
  
  
    repeat = repeat + 1;
  }
  
  
  println(pointHeight);
  
  
  
  
  //erase the image to draw the REAL image
  if(newHeight > 0){
    editImage = createGraphics(exampleImage.width,exampleImage.height+newHeight);
  }
  if(newHeight < 0){
    editImage = createGraphics(exampleImage.width,exampleImage.height);
  }
  
  
  editImage.beginDraw();
  
  cX = 0;
  cY = 0;
  
  //the B means BEFORE. what the point was
  //the last time. 
  br = 0;
  bb = 0;
  bg = 0;
  bcX = 0;
  bcY = 0;
  
  while(cX < exampleImage.width + 1){
    br = 0;
    bb = 0;
    bg = 0;
    bcX = 0;
    bcY = 0;
  while(cY < exampleImage.height + 1){
    
    //collect the color of the point
    r = round(red(exampleImage.get(cX,cY)));
    g = round(green(exampleImage.get(cX,cY)));
    b = round(blue(exampleImage.get(cX,cY)));
    editImage.fill(color(r,g,b));
    editImage.stroke(color(r,g,b));
    
    //draw the point in this new location. 
    //the location is a percentage of the
    //whole height of the bottom point
    editImage.point(cX,round((float(cY)/float(exampleImage.height))*(float(pointHeight[cX]))));
  
    //if a point was skipped, then fill
    //it in here with the color above,
    //and the color below average. 
    if(bcY < round((float(cY)/float(exampleImage.height))*(float(pointHeight[cX]))) - 1){
      repeat = bcY + 1;
      //println("if(bcY:" + bcY + " < :" + str(round((float(cY)/float(exampleImage.height))*(float(pointHeight[cX]))) - 2));
    
      while(repeat < round((float(cY)/float(exampleImage.height))*(float(pointHeight[cX])))){
        editImage.fill(color(round(float(br+r)/2),round(float(bg+g)/2),round(float(bb+b)/2)));
        editImage.stroke(color(round(float(br+r)/2),round(float(bg+g)/2),round(float(bb+b)/2)));
        editImage.point(cX,repeat);
        repeat = repeat + 1;
      }
      

    }
  
  
    // reset the color before to the new color
    br = r;
    bb = b;
    bg = g;
    bcX = cX;
    bcY = round((float(cY)/float(exampleImage.height))*(float(pointHeight[cX])));
  
  
  
    cY = cY + 1;
  }
  cY = 0;
  cX = cX + 1;
  }
  
  //finally show the image. 
  image(editImage,300,300);
  
  
  
  
  
  
  
  
  
  
  
  
  
}

```

---

<div class="post-metadata">

**Author:** ![PhoenixStormJr](https://avatars.discourse-cdn.com/v4/letter/p/43a26b/32.png) [@PhoenixStormJr](https://discourse.processing.org/u/PhoenixStormJr)\
**Post date:** [February 15, 2022, 11:45pm UTC](https://discourse.processing.org/t/image-function-with-4-points/35182/12 "2022-02-15T23:45:22Z")

</div>

8 parameters. He wants the image to be **slanted**. Or at a slope. I got it to work, but not fully. I was only able to move the bottom right point. I’d move the others too, but I’m a full time college student. But y’all can take what I wrote and expand upon it. Have fun!

---

<div class="post-metadata">

**Author:** ![PhoenixStormJr](https://avatars.discourse-cdn.com/v4/letter/p/43a26b/32.png) [@PhoenixStormJr](https://discourse.processing.org/u/PhoenixStormJr)\
**Post date:** [February 15, 2022, 11:46pm UTC](https://discourse.processing.org/t/image-function-with-4-points/35182/13 "2022-02-15T23:46:18Z")

</div>

That’s cool, but he wants to move the points for the image to be at a slope. Or that’s the way I understood it.

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [February 16, 2022, 12:49am UTC](https://discourse.processing.org/t/image-function-with-4-points/35182/14 "2022-02-16T00:49:44Z")

</div>

> [@Omri](#):
>
> and I want to give 4 points (4 coordinates)

1 point = 2 coordinates, 1x and 1y.  
4 points = 8 coordinates, 4x and 4y.  
4 points != 4 coordinates.

Common images are usually a rectangle or a square. Did you have something else in mind?

---

<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:** [February 16, 2022, 1:21am UTC](https://discourse.processing.org/t/image-function-with-4-points/35182/15 "2022-02-16T01:21:55Z")

</div>

Hello,

Reference:  
[https://processing.org/reference/texture\_.html](https://processing.org/reference/texture_.html)

Example:

```auto
PImage img;

float x1, y1, x2, y2, x3, y3, x4, y4;

void setup() 
  {
  size(200, 200, P3D);
  img = loadImage("https://cdn.theatlantic.com/thumbor/jb3UdKqcmt1JleWOqNj8UWRxcFk=/0x591:2832x2184/976x549/media/img/mt/2017/10/Pict1_Ursinia_calendulifolia/original.jpg");
  noStroke();
  }

void draw() 
  {
  background(0);
  
  int r = 10;
  float th = (frameCount%360)*(TAU/360);
  
  x1 = 50+r*cos(th);
  y1 = 50+r*sin(th);

  x2 = 150-r*cos(th);
  y2 = 50-r*sin(th);
  
  x3 = 150+r*cos(th);
  y3 = 150+r*sin(th);

  x4 = 50-r*cos(th);
  y4 = 150-r*sin(th);
  
  beginShape(QUAD);
  texture(img);
  vertex(x1, y1, 0, 0);
  vertex(x2, y2, img.width, 0);
  vertex(x3, y3, img.width, img.height);
  vertex(x4, y4, 0, img.height);
  endShape();
  }

```

![flowers](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/49b0c46b11e8230b1f9e16a36cab6310c776964b.gif)

`:)`

---

<div class="post-metadata">

**Author:** ![PhoenixStormJr](https://avatars.discourse-cdn.com/v4/letter/p/43a26b/32.png) [@PhoenixStormJr](https://discourse.processing.org/u/PhoenixStormJr)\
**Post date:** [February 16, 2022, 2:20am UTC](https://discourse.processing.org/t/image-function-with-4-points/35182/16 "2022-02-16T02:20:33Z")

</div>

Wow I didn’t know that existed.

---

<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:** [February 16, 2022, 7:15am UTC](https://discourse.processing.org/t/image-function-with-4-points/35182/17 "2022-02-16T07:15:19Z")

</div>

> **[Reference](https://processing.org/reference/quad_.html)**
>
> A quad is a quadrilateral, a four sided polygon. It is similar to a rectangle, but the angles between its edges are not constrained to ninety degrees. The first pair of parameters (x1,y1) sets the fir…

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [February 16, 2022, 7:34am UTC](https://discourse.processing.org/t/image-function-with-4-points/35182/18 "2022-02-16T07:34:29Z")

</div>

Is it possible to stick an image in a quad?

---

<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:** [February 16, 2022, 7:50am UTC](https://discourse.processing.org/t/image-function-with-4-points/35182/19 "2022-02-16T07:50:45Z")

</div>

**quad()** is pretty much like a more complex **rect()** or **square()**.

I don’t think any of those can have **texture()** AFAIK.

---

<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:** [February 16, 2022, 8:58am UTC](https://discourse.processing.org/t/image-function-with-4-points/35182/20 "2022-02-16T08:58:47Z")

</div>

Hello,

Texturing a QUAD:

```auto
PShape qd;
PImage img;

void setup() 
  {
  size(200, 200, P2D);
  img = loadImage("https://cdn.theatlantic.com/thumbor/jb3UdKqcmt1JleWOqNj8UWRxcFk=/0x591:2832x2184/976x549/media/img/mt/2017/10/Pict1_Ursinia_calendulifolia/original.jpg");
 
  qd = createShape(QUAD, 50, 50, 170, 70, 150, 150, 30, 170);
  qd.setTexture(img);
  shape(qd, 0, 0);
  noLoop();
  }

```

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

References:  
[https://processing.org/tutorials/pshape](https://processing.org/tutorials/pshape) \< Example at end of tutorial

`:)`

[Next page](https://discourse.processing.org/t/image-function-with-4-points/35182.md?page=2)