How to create a simple 3 image collage using processing?

PhilipBH

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.

PhiLho

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

PhilipBH

Can you give an example?

PhilipBH

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...

_vk

https://www.google.com/search?btnG=1&pws=0&q=mask()+site%3Aprocessing.org&gws_rd=ssl

PhilipBH

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?

PhilipBH

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.

amnon

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/

PhilipBH

Thank!

PhilipBH

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?

amnon

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.

PhilipBH

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

_vk

Maybe this can help.

http://processing.org/tutorials/pshape/

PhilipBH

I will take a look into this.

_vk

and of course, as mentioned...

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

With all the PShape methods

and

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

amnon

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.

PhilipBH

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

}

amnon

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:-)