How to create a simple 3 image collage using processing?

edited July 2014 in How To...

I have searched Processing and couldn't find any help in getting this effect done, see below: http://farm4.static.flickr.com/3818/11577359654_0f8ede8007_m.jpg

Ideally I would like to load 3 images from the camera and have them arranged in a collage, preferably not in a box collage, but with non-normal shape collage (ie. not circle, rectangle or square, see above image).

Loading from camera could come after, 3 images from the data folder and displayed in a collage similar to the above photo.

Any help or push in the right direction would be appreciated.

Answers

  • You can use mask() to cut out shapes, then just draw the results.

  • Can you give an example?

  • Remember the desired out come is this: http://farm4.static.flickr.com/3818/11577359654_0f8ede8007_m.jpg

    I found this and I got a little closer: http://www.adamtindale.com/blog/processing/129/

    How do I stop the 3 images from overlapping? I would like to be able to drag around each image in its own shaped block, keep in mine the desired outcome...

  • I don't quite get the mask() but this is what I have so far:

    PGraphics g;
    int x;
    
    void setup()
    {
      size( 720, 480, P2D);
      // create the mask
      g = createGraphics(width, height, P2D);
    }
    
    void draw()
    {
      background(244, 90, 10);
      // draw the mask
      g.beginDraw();
      g.background(0);
      g.stroke(255);
      //g.line(0, x%height, g.width, x++%height);
      g.rect(10, 10, 100, 100);
      g.triangle(10, 110, 10, 175, 110, 110);
      g.endDraw();
    
      // apply the mask to the screen
      blend(g, 0, 0, width, height, 0, 0, width, height, MULTIPLY);
    }
    

    I can easily change this to show an image as the background and then only show the rect and triangle mask.

    This is for one image, suppose I want 3 images, in there own masked blocks...Is this possible with Processing?

  • Please look at this image: http://farm4.static.flickr.com/3818/11577359654_0f8ede8007_m.jpg

    As you can see there are 3 images...

    If I load 3 images in processing, they will overlap..how would I stop the overlap?

    How can I give each image its own block...think of picmix or instacollage.

  • edited July 2014 Answer ✓

    Yeah, you can stop linking to the same image over and over, we get the point. ;)

    As said, mask() is an option, but I think this might even be easier with beginShape(), texture(), vertex() and endShape(). Make sure to understand and/or set the textureMode() and to supply texture coordinates in the vertex() calls. Then you can create three shapes just as you showed them, each using a different image as it's texture. As a general tip, there is Processing reference which explains all the available methods: http://www.processing.org/reference/

  • edited July 2014

    Thank!

  • edited July 2014

    Thanks amnon, your advice really helped.

    size(100, 100, P3D);
    noStroke();
    PImage img = loadImage("laDefense.jpg");
    beginShape();
    texture(img);
    vertex(10, 20, 0, 0);
    vertex(80, 5, 100, 0);
    vertex(95, 90, 100, 100);
    vertex(40, 95, 0, 100);
    endShape();
    

    But this maps the entire image as the texture, suppose I only want to map a portion of the image as the texture and then use the mouse to drag the image around within the Shape boundaries defined by the vertex, how would this work?

  • You can use the texture coordinates you want. Depending on the textureMode() they are either in terms of pixels or normalized (0-1). You can have any combination of vertex locations and vertex uv texture coordinates.

  • edited July 2014

    Cool, how about being able to drag the image/texture around within the vertices?

  • I will take a look into this.

  • _vk_vk
    edited July 2014

    and of course, as mentioned...

    http://processing.org/reference/PShape.html

    With all the PShape methods

    and

    http://processing.org/reference/texture_.html

  • Answer ✓

    Cool, how about being able to drag the image/texture around within the vertices?

    Possible. Anywhere you have numbers in a sketch, you can always replace them by variables. Variables can then always be changed. By math, mouse events, etc.

  • edited July 2014

    This is what I came up with, just change the image to run:

    PImage img;
    PImage img2;
    
    int imageX, imageY;
    int imageX2, imageY2;
    
    int imgW, imgH, x, y;
    int imgW2, imgH2, x2, y2;
    
    boolean start = false;
    boolean start2 = false;
    
    void setup()
    {
      size(320, 480, P2D);
    }
    
    void draw()
    {  
      PImage img = loadImage("eva.jpg");
      PImage img2 = loadImage("eva.jpg");
    
      if (!start)
      {
        imgW = img.width;
        imgH = img.height;
        x = imgW;
        y = imgH;
        start = true;
      }
    
      if (!start2)
      {
        imgW2 = img2.width;
        imgH2 = img2.height;
        x2 = imgW2;
        y2 = imgH2;
        start2 = true;
      }
    
      if (mousePressed)
      {  
        if (mouseButton == LEFT)
        {
          if (mouseX > 0 && mouseX < width/2 &&
            mouseY > 0 && mouseY < height)
          {
            x = x + 25;
            y = y + 25;
          }
          if (mouseX > width/2 && mouseX < width &&
            mouseY > 0 && mouseY < height)
          {
            x2 = x2 + 25;
            y2 = y2 + 25;
          }
        } else if (mouseButton == RIGHT)
        {
          if (mouseX > 0 && mouseX < width/2 &&
            mouseY > 0 && mouseY < height)
          {
            x = x - 25;
            y = y - 25;
          }
          if (mouseX > width/2 && mouseX < width &&
            mouseY > 0 && mouseY < height)
          {
            x2 = x2 - 25;
            y2 = y2 - 25;
          }
        }
      }
    
      x = constrain(x, imgW/2, imgW*2);
      y = constrain(y, imgH/2, imgH*2);
    
      x2 = constrain(x2, imgW2/2, imgW2*2);
      y2 = constrain(y2, imgH2/2, imgH2*2);
    
    
    
      img.resize(x, y);
      img2.resize(x2, y2);
    
      background(0);   
      pushMatrix();  
      noStroke(); 
      beginShape();  
      texture(img);    
      vertex(0, 0, imageX, imageY);
      vertex(width/2, 0, width/2+imageX, imageY);
      vertex(width/2, height, width/2+imageX, height+imageY);
      vertex(0, height, imageX, height+imageY);
      endShape();  
    
      beginShape();  
      texture(img2);    
      vertex(width/2, 0, imageX2, imageY2);
      vertex(width, 0, width/2+imageX2, imageY2);
      vertex(width, height, width/2+imageX2, height+imageY2);
      vertex(width/2, height, imageX2, height+imageY2);
      endShape(); 
      popMatrix();
    }
    
    void mouseDragged()
    {  
      if (mouseX > 0 && mouseX < width/2 &&
        mouseY > 0 && mouseY < height)
      {
        imageX -= mouseX - pmouseX;
        println("X" + imageX + "-W" + imgW);
        if (imageX < 0) imageX = 0;
        if (imageX > x-width/2) imageX = x-width/2;
      }
    
      if (mouseX > 0 && mouseX < width/2 &&
        mouseY > 0 && mouseY < height)
      {
        imageY -= mouseY - pmouseY;
        println("Y" + imageY + "-H" + imgH);
        if (imageY < 0) imageY = 0;
        if (imageY > y-height) imageY = y-height;
      }
    
      if (mouseX > width/2 && mouseX < width &&
        mouseY > 0 && mouseY < height)
      {
        imageX2 -= mouseX - pmouseX;
        println("X" + imageX2 + "-W" + imgW2);
        if (imageX2 < 0) imageX2 = 0;
        if (imageX2 > x2-width/2) imageX2 = x2-width/2;
      }
    
      if (mouseX > width/2 && mouseX < width &&
        mouseY > 0 && mouseY < height)
      {
        imageY2 -= mouseY - pmouseY;
        println("Y" + imageY2 + "-H" + imgH2);
        if (imageY2 < 0) imageY2 = 0;
        if (imageY2 > y2-height) imageY2 = y2-height;
      }
    }
    
    void mouseReleased()
    {  
      if (mouseX > 0 && mouseX < width/2 &&
        mouseY > 0 && mouseY < height)
      {
        imageX -= mouseX - pmouseX;
        println("X" + imageX + "-W" + imgW);
        if (imageX < 0) imageX = 0;
        if (imageX > x-width/2) imageX = x-width/2;
      }
    
      if (mouseX > 0 && mouseX < width/2 &&
        mouseY > 0 && mouseY < height)
      {
        imageY -= mouseY - pmouseY;
        println("Y" + imageY + "-H" + imgH);
        if (imageY < 0) imageY = 0;
        if (imageY > y-height) imageY = y-height;
      }
    
      if (mouseX > width/2 && mouseX < width &&
        mouseY > 0 && mouseY < height)
      {
        imageX2 -= mouseX - pmouseX;
        println("X" + imageX2 + "-W" + imgW2);
        if (imageX2 < 0) imageX2 = 0;
        if (imageX2 > x2-width/2) imageX2 = x2-width/2;
      }
    
      if (mouseX > width/2 && mouseX < width &&
        mouseY > 0 && mouseY < height)
      {
        imageY2 -= mouseY - pmouseY;
        println("Y" + imageY2 + "-H" + imgH2);
        if (imageY2 < 0) imageY2 = 0;
        if (imageY2 > y2-height) imageY2 = y2-height;
      }
    

    }

  • Great! I haven't run this, but some suggestions from looking at your code:

    • Never load images in draw(). That runs 60 times per second. Instead, always load them in setup(), which runs once at the beginning of the program. Make the two PImage's global, load them in setup(). In fact lines 20-39 can go into setup(), then you can also lose the two start booleans. If you change images, then make the global ones imageOriginal, so you can reuse them - imgOne = imageOriginal.get() - instead of reloading them over and over again.
    • Seeing mousePressed code in draw() and mouseDragged/Released() methods. It's probably cleaner to have code in a mousePressed() (combined with dragged & released) method instead of in draw(). But haven't tested your code, so not sure how it functions exactly.
    • Seeing a lot of identical code, which means there is a way to shorten it. Make a custom method, that you can call, like moveImage(PImage, x, y) or something. Perhaps even make a class if you are ready for that. Also make sure to not check the same thing 3 times in different methods.
    • Seeing a lot of hardcoded numbers. If you use a class, you can probably shorten the code a lot and instead of hardcoded numbers also have some input variables, making your code more flexible.
    • It seems in your current sketch a lot of it is based on mouse location, where it could also be based on selection (mouse over, click, drag) instead.

    Just some ideas... O:-)

Sign In or Register to comment.