Adjusting pixel brightness value of an image

[glv]

Hello @glosoli3 ,

See this topic:

strokeWeight(1) draws 2 pixel width

While playing with some basic stuff, I found that some of my drawings seemd to be off. After some fiddling, I found that if I use strokeWeight(1), the line or rect has in fact a width of 2 pixels. I tried Firefox and Chrome and I used 2 different computer (Win10 home, Win10 Pro) and it was always the same. Even when using the examples from the reference page showed the same behaviour. strokeWeight(1); stroke(255,0,0); rect(20, 20, 60, 60);

I adjusted the strokeWeight in your code to 1.2 (gradually increased from 1.0) which seemed to remove the washed out look.

Before with strokeWeight(1) and background bleeding through:

After with strokeWeight(1.2):

Some modifications to your code:

let img;

function preload()
  {
  img = loadImage('http://learningprocessing.com/code/assets/sunflower.jpg');
  }

function setup()
  {
  createCanvas(400, 300);
  strokeWeight(1.2); // This got rid of washed out look!
  //noSmooth();
  }

function draw() {
  colorMode(RGB, 255, 255, 255);
  background(255, 0, 0, 255)
  // display original image
  image(img, 0, 0)

  // adjust brightness based on mouseX position
  let brightnessAdj = map(mouseX, 0, width, -10, 10);
  brightnessAdj = 0;

  // loop through each pixel in image and adjust brightness
  for (let y = 0; y < img.height; y++) {
    for (let x = 0; x < img.width; x++) {
      // get color values using get()
      colorMode(RGB, 255, 255, 255)
      let originalColor = color(img.get(x, y));
      let hueValue = hue(originalColor);
      let satValue = saturation(originalColor);
      let briValue = constrain(brightness(originalColor) + brightnessAdj, 0, 100);

      // display new image using points
      colorMode(HSB, 360, 100, 100);
      let col = color(hueValue, satValue, briValue);
      stroke(col);
      point(x + img.width, y);
    }
  }
}

I used latest p5.js Mode1.6 with the Processing 4.2 IDE on W10 with Google Chrome.

I also have scaling on my display:

Just a quick exploration of this… I am sure there is more to this than meets the eye.

:)