Adjusting pixel brightness value of an image

p5.js Coding Questions
7

Hello @glosoli3 ,

See this topic:

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:

image

After with strokeWeight(1.2):

image
image627×501 78.6 KB

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:
image

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

:)