Image() function with 4 points

Processing Beginners
11

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);
  
  
  
  
  
  
  
  
  
  
  
  
  
}