Adding a brightness slider in processing 3.5.4, that changes brightness of the image that user loads

Question

I was basically trying to use a slider that would change the brightness of any image that the user loads.

The code below at the moment has a slider and a button that loads the image. What I want is once the image has been loaded using the load button, if the user slides the slider up and down to change the brightness of the image.

There is another file connected to the current file, but I am not able to send that one as it is too big

Here is the link for the whole file https://github.com/Muhammad-786/Test2

PImage sourceImage;
PImage outputImage;

SimpleUI myUI;

void setup() {
  size(1000, 1000);
  myUI = new SimpleUI();
  
  Slider slider = myUI.addSlider("greys", 155, 885);
  slider.setSliderValue(0.5);
  myUI.addSimpleButton("Load file", 350,885);
}

void draw() {
  loadPixels();

  

  updatePixels();
  if( sourceImage != null ){
    
    image(sourceImage,100,50);
   
    
  }
  
  if(outputImage != null){
    
    image(outputImage, 100, 50);
  }
  myUI.update();
}
void handleUIEvent(UIEventData uied) {
  
  uied.print(2);
  
    if(uied.eventIsFromWidget("Load file")){
    myUI.openFileLoadDialog("Load an image");
    
  }
  
  
  if(uied.eventIsFromWidget("fileLoadDialog")){
    sourceImage = loadImage(uied.fileSelection);
    
  }

  
  if (uied.eventIsFromWidget("greys")) {
    outputImage = SLIDER(sourceImage);
  
  }
}
PImage SLIDER(PImage sliderw){
  PImage outputImage = createImage(sliderw.width,sliderw.height,RGB);
 outputImage.loadPixels(); 
  for (int x = 0; x < sliderw.width; x++ ) {
    for (int y = 0; y < sliderw.height; y++ ) {

      
      int loc = x + y*sliderw.width;

      
      float r = red  (sliderw.pixels[loc]);
      float g = green(sliderw.pixels[loc]);
      float b = blue (sliderw.pixels[loc]);

      
      float adjustBrightness = map(height, 0, width, 0, 8); 
      r *= adjustBrightness;
      g *= adjustBrightness;
      b *= adjustBrightness;

      
      r = constrain(r, 0, 255); 
      g = constrain(g, 0, 255);
      b = constrain(b, 0, 255);

      
      color c = color(r, g, b);
      pixels[loc] = c;
      
      outputImage.set(x,y, color(r,g, b));
    }
  }
   outputImage.loadPixels();
  
  return outputImage;
  }

Answer 1

You were setting the brightness wrong.

In your code, you use:

float adjustBrightness = map(height, 0, width, 0, 8); 

You are mapping height which is the height of the canvas size from 0~width to 0~8. Since the canvas size never changes, the value of adjustBrightness also never changes. That is why it suddenly becomes bright once in the beginning, then never change.

I've edited that part of the code to below (and other changes to make it work):

//declared globally
int sliderStartX = 155;

...

Slider slider = myUI.addSlider("greys", sliderStartX, 885);

...

float adjustBrightness = map(mouseX, sliderStartX, sliderStartX + 102, 0, 8);

I saved the x position of the left of slider in sliderStartX, and used that as the lower limit of the source range in map, and 102 is the width of the slider element that I found on SimpleUI.pde, hence sliderStartX + 102 is the upper limit of the source range.

So now, you are mapping mouseX from this range to your desired range.

However, this approach does not utilize the slider AT ALL. As you can see, we are only using slider's xpos and width. A more elegant approach would be to actually use the sliderValue inside the Slider instance, and map it from 0~1 (as sliderValue seems to be in that range, looking at the console) to your desired range 0~8. I'm not familiar at all with this SimpleUI library, so I couldn't really get the time to study it and make that part of it work.

Hope this helps you in writing the code you need!