# Getting yellow color despite only entering one value on fill()

``````int x = 10;
int y = 10;
int spacingX = 10;
int spacingY = 10;
void setup() {
size(500, 500);

}
void draw () {
background(255);

for (int x = 0; x < width; x = x + spacingX) {
for (int y = 0; y < height; y = y + spacingY) {
fill(0);
rectMode(CENTER);
int colorNot = dist(mouseX, mouseY, x, y);
noStroke();
float colorFinal = map(colorNot, 0, width, 255, 0);
fill (colorFinal);
rect(x, y, 20, 20);

}
}
}
``````

On the parts far away I get yellow color?
This part float colorFinal = map(colorNot, 0, width, 255, 0); should be returning a value between 255 - 0 so it should be a white to black color. Can someone explain?

Nvm I solved it.
Code:

``````int x = 10;
int y = 10;
int spacingX = 10;
int spacingY = 10;
void setup() {
size(500, 500);

}
void draw () {
background(255);

for (int x = 0; x < width; x = x + spacingX) {
for (int y = 0; y < height; y = y + spacingY) {
fill(0);
rectMode(CENTER);
int colorNot = dist(mouseX, mouseY, x, y);
noStroke();
float colorFinal = map(colorNot, 0, width, 255, 0);

if (colorFinal < 0) { // makes it not go yellow.
colorFinal = 0;
}

fill (colorFinal);
rect(x, y, 20, 20);

}
}
}
``````

When the distance between the mouse and rect goes beyond “width” the value that gets returned is less than zero.

float colorFinal = map(colorNot, 0, width, 255, 0);

A value that is 0 returns 255, a value that is width returns 0 and a value higher returns something less.
And when you have fill on a color less than 0 you get a yellow color

1 Like

Hello,

Consider mapping to the diagonal length:

`int colorFinal = int(map(colorNot, 0, sqrt(width*width+height*height), 255, 0));`

`:)`

I was considering that! Thank you 