# Brightness Range
**URL:** https://discourse.processing.org/t/brightness-range/41483
**Category:** Coding Questions
**Created:** [March 27, 2023, 11:18pm UTC](https://discourse.processing.org/t/brightness-range/41483 "2023-03-27T23:18:24Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@linz](https://discourse.processing.org/u/linz)
#### Post date: [March 27, 2023, 11:18pm UTC](https://discourse.processing.org/t/brightness-range/41483/1 "2023-03-27T23:18:24Z")
Hi, I’m doing a homework on recreating an artwork using p5.js. For some reason, the brightness is going from 0-100 instead of 0-255, not sure why.
let fontArray = ;
let Obama;
function preload() {
fontArray[0] = loadFont(“Quatro-ExtraLight.ttf”);
fontArray[1] = loadFont(“Quatro-Light.ttf”);
fontArray[2] = loadFont(“Quatro-Book.ttf”);
fontArray[3] = loadFont(“Quatro-Regular.ttf”);
fontArray[4] = loadFont(“Quatro-Medium.ttf”);
fontArray[5] = loadFont(“Quatro-SemiBold.ttf”);
fontArray[6] = loadFont(“Quatro-Bold.ttf”);
fontArray[7] = loadFont(“Quatro-Black.ttf”);
fontArray[8] = loadFont(“Quatro-UltraBlack.ttf”);
Obama = loadImage(‘Barack-Obama.jpg’);
}
function setup() {
createCanvas(421, 579);
background(0);
//image(Obama, 0, 0);
filter(GRAY);
textSize(10.7);
fill(255);
noLoop();
for (let i = 0; i \< Obama.width; i += 10) {
for (let j = 0; j \< Obama.height; j += 10) {
let c = Obama.get(i, j);
let bri = brightness(c);
let index = floor(map(bri, 0, 100, 0, fontArray.length));
index = constrain(index, 0, fontArray.length);
textFont(fontArray[index]);
text(“B”, i, j);
}
}
}
---
### Author:  [@esc746](https://discourse.processing.org/u/esc746)
#### Post date: [March 28, 2023, 7:00pm UTC](https://discourse.processing.org/t/brightness-range/41483/2 "2023-03-28T19:00:42Z")
Why do you have the number 100 in your map()?
Have a look at what values brightness() returns.
---
### Author:  [@mnse](https://discourse.processing.org/u/mnse)
#### Post date: [March 28, 2023, 7:25pm UTC](https://discourse.processing.org/t/brightness-range/41483/3 "2023-03-28T19:25:47Z")
Hi @linz,
The default hsb setting is:
`colorMode(HSB, 360, 100, 100, 1)`;
That’s why max brightness is 100.
> **[reference | p5.js](https://p5js.org/reference/#/p5/colorMode)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.
Cheers
— mnse