No idea what happened, getting a weird effect

Processing Coding Questions
1 
int x = 10;
int y = 10;
int spacingX = 10;
int spacingY = 10;
int scalingNot = 255;
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);
			int scalingNot = dist (mouseX, mouseY, width/2, height/2);
			int scaling = map (scalingNot, 300, 0, 0, 300); //set to width and height to make it not change color
			noStroke();
			
			if (scaling < 0) { // makes scaling not go under 0 - meaning the background wont become white
			scaling = 0;	
			}
			float colorFinal = map(colorNot, 0, scaling, 255, 0); 
			
			//int colorFinal = int(map(colorNot, 0, sqrt(width*width+height*height), 255, 0));
		
		
			//if (colorFinal < 0) { // makes it not go yellow. 
			//colorFinal = 0;	
		//	}
			
			//	if (colorFinal > 100 && colorFinal < 110) { //makes a certain area become yellow
		//	colorFinal = -50;	
		//	}

			
			
			fill (colorFinal);
			rect(x, y, 20, 20); 
			x++;// Taking this off gets you a totally different effect
			//y++;// weird effect
		}
}
				//print(scalingNot);

}

Getting a really weird effect which I don’t know how I did