› ›

Skew image using sliders

totalNewbtotalNewb
edited May 2016 in Library Questions

stretch image2

I'm trying to do what the image above shows: take any photo/image, and stretch/skew on an angle, where 100% on a slider would mean the image is all the way across/down, and adjusting the slider would allow for a stretch inwards from the bottom of the screen/image. I have gotten a straight horizontal and vertical stretch (see code), but not a way to skew like this. Any ideas?

//controlP5 is UI controllers
import controlP5.*;
ControlP5 cP5;


/*initial dimensions*/
public int myWidth = 400;
public int myHeight = 400;

//image is called "photo"
PImage photo;

void setup(){
    size(800,800);
    //load image file: add file by Sketch>add File. 
    photo = loadImage("400x400.jpg");

  /* new instance of ControlP5 */
    cP5 = new ControlP5(this);

  /* add controllers */
    //(label, setMin, setMax, public int variable set above, xcoords of ui, ycoords of ui, size uix, sizueuiy, setID)
  cP5.addSlider("Width",400,800,myWidth,10,10,600,10).setId(1);


  cP5.addSlider("Height",400,800,myHeight,10,30,600,10).setId(2);

}


void draw(){
  background(0);

 //resizes image according to new x/y
   photo.resize(myWidth,myHeight);
   //draw the image to screen at co-ords (0,0)
  image(photo, 0, 0);

}

void controlEvent(ControlEvent theEvent) {
  /* events triggered by controllers are automatically forwarded to 
     the controlEvent method; by checking the id of a controller one can distinguish
     which of the controllers has been changed.*/

  switch(theEvent.controller().id()) {
    case(1):
    /* controller numberbox1 with id 1 */
    myWidth = (int)(theEvent.controller().value());
    break;
    case(2):
    /* controller slider1 with id 2 */
    myHeight = (int)(theEvent.controller().value());
    break; 

  }
}
Tagged:

Answers

  • p555tp555t

    I'm trying to do the exact same thing - almost ! Can't really find anything processing related on the web, though... Did you find a way to do this in the meantime? It'd be nice if you could share your solution here...

    Many thanks in advance!!!

    p55t

  • amnonamnon

    Use the image as a texture in a beginShape/endShape, then move the vertices. That way it's very easy to achieve the desired effect.

  • p555tp555t

    Thaks for that! It's exactly what i'm looking for...

    A Problem though: The Image gets distorted in a strange way. (See picture) Bildschirmfoto 2014-12-14 um 15.38.57 The Texture is a texture(PImage), that i created by drawing in an offscreen PGraphics and after that converting it to PImage by calling PGraphics.get() on it.

    The nodged corners you see are not in the original image, the bounds are supposed to be perfectly straight...

    Any idea why these bumps/distortions occur? It seems like changing the size of the texture-PImage has an effect on the scale of the distortion, making it bigger results in smaller distortions, but they don't disappear!

    Here's the related code inside draw() - to me it seems like i perfectly copied the way to do this from the example...

    void draw(){

  background(255);

  pushStyle();

  // draw background
  //image(layer_0, 0,0,width,height);

  //blendMode(MULTIPLY);
  tint(255, tint);
  image(layer_1, 0, 0, width, height);
  popStyle();

  // draw pictures
  textureMode(NORMAL);
  textureWrap(REPEAT);
  //noStroke();
  beginShape();

  texture(textureIMG);
  vertex(75, 3, 0, 0);
  vertex(511, 179, 1, 0);
  vertex(511, 364, 1, 1);
  vertex(75, 476, 0, 1);

  endShape();

}

    what am i missing? Is this a bug?

  • koogskoogs

    is this a bug?

    yes. see http://en.wikipedia.org/wiki/Texture_mapping#Perspective_correctness specifically the 'affine' bit, for a description.

    it used to show up in this example, but now doesn't, i guess something changed. https://processing.org/examples/texturecube.html

    solution was usually to use small strips of texture rather than large areas. that said, the above mentions that opengl renderer is better.

  • p555tp555t

    Thanks a lot for the quick reply! I will look at the resources you provided! cheers p555t

  • p555tp555t

    I'm still puzzled!

    For starters: Why doesn't the effect occur in the 3d-cube example, but in my code? What am i doing wrong that they are doing right there? (I tried drawing the vertex with 3d coordinates, same effect.)

    Also, regarding the wiki-explanation of afine vs perspective-correct texture mapping i am left with the question: Which one does processing use? (P2D / P3D rendering modes) And if it should support perspective correct texture mapping (seems to work for the example) why not for my sketch?

    I read a bit about openGL here and there, and i hesitate to dive deep into using the things i found in another post to this forum: forum.processing.org/two/discussion/1842/opengl-mapping-texture-and-perspective/p1 this is because it looks like a lot of new stuff to learn (for which i only really have the time if there's no other way). I only want to go there if i can be shure it will solve the problem...

    Does anyone know of a good example where someone solved this, and documented it?

    I really hope for some good hints here, since i start feeling really lost solving this on my own... Anything that works is fine with me, either a workaround, or the proper way to do this!

    Any suggestions / ideas? You could really help a fella out here!

    Big thanks in advance!

    p55t

  • p555tp555t

    By the way, here is how i solved the issue:

    I stumbled across this nice package of java utilities put together by Peter Borissow (and other authors). It's all the little helpers he collected over the years, and now decided to share.

    It offers a lot of convenience methods and extension to the ajva core - among the a class called javaxt.io.Image

    It allows you to specify the new corner-coordinates for an image, and it will get skewed to these coordinates - much like processings beginShape(), vertex() and texture() methods, but without openGL, just plain Java2D!

    One strange thing though: It will only allow you to extend the image to the right an down. Negative coordinates don't work - so i had to calculate a bounding box for the target coordinates, resize the image to this bounding-box, and skew it from there inwards using javaxt.io.image.

    Works like a charm! I hope this helps anyone in the future! thx for your supprot!!!

    Ph

Sign In or Register to comment.