# Adjusting pixel brightness value of an image

**URL:** <https://discourse.processing.org/t/adjusting-pixel-brightness-value-of-an-image/42343>\
**Category:** Coding Questions\
**Created:** [July 4, 2023, 11:52pm UTC](https://discourse.processing.org/t/adjusting-pixel-brightness-value-of-an-image/42343 "2023-07-04T23:52:52Z")\
**Posts on this page:** 1\
**Showing post:** 7

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 8, 2023, 10:06pm UTC](https://discourse.processing.org/t/adjusting-pixel-brightness-value-of-an-image/42343/7 "2023-07-08T22:06:28Z")

</div>

Hello @glosoli3 ,

See this topic:

> [@strokeWeight(1) draws 2 pixel width](https://discourse.processing.org/t/strokeweight-1-draws-2-pixel-width/23425):
>
> 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:

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/a/7a59e4ab19389d848b45da9070570d82b1143c88.jpeg)

After with _strokeWeight(1.2)_:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/b/3b9030f3f5cb0d71f690c7bb146c6745e52f6dda.jpeg)

Some modifications to your code:

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/9/a986291063540351cae49e1a174a2dfa31199293.png)

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

`:)`

---

_[View the full topic](https://discourse.processing.org/t/adjusting-pixel-brightness-value-of-an-image/42343)._