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);
}
}
}