how to create a pattern image from multiple images

Programming Questions

ollena

how to create a pattern image from multiple images

in Programming Questions • 1 year ago

Please help.

For my project I need to resize 300 000 images (*.jpeg) from a folder on my computer to the size 5x7 pixels.
Now I manually take the images from my folder, resize and put them together in a particular order (left to right, row after row - just as letters in a text) which creates a pattern. I use Photoshop to reduce the size of every image and to put them together. So in the end there should be a jpeg of the following size: 547 images wide BY 547 images high (equals 547x547=~300.000)
therefore:
547 images x 7 pixels = 3829 pixels WIDE
547 images x 5 pixels = 2735 pixels HIGH
(based on the size of the reduced film frames the final pattern will equal)
To do it manually it will take me ... months.

Is there any way to do it using Processing. Please help.

I am a beginner so can you please explane in details?

Thanks a lot!

Replies(7)

PhiLho

Re: how to create a pattern image from multiple images

1 year ago

OK, here is a quick sketch. For testing purpose, I increased the size of the images and reduced the size of the sketch.

final String path = "G:/Images/icons";
final int imgW = 70;
final int imgH = 50;
void setup()
{
size(700, 500);
background(255);
FilenameFilter filter = new FilenameFilter()
{
public boolean accept(File dir, String name)
{
return name.endsWith(".jpg") // Enough for you
|| name.endsWith(".png") || name.endsWith(".gif"); // More for my test
}
};
int posX = 0;
int posY = 0;
File[] files = new File(path).listFiles(filter);
for (File f : files)
{
PImage img = loadImage(f.getAbsolutePath());
image(img, posX, posY, imgW, imgH);
if (posX + imgW > width)
{
posX = 0;
posY += imgH;
if (posY > height)
{
break; // Stop drawing
}
}
else
{
posX += imgW;
}
}
}

amnon.owed

Re: how to create a pattern image from multiple images

1 year ago

Here is another one...

* Note that it's displaying at 700x500, but it works and saves the result at the full output resolution.

Code Example

import java.io.*;
String imagePath = "C:/enter/full/path/to/your/images/here";
int outputWidth = 3829;
int outputHeight = 2735;
int smallWidth = 7;
int smallHeight = 5;
String[] images;
int imageCount;
PGraphics pg;
void setup() {
size(700, 500);
pg = createGraphics(outputWidth, outputHeight, P2D);
images = loadImageFilenames(imagePath);
}
void draw() {
PImage currentImage = loadImage(imagePath + "/" + images[imageCount % images.length]);
currentImage.resize(smallWidth, smallHeight);
int x = (smallWidth * imageCount) % outputWidth;
int y = ((smallWidth * imageCount) / outputWidth) * smallHeight;
if (y < outputHeight) {
pg.beginDraw();
pg.image(currentImage, x, y);
pg.endDraw();
background(0);
image(pg, 0, 0, width, height);
imageCount++;
} else {
pg.save("output.png");
exit();
}
}
String[] loadImageFilenames(String path) {
File folder = new File(path);
FilenameFilter imgFilter = new FilenameFilter() {
public boolean accept(File dir, String name) {
String lowCase = name.toLowerCase();
return lowCase.endsWith(".jpg")
|| lowCase.endsWith(".png")
|| lowCase.endsWith(".tga");
}
};
return folder.list(imgFilter);
}

ollena

Re: how to create a pattern image from multiple images

1 year ago

Thank you very much for your quick responses and for your codes!

Just to clarify something.
Does it matter if I work on Mac or a PC? I'm currently on Mac ( but can try your codes on PC).

Can you please specify where exactly in your code I need to determine the pathname of my folder of images and how I shall do it on my Mac.

shall I put it this way: "Ollena's MacBook Pro/Macintosh HD/Users/Ollena/111"

if yes in what part shall I put this pathname?

Sorry, they look like stupid questions, it might be very annoying for you - programming professionals - to answer on such boring questions.
It's because I am a beginner (Very much a beginner). It's all new for me, but it's veeeeery needed!

I really need your help, guys!

Thank you

amnon.owed

Re: how to create a pattern image from multiple images

1 year ago

It doesn't matter if you're on mac or pc. You can run Processing (Java) on either system.

In phi.lho's code it's line 1: final String path = " G:/Images/icons";
In my code it's line 3: String imagePath = " C:/enter/full/path/to/your/images/here";

You can use the adapted code below instead. It will give you a popup to select the folder you want.

Adapted Code

import java.io.*;
int outputWidth = 3829;
int outputHeight = 2735;
int smallWidth = 7;
int smallHeight = 5;
String imagePath;
String[] images;
int imageCount;
PGraphics pg;
void setup() {
size(700, 500);
pg = createGraphics(outputWidth, outputHeight, P2D);
imagePath = selectFolder();
if (imagePath != null) { images = loadImageFilenames(imagePath); } else { exit(); }
}
void draw() {
PImage currentImage = loadImage(imagePath + "/" + images[imageCount % images.length]);
currentImage.resize(smallWidth, smallHeight);
int x = (smallWidth * imageCount) % outputWidth;
int y = ((smallWidth * imageCount) / outputWidth) * smallHeight;
if (y < outputHeight) {
pg.beginDraw();
pg.image(currentImage, x, y);
pg.endDraw();
background(0);
image(pg, 0, 0, width, height);
imageCount++;
} else {
pg.save("output.png");
exit();
}
}
String[] loadImageFilenames(String path) {
File folder = new File(path);
FilenameFilter imgFilter = new FilenameFilter() {
public boolean accept(File dir, String name) {
String lowCase = name.toLowerCase();
return lowCase.endsWith(".jpg")
|| lowCase.endsWith(".png")
|| lowCase.endsWith(".tga");
}
};
return folder.list(imgFilter);
}

ollena

Re: how to create a pattern image from multiple images

1 year ago

It's amazing!
It works.

Thanks a lot for your help, guys!

Amnon.owed thank you for the popup option. It does help. Somehow my mac pathnames didn't work.
The popup option works perfectly!

They are really great the codes you created! they do exactly what I need!

You are great, guys! Many thanks!

PhiLho

Re: how to create a pattern image from multiple images

1 year ago

amnon.owned's sketch is good (I am suspecting we did them in parallel!), but it loads and display one image per frame. With 300,000 images, at the standard 60 frames per second, it will take almost one hour and half to finish the task. But at least, it gives a nice progress bar! :-) And that's still faster than doing the job by hand (and more reliable, too).

Last notice: with such large image, you might need to tweak the memory preferences of Processing.

ollena

Re: how to create a pattern image from multiple images

1 year ago

Thank you, phi.lho

You are right about the preferences. I had to change the settings.

I had problems with the pathname of my folder so I was able to use only amnon.owed's last code where the popup option is included.

But no when I have this codes (priceless codes) I will figure out how to work your first one as well to see how this one works.

Thanks a lot for all your help!

Top Reply