Access image pixels

Programming Questions

charliebr

in Programming Questions • 1 year ago

Hello i'm new to processing and i've no programming background.

I'm using processing to make things related to design.

So here is my question:

1. I want to analyse images accessing each pixel;

2. Store de RBG value of each pixel;

3. Calculate the average of each color value;

4. Fill the screen with the average color;

5. In the future i want the 2nd and 3rd most used colors too, but now i'm happy with one color;

I'm very basic with this language.

I've started with the code above and i want to develop it gradually if anyone can help.

Thanks

-----------------------

PImage img;

color [] imageColors;

void setup() {

size(533, 750);

background(0);

smooth();

img = loadImage( "almanaque.jpg");

}

void draw() {

loadPixels ();

img.loadPixels ();

// search each line and row of the image

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

for (int y=0; y < img.height; y++) {

int loc = x + y*img.width;

float r = red (img.pixels [loc]);

float g = green (img.pixels [loc]);

float b = blue (img.pixels [loc]);

}

Replies(10)

calsign

Problem / Notes:

I'm not sure what exactly you're having trouble with, so I'll go down the list and comment on better ways to do this...

You shouldn't put the code that you have in draw() in draw(); you only need to do that once (put it in setup()).
You should close the img.loadPixels() call with the opposite, img.updatePixels().
Then, you should add the color to your list of colors...
Prior to doing this, however, you must initialize that array...

Let's get started with this:

Final Code:

Copy code

PImage img;
color [] imageColors;
void setup() {
size(533, 750);
background(0);
smooth();
img = loadImage( "almanaque.jpg");
img.loadPixels();
imageColors = new color[image.pixels.length];
// search each line and row of the image
for (int x=0; x < img.width; x++) {
for (int y=0; y < img.height; y++) {
int loc = x + y*img.width;
float r = red (img.pixels [loc]);
float g = green (img.pixels [loc]);
float b = blue (img.pixels [loc]);
imageColors[loc] = color(r, g, b);
}
}
img.updatePixels();
}
void draw() {
}

Look at that for now and get started on averaging the colors...

charliebr

Re: Access image pixels

1 year ago

Ok. Thanks a lot for your help.

To start, i need to average every "R" values, adding all R values of the pixels of the image?

Storing that values in a global variable and then dividing it by the array length?

Where i do that? Inside de for loop who search every row and collum of the image?

I'm sorry for my level of skill, but i want to learn and understand every step of the code.

Probably i'm trying to make a big thing with little knowledge.

Thanks again.

calsign

Re: Access image pixels

1 year ago

Well...
Now that you have an array of colors, you can cycle through it...
Like this:

Copy code

for(int i = 0; i < imageColors.length; i ++) {
//Do stuff
}

In this case, you're going to want to find the sum of each of the colors...
So, create three integers outside of the for loop: an r, g, and b.
Then, in each stage of the for loop, add the current rgb values to the respective variables.
After that, divide them... and you have your averaged color.

charliebr

Re: Access image pixels

1 year ago

It´s something like this?

I've created the global int r, g, b.

// search each line and row of the image

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

for (int y=0; y < img.height; y++) {

int loc = x + y*img.width;

for (int i=0; i < imageColors.length; i++) {

r = red (img.pixels [loc]);

}

float g = green (img.pixels [loc]);

float b = blue (img.pixels [loc]);

imageColors[loc] = color (r, g, b);

}

calsign

Re: Access image pixels

1 year ago

Argh! My computer crashed and thus I lost my message...
Anyway, to sum it up:

Put that for loop after last set brace of the two nested for loops...
And you don't need to store the three variables globally.

I'm currently writing an example for averaging...

calsign

Re: Access image pixels

1 year ago

Here's the example:
You should be able to adapt it to work with three numbers instead of just one...

Copy code

//List of numbers
int[] numbers = {54, 13, -76, 122, 66, 59};
//Setup
void setup() {
size(200, 200);
//Find the average of the numbers
int average = averageNumbers(numbers);
//Print it to the console
println(average);
}
//Function to find average numbers
int averageNumbers(int[] nums) {
//The total
int total = 0;
//Cycle through the provided numbers
for(int i = 0; i < nums.length; i ++) {
//Add the current number to the total
total += nums[i];
}
//Return the total divided by the number of items (the average)
return total / nums.length;
}

charliebr

Re: Access image pixels

1 year ago

Ok, thanks for your example. I understand it.

I created a function to calculate the average of R color and total.

But the printl give a value of 556. The value should be between 0-255, right?

Why it give this value?

PImage img;

color [] imageColors;

void setup() {

size(533, 750);

background(0);

smooth();

img = loadImage( "almanaque.jpg");

img.loadPixels ();

imageColors = new color [img.pixels.length];

// search each line and row of the image

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

for (int y=0; y < img.height; y++) {

int loc = x + y*img.width;

float r = red (img.pixels [loc]);

float g = green (img.pixels [loc]);

float b = blue (img.pixels [loc]);

imageColors[loc] = color (r, g, b);

}

// find average of R

int averageR = averageRcolor(imageColors);

println (averageR);

img.updatePixels ();

}

// function to find average of R color

int averageRcolor (int[] rvalues) {

//total

int totalR = 0;

//cicle through R values

for (int i=0; i < rvalues.length; i++) {

totalR += rvalues[i];

}

return totalR/rvalues.length;

}

void draw() {

}

charliebr

Re: Access image pixels

1 year ago

Oh i forget to specify what color he calculates the average...

That's here i put that? How? (I call the array imageColors and i must tell to the program, what color???)

int averageR = averageRcolor(imageColors);

calsign

Re: Access image pixels

1 year ago

When dealing with colors, you should add the read, green, and blue values separately.
That means three variables... three divisions... etc.

charliebr

Re: Access image pixels

1 year ago

Hi.

At this point i've calculated one color value.

Can i calculate the other values in the same function, "medR_"? Or i've to create 3 different functions?

If i put the return values in a global variable, i can use them to fill forms, right?

---

PImage img;

color [] imageColors;

int medR = 0;

void setup() {

size(533, 750);

background(0);

smooth();

img = loadImage( "almanaque.jpg");

img.loadPixels ();

//New list with colors?

imageColors = new color [img.pixels.length];

// search each line and row of the image

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

for (int y=0; y < img.height; y++) {

int loc = x + y*img.width;

float r = red (img.pixels [loc]);

float g = green (img.pixels [loc]);

float b = blue (img.pixels [loc]);

imageColors[loc] = color (r, g, b);

}

// find average of RGB

medR = medR_(imageColors);

println (medR);

img.updatePixels ();

}

// function to find average of R color

int medR_ (int[] rvalues) {

//total

int totalR = 0;

//cicle through R values

for (int i=0; i < rvalues.length; i++) {

totalR += blue (rvalues[i]);

}

return totalR/rvalues.length;

}

void draw() {

fill (204, 126, 124);

rect (0, 0, width, height);

}

Top Reply