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

Processing Coding Questions
1 
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?

2

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
3

Hello,

Consider mapping to the diagonal length:

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

:)

4

I was considering that! Thank you :slight_smile: