Complete Noob Advice: Random Image Crop

brokentorus

Cheers, as I've been introducing, I'm a goddamn total noob to this science. I started because I have a simple(?) clear idea for a graphic design project. I'd like to make processing load an image, reproduce it a random number of times, cropping it randomly and finally repeat the process as the last crop will be repeated right next to the last one for a random number of times. The result should be a random pattern of cropped and modulated parts of the original image.

As I could understand, the ingredients of this code should be: - PImage ; - get (); - random ();

but how I should mix them? I tried to follow and mix different tutorials about those issues, but I couldn't figure out how to make it work.

Do you know da wae?

Chrisir

What is the problem?

It seems simple

Make

• a for loop for the random distribution and then
• another for loop for the last row

Show your attempt, your code

TfGuy44

Well a good first step would be to load and display the image.

https://processing.org/reference/image_.html

Then you want to get a part of the image:

https://processing.org/reference/get_.html

Where from? How big? Well, the values will be random, so you will need to generate some random numbers:

https://processing.org/reference/random_.html

Once you have a random part of the image, you can draw it using image() as before.

Yay! Examples!

Attempt to write this yourself and POST the CODE of your attempt.

Chrisir

this is the better get, for an image

https://processing.org/reference/PImage_get_.html

e.g.

PImage newMountains = mountains.get(50, 0, 50, 100); 

brokentorus

Until now, this is what I could experiment.

PImage Casa;

void setup() {
  size(1920, 1080);
  Casa = loadImage("casa.jpg");
}

void draw() {
  for (int i = 0; i < 100; i++) {
    float r = random(0, 500);
  }
  image(Casa, height/4, width/4);
  image( Casa, 0, 0);
  PImage c = get();
  image(c, 0, 0, random(0, 1000), random(0, 500));
}

As you can see, I'm far away from what I'm imagining.

The code loads the image (which is very big) also as background and then generates as an animation random crops of the image. The matter is: as the size of the crop changes, the image is also scaled. And I don't want it to be an animation. I will link an image as vague example of what I meant in the first post.

TfGuy44

Ooo, close. You are 80% of the way to us maybe helping you (because you have code now, and you posted it). The last 20% is here:

https://forum.processing.org/two/discussion/15473/readme-how-to-format-code-and-text#latest

Chrisir

This idea:

PImage c = get(); 
image(c, 0, 0, random(0, 1000), random(0, 500));

must better be like:

// Syntax is  img.get(x, y, w, h)
PImage c = Casa.get( random(Casa.width()),
                     random(Casa.height()),
                     random(Casa.width()),
                     random(Casa.height())  );

image(c, random(width), random(height));

you haven't done my advice with two for-loops yet

brokentorus

Hey there, first of all THANK YOU SO MUCH. I appreciate your patience. So, I started getting a little bit more and this is what I wrote:

PImage Casa;

void setup() {
    size(1920, 1080);
    Casa = loadImage("casa.jpg");
}

void draw() {
    for (int i = 0; i < 100; i++) {
            float r = random(0, 500);
        }
    for (int x = 0; x < 200; x = x+Casa.width){
        
    }
    image(Casa, height/4, width/4);
        image( Casa, 0, 0);
        PImage c = Casa.get( random(Casa.width()),
                     random(Casa.height()),
                     random(Casa.width()),
                     random(Casa.height())  );
 
        image(c, random(width), random(height));

        

}

But there's a problem: I get an error message -> The function width() does not exist

help!

Chrisir

PImage Casa;

void setup() {
  size(1920, 1080);
  Casa = loadImage("casa.jpg");
  noLoop();
}

void draw() {

  // image(Casa, height/4, width/4);
  image( Casa, 0, 0);


  for (int i = 0; i < 10; i++) {
    // float r = random(0, 500);
    PImage c = Casa.get( int(random(Casa.width)), 
      int(random(Casa.height)), 
      int(random(Casa.width)), 
      int(random(Casa.height)) );

    image(c, random(width), random(height));
  }//for

  // -----------------------------------------

  for (int x = 0; x < 200; x = x+Casa.width) {

    // to do
  }//for
}

Chrisir

oh, it seems that get() can copy an area from the image that exceeds the borders of the right and lower side.

Then there is a black area in image c (right and lower side).

Let me explain:

Let's say this

    PImage c = Casa.get( int(random(Casa.width)), 
      int(random(Casa.height)), 
      int(random(Casa.width)), 
      int(random(Casa.height)) );

got these random results PImage c = Casa.get( 500 , 300, 200, 200 );

and casa is only 600x400, then c would still be 200x200 but but the right part (100 px) and the lower part (100 px) would be black (since we make c 200x200 but copy a part from casa that doesn't exist / is too small into it)

to avoid this, we could store the position where we start copying (500,300) and make our random w and h of get() in a way it cannot be bigger than 100,100 in that case:

so width and height with reduced maximum for random

  PImage c=null;

  for (int i = 0; i < 11; i++) {
    // float r = random(0, 500);
    c=null;

    int xCrop=  int(random(Casa.width));  // !!!!!!!!!!!!!!!!!!! upper left corner
    int yCrop=  int(random(Casa.height));
    c = Casa.get(xCrop, yCrop, 
      int(random(Casa.width-xCrop)),     // !!!!!!!!!!!!!!!!!!!    width 
      int(random(Casa.height-yCrop)) );  // !!!!!!!!!!!!!!!!!!!    and height with reduced maximum

    image(c, random(width-c.width), random(height-c.height));
  }//for

brokentorus

Ok this is getting tricky. Where should I put this part of code?

Chrisir

for (int x = 0; x < 200; x = x+c.width) {

// 
image(c,x,height-c.height);

}//for

Chrisir

The longer 1st code I posted 10:04 is replacing the old section

My 2nd post 10:19 belongs after that section

brokentorus

So, more or less, this is the code it should come out, right?

    PImage Casa;
     
    void setup() {
      size(1920, 1080);
      Casa = loadImage("casa.jpg");
      noLoop();
    }
     
    void draw() {
     
      image( Casa, 0, 0);
     
     
      for (int i = 0; i < 100; i++) {
        PImage c=null;
      }
     
      for (int i = 0; i < 11; i++) {
      c=null;
     
      int xCrop=  int(random(Casa.width));  
      int yCrop=  int(random(Casa.height));
      c = Casa.get(xCrop, yCrop, 
        int(random(Casa.width-xCrop)),    
        int(random(Casa.height-yCrop)) ); 
     
      image(c, random(width-c.width), random(height-c.height));
      }
    
    for (int x = 0; x < 200; x = x+c.width) {
      image(c,x,height-c.height);
      }
      
    for (int x = 0; x < 100; x = x+Casa.width/4) {
    }
      //saveFrame("render.png");
    }

It's just I get an error saying "Cannot find anything named “c”" :/

Chrisir

It's just I get an error saying "Cannot find anything named c"

Delete lines 14 and 16

Keep line 15

Also please note that I use noLoop

brokentorus

Guys this is great. Here it is, the code of my dreams. Anyway there's still a small issue I can't figure out: as the image is reeeaaaally big, how I tell the code to use it as a smaller version? I'm trying to mess up everywhere adding a "/4" to the width and height lines but still I can't reduce the sizes of the crops.

Chrisir

directly after loadImage use resize

Casa.resize(600,400);

brokentorus

Thank you so much, you've been kind and patient. This is priceless!

Chrisir

It was an honor, Sir.

Chrisir

PImage Casa;

void setup() {
  size(1600, 800);

  Casa = loadImage("casa.jpg");
  Casa.resize(600, 400);
  background(0);
  noLoop();
}

void draw() {

  // image(Casa, height/4, width/4);
  // image( Casa, 0, 0);

  PImage c=null;

  for (int i = 0; i < 111; i++) {
    c=null;

    // pos where to start get() command (lower left corner)
    int xCrop = int(random(Casa.width));
    int yCrop = int(random(Casa.height));

    // get a part of the image and make sure we don't go over 
    // the lower right corner doing so
    c = Casa.get(xCrop, 
      yCrop, 
      int(random(Casa.width-xCrop)), 
      int(random(Casa.height-yCrop)) );

    image(c, 
      random(width-c.width), random(height-c.height));
  }//for

  // -----------------------------------------

  for (int x = 0; x < width+c.width; x += c.width) {
    image(c, 
      x, height-c.height);
  }//for
  //
}//func
//

brokentorus

that's cool. But how do I say to the code to repeat the crop modularly not only on the left lower corner but randomly on the whole image?

Chrisir

I don’t understand

Which line Numbers are you referring to?

In my sketch he uses the whole image (randomly)

In line 39 to 42 he just uses the last c from the previous for loops. Those are always different randomly

brokentorus

Let me show you an example:

As you pointed out, the bottom left corner is going to generate the pattern I'm interested to. But how I make this pattern repeat many times in the whole image and not only in the corner? And how can I make the pattern repeat less times?

Please, be patient. I can barely understand what is a line of code...

Chrisir

crop takes a part of the image Casa, like a rect

The first two parameter are x,y of the upper left corner (Apologies, I had that wrong) and width and height of the rectangle (cut out of Casa).

Lines 23 and 24

Now there are Two parts in the code, the first for loop where we make new crops and distribute them randomly (lines 33-34).

The second part is doing the long repetition on the lower part (lines 39-42).

They look always different depending on the last c.

This long row you can move up by changing y value in line 41

The distance between the images is done by what we add to x at the end of line 39. at the moment that’s the width of c.

But you can also have 2x c.width

Chrisir

Please please play with the code and try out the things I pointed out

brokentorus

I obviously did! It's just I couldn't figure out what did what :) This last answer explained everything! Thank you so much!!!

Chrisir

Apologies for my mistake with the upper left corner.