# "Brightness pixels" example too small
**URL:** https://discourse.processing.org/t/brightness-pixels-example-too-small/46438
**Category:** Coding Questions
**Created:** [May 24, 2025, 6:11am UTC](https://discourse.processing.org/t/brightness-pixels-example-too-small/46438 "2025-05-24T06:11:29Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@nikapm](https://discourse.processing.org/u/nikapm)
#### Post date: [May 24, 2025, 6:11am UTC](https://discourse.processing.org/t/brightness-pixels-example-too-small/46438/1 "2025-05-24T06:11:29Z")
I am new to processing and I am testing a code from the processing examples about brightness pixels. It works, but the image is much smaller than the window and I don’t know how to fix it. It cover the whole width with two identical imagens in a little strip on the top od the window and the rest is gray. Can anyone help me? here’s the code:
```Processing
/**
* Brightness Pixels
* by Daniel Shiffman.
*
* This program adjusts the brightness of a part of the image by
* calculating the distance of each pixel to the mouse.
*/
PImage img;
void setup() {
size(640, 360);
frameRate(30);
img = loadImage("moon-wide.jpg");
img.loadPixels();
// Only need to load the pixels[] array once, because we're only
// manipulating pixels[] inside draw(), not drawing shapes.
loadPixels();
}
void draw() {
for (int x = 0; x < img.width; x++) {
for (int y = 0; y < img.height; y++ ) {
// Calculate the 1D location from a 2D grid
int loc = x + y*img.width;
// Get the R,G,B values from image
float r,g,b;
r = red (img.pixels[loc]);
//g = green (img.pixels[loc]);
//b = blue (img.pixels[loc]);
// Calculate an amount to change brightness based on proximity to the mouse
float maxdist = 50;//dist(0,0,width,height);
float d = dist(x, y, mouseX, mouseY);
float adjustbrightness = 255*(maxdist-d)/maxdist;
r += adjustbrightness;
//g += adjustbrightness;
//b += adjustbrightness;
// Constrain RGB to make sure they are within 0-255 color range
r = constrain(r, 0, 255);
//g = constrain(g, 0, 255);
//b = constrain(b, 0, 255);
// Make a new color and set pixel in the window
//color c = color(r, g, b);
color c = color(r);
pixels[y*width + x] = c;
}
}
updatePixels();
}
```
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [May 24, 2025, 1:39pm UTC](https://discourse.processing.org/t/brightness-pixels-example-too-small/46438/2 "2025-05-24T13:39:21Z")
Hello nikapm,
welcome to the forum, great to have you here.
I just looked up the example and here it runs smoothly and the image has the same size as the window.
I use version 4.3.4.
**An idea** : The Sketch relies on the fact that the window and the image you load have the _same size_ 640, 360.
When you use _another_ image, then the size might be different.
You could then adjust this line: ` size(640, 360);` to match the size of the image.
Warm regards,
Chrisir
```Processing
/**
* Brightness Pixels
* by Daniel Shiffman.
*
* This program adjusts the brightness of a part of the image by
* calculating the distance of each pixel to the mouse.
*/
PImage img;
void setup() {
size(640, 360);
frameRate(30);
img = loadImage("moon-wide.jpg");
// Show the size of the image
println("img w "+ img.width);
println("img h "+img.height);
img.loadPixels();
// Only need to load the pixels[] array once, because we're only
// manipulating pixels[] inside draw(), not drawing shapes.
loadPixels();
}
void draw() {
for (int x = 0; x < img.width; x++) {
for (int y = 0; y < img.height; y++ ) {
// Calculate the 1D location from a 2D grid
int loc = x + y*img.width;
// Get the R,G,B values from image
float r, g, b;
r = red (img.pixels[loc]);
//g = green (img.pixels[loc]);
//b = blue (img.pixels[loc]);
// Calculate an amount to change brightness based on proximity to the mouse
float maxdist = 50;//dist(0,0,width,height);
float d = dist(x, y, mouseX, mouseY);
float adjustbrightness = 255*(maxdist-d)/maxdist;
r += adjustbrightness;
//g += adjustbrightness;
//b += adjustbrightness;
// Constrain RGB to make sure they are within 0-255 color range
r = constrain(r, 0, 255);
//g = constrain(g, 0, 255);
//b = constrain(b, 0, 255);
// Make a new color and set pixel in the window
//color c = color(r, g, b);
color c = color(r);
pixels[y*width + x] = c;
}
}
updatePixels();
}
```
---
### Author:  [@quark](https://discourse.processing.org/u/quark)
#### Post date: [May 24, 2025, 1:50pm UTC](https://discourse.processing.org/t/brightness-pixels-example-too-small/46438/3 "2025-05-24T13:50:53Z")
This example works fine in version 4.4.1 but not in the latest version 4.4.4
In 4.4.4 it behaves as described by OP so this is a bug in Processing
---
### Author:  [@sableraph](https://discourse.processing.org/u/sableraph)
#### Post date: [May 24, 2025, 2:44pm UTC](https://discourse.processing.org/t/brightness-pixels-example-too-small/46438/5 "2025-05-24T14:44:03Z")
Thanks for sharing the issue. This is related to a recent change in Processing 4.4.3. We updated the default `pixelDensity()` setting to match your display’s density, which makes sketches look sharper on high-DPI screens, but it can also affect how images are drawn.
To fix the issue in this example, try adding `pixelDensity(1);` inside the `setup()` function. That should make the image fill the window as expected.
Let us know if that works!
See also:
> [@SVG Export Issue transform="scale(2,2)"](https://discourse.processing.org/t/svg-export-issue-transform-scale-2-2/46350/4):
>
> Here is the issue labelling why that this is broken [pixelDensity(2) with SVG creates incorrect viewport in the file · Issue #693 · processing/processing4 · GitHub](https://github.com/processing/processing4/issues/693) I’ve added some more labels to hopefully move this forward. Current workaround pixelDensity(1) in the setup() function to force Processing to render at low-dpi scaling.
---
### Author:  [@nikapm](https://discourse.processing.org/u/nikapm)
#### Post date: [May 25, 2025, 2:51am UTC](https://discourse.processing.org/t/brightness-pixels-example-too-small/46438/6 "2025-05-25T02:51:26Z")
you are right, I downgraded my processing for a previous verson and it woks fine. But thatnks a lot!