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 
1 Like
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)
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.
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
The following runs on my system:
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.
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.
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.
I think he means 4 parameters referring to the upper
left and lower right corner (two points)
x1,y1 and x2,y2
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!
//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);
}
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!
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.
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?
Hello,
Reference:
https://processing.org/reference/texture_.html
Example:
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();
}
:)
3 Likes
Wow I didn’t know that existed.
Is it possible to stick an image in a quad?
quad() is pretty much like a more complex rect() or square().
I don’t think any of those can have texture() AFAIK.
Hello,
Texturing a QUAD:
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();
}
References:
https://processing.org/tutorials/pshape < Example at end of tutorial
:)
3 Likes