Increasing brightness of image

beginners
#1

Hello , i want to increase the brightness of my image without losing the bloom efffect, how can i achieve this ? So far if i increase my brightness i loose my overall transparency .Here is the code -

#include "testApp.h"
//--------------------------------------------------------------
void testApp::setup(){

ofBackground(100,100,255);
glow.loadImage("circle_gradient2.png");
glow.resize(400,400);
glow.setAnchorPoint(glow.getWidth()/2,glow.getHeight()/2);
}

//--------------------------------------------------------------
void testApp::setBrightness(int x){

unsigned char * pix = glow.getPixels();

for(int i = 0; i < glow.width * glow.height * 4; i++){
    if(pix[i] != 0){
        while(pix[i]<x){
            pix[i] += 1;
        }
    }
}
glow.update();
}

//--------------------------------------------------------------
void testApp::update(){
}
//-------------------------------------------------------------- 
void testApp::draw(){

testApp::setBrightness(200);
glow.draw(ofGetWidth()/2,ofGetHeight()/2);

}
The original image (loaded in app because its white and will not be visible on the forum page)-

with increased brightness to 200 -

Thanks !

#2 
void testApp::setBrightness(int x){
    
     unsigned char * pix = glow.getPixels();
     int numPix = glow.width * glow.height * 4;

     for(int i = 0; i <numPix;  i+=4){
         if(pix[i] != 0) pix[i] = x;
         if(pix[i+1] != 0) pix[i+1] = x;
         if(pix[i+2] != 0) pix[i+2] = x;
     }
     glow.update();
}

Notice that I made a few optimizations to your for loop: I’m counting the # of pixels in advance. I’m also stepping pixel by pixel (as opposed to R G B A R G B A) in an effort to ignore every fourth value. In your code, you’re using the while loop to jump to a known number. Why not just set the value to directly?

#3

Thanks a ton for the answer !. Ohh I did the while loop because I was planning to do some gradual mapping of x over something ,but that was only in my head at that time and I didn’t want to put it right then in the code .Direct assigning here is better as you said.
And yes ,I also wanted to see how the brightness was growing in the app ,so I used while loop.

Now on max brightness that is of 255 ,I get the original image and on brightness of 0 ,I get a black glow instead of white …

What can I do to make the image brighter than the original image like brightness growing in size.Is Image resizing according to ‘setBrightness(int x )’ the only option for this now?

Thanks!

#4

Oh, I see, in this case you’d want to do a test to say something like: if pixel[i] < x then let pixel[i]=x

That way, only the values that are less than x will increase to x

#5

Yes it’s somewhat working the way I wanted !.thanks !
But resizing a little bit also adding to the effect
Here is the image:
Top left brightness 255
Top right 20
Bottoom 150

:smile:

#6

Cool, you might also try multiplying the RGB values by a floating point number … that could take you closer to what you’re looking for.

#7

Hello @mantissa , seeing the fft example in the examplefolder , i tried to map one of the frequencie’s amplitude to the brightness of the image and its size by using ofmap(), the results turned out to be quite unexpected ! …the circle transformed into a rectangle,can you shed some light on this?
Here is the video:

circle_to_rect.zip (710.1 KB)

Should i start a new forum topic for this ?

Thanks !

#8

@manish you’re problem is that your setBrightness(...) function will cause you to lose information about your original image. Imagine calling setBrightness(255). The color channels on every pixel will be set to 255. If a color channel had an original value that was less than 255, it would pass your threshold test (i.e. if pix[i] < x) and would have its value changed to 255. Since this is being applied to every pixel in your image, and an image is a rectangular set of pixels, you end up with a rectangle. And if you now call setBrightness(..,) for any value, nothing about your image will change. All the color channels have already been maxed out, so your threshold test will fail and no pixel values will be updated.

You probably want a function that looks more like this:

ofImage testApp::setBrightness(ofImage originalImage, int minimumBrightness){

    // This creates a copy of your original image, so that your originalImage will never change
    ofImage modifiedImage = originalImage; 

    // Now you can do your image processing on modifiedImage

    return modifiedImage;
}

You might also want to try what @mantissa suggested: “try multiplying the RGB values by a floating point number” instead of applying a minimum cutoff value.

#9

Sorry for the late reply … i was doing a lot of testing lately .
@mikewesthad how much should I inrease i when i am going for a float value. "0.1","0.5" ? , if i am going for smaller values then it will definately effect performance of the machine when i am doing realtime mapping of pixel data to something else?
Sorry if i am not able to understand you , i think i have to go back to some colour theory lessons.
Between i found out that when i try to run the whole "pixel manupulation code inside the main draw function then the results are same ,but when i try to create a separate class for the image to glow and do stuff then the results come as expected !!. I dont know whats happening I am posting the 2 videos here ->

Result1: here i know it looks pretty but if you look carefully u will see squares forming inside the image result_1.zip (1.5 MB)
Result2: here the image reverts back to the original form without any hassle when the audio imput is closed.
result_2 2.zip (1.6 MB)

Thanks a ton for being patient and reading my big replies , i will be posting the code soon on git… If it still seems that my question is messy …please tell me .
:smiley:

#10

It’s actually not a color theory issue - it’s a logic issue. I’ll try and rephrase my last post. Image we have an image that is a single, dark gray pixel. Let’s say that it has RGB values of (50, 50, 50). Let’s use @mantissa’s setBrightness(...) function. If we call setBrightness(100), then our image becomes (100, 100, 100). Then, if we call setBrightness(200), then our image becomes (200, 200, 200). But now if we call setBrightness(100), nothing about our image changes. It stays at (200, 200, 200) because pix[i] < x is not true (i.e. 200 < 100 is false). We are editing the image directly, so we have lost the original image.

Now imagine applying this to an image that contains a circle gradient like your image. (I assume none of the pixels have a color of (0, 0, 0)). If you call setBrightness(255), all of the pixels in your original image are set to a color of (255, 255, 255). If you call setBrightness(100) now, none of the pixels will change. You’ve lost your original image, and it now looks like a rectangle.

My suggestion, which is sounds like you may have followed, was to always keep a copy of the original image - one that you won’t be modifying. That sounds like it is giving you the result you want in result_2.2.zip. Unfortunately, I cannot verify that since your video files are broken - they are just black.

If the problem with your code is still not making sense, I would encourage you to walk through the logic of your code using pencil and paper. Draw out a simple image (e.g. 4x4 pixels) on a piece of paper and walk through each line of logic yourself. That will help you form an expectation for what should happen. After you do that, you can come back to your code on you computer and re-evaluate your code: is it doing what you expected? If it is doing something unexpected, what is causing that behavior? Etc.

I’m not sure I understand your question. Values less than 1.0 (e.g. 0.1, 0.5, etc.) will decrease your brightness. To increase your brightness you want a value greater than 1.0 (e.g. 1.1, 1.5, etc.).

#11

OMG! It was soo easy !! I was just doing something else …you were right …i just read your post again and the problem was solved… just created a new object for the image and copying it in the draw function and done!
THANKS!

1 Like