Is it possible to fill pixel information with an array of images?

Processing Coding Questions
1

Hi all,

I’m working on a uni project and wondered whether Processing could help. I’m looking to fill the pixels of an image with an array of photographs. I have come across this tutorial but not sure how to substitute text for an array of images.

It is possible? This is the code used in the tutorial:

import processing.pdf.*;
import java.util.Calendar;

PFont font;
PImage img;

String text = “Ground Control to Major Tom. Ground Control to Major Tom. Take your protein
pills and put your helmet on. Ground Control to Major Tom. Commencing countdown, engines on.
Check ignition and may God’s love be with you. Ten, Nine, Eight, Seven, Six, Five, Four,
Three, Two, One, Lift off. This is Ground Control to Major Tom. You’ve really made the grade.
And the papers want to know whose shirts you wear. Now it’s time to leave the capsule if you
dare. This is Major Tom to Ground Control. I’m stepping through the door. And I’m floating in
a most peculiar way. And the stars look very different today. For here. Am I sitting in a
tin can. Far above the world. Planet Earth is blue. And there’s nothing I can do. Though I’m
past one hundred thousand miles. I’m feeling very still. And I think my spaceship knows which
way to go. Tell my wife I love her very much she knows. Ground Control to Major Tom. Your
circuit’s dead, there’s something wrong. Can you hear me, Major Tom? Can you hear me, Major
Tom? Can you hear me, Major Tom? Can you... Here am I floating round my tin can. Far above the
Moon. Planet Earth is blue. And there’s nothing I can do”;

float fontSizeMax = 14; // max. font size
float fontSizeMin = 8; // min. font size
float spacing = 8; // text line height (x grid)
float kerning = 5; // space between letters (y grid)

int border = 10; // picture frame
int counter = 0; // count text length

void setup() {
size(1000, 1000);
//beginRecord(PDF, timestamp()+”.pdf”); // remove comments to enable

background(255);
font = createFont(“Times”, 10);
img = loadImage(“bowie.jpg”);
img.resize(width, height);
noLoop();
}

void draw() {
for (int y = border+5; y < height-border+5; y+=spacing) {
for (int x = border; x < width-border; x+=kerning) {
color c = img.get(x, y);
float b = brightness(c);
b = map(b, 0, 255, fontSizeMax, fontSizeMin);
float fontSize = b;
textFont(font, fontSize);
fill(c);
char letter = text.charAt(counter);
text(letter, x, y);
counter++;
if (counter == text.length()) {
counter = 0;
}
}
}
endRecord();
}
void keyReleased() {
if (key == ‘s’ || key == ‘S’) saveFrame(timestamp()+”_##.png”);
}
String timestamp() {
Calendar now = Calendar.getInstance();
return String.format(“%1$ty%1$tm%1$td_%1$tH%1$tM%1$tS”, now);
}

tutorial-05_processing-imagemapping2_pdf
tutorial-05_processing-imagemapping2_pdf606×595 92.5 KB

1 Like
2

Yes - I guess there’s a question of what you are exactly looking to achieve. As per the above, you already have a way to obtain a pixel colour/hue etc from your base image. A simple approach might be to load images into an array, and then tint images to suit.

From a quick look, there are various examples around of how to load images into an array…something like this post should get you going…https://forum.processing.org/two/discussion/17748/creating-an-array-of-images

The basic selection of an image from the array would be similar to your existing code. Something roughly like

color c = img.get(x, y);
float b = brightness(c);
int index = (int)map(b, 0, 255, 0, imageArray.size());
PImage img = imageArray[index];

Once you’ve got your image from the array, you could then tint it…see https://processing.org/reference/tint_.html

Otherwise you’re probably looking at a much more complex task (having to build a sufficiently large library of source images that are somehow categorised by colour/hue). That’s not entirely impossible either, but would be a lot more work.

1 Like
3

thank you so much for your response. I’ll take a look at the post and have a play with the code as you have recommended!