Processing - Java Swing I need help making circles go from black at the top, gra

Question

Processing - Java Swing

I need help making circles go from black at the top, gradually turning white to the bottom, following the y coordinate of your cursor (mouseY). It also needs to work with any size window, which is the problem.

Here is my code:

// declaring global variables
int diameter;

// max size of circles
final int MAX_SIZE = 100;

// setup block
void setup() {
size(500, 500);
background(0);
}

// draw block
void draw() {
diameter = (MAX_SIZE * mouseX) / width;
fill(mouseY % 255);
ellipse(mouseX, mouseY, diameter, diameter);
}

The problem is this:

On a 500x500 canvas, the fill will reach 255 (White) in the middle, and then reset going from 0 (Black) to 255 (White) again.

I need to be able to find a way to allow the whole height of the canvas be compatible with the range of 0 --> 255, so the gradual change from black to white spans the entire window, instead of stopping halfway through (because of the 500x500 height, 255 * 0 = 0 (black)).

Thank you so much to anyone who can be able to help!

Explanation / Answer

The fill will reach 255 (White) in the middle, and then reset going from 0 to 255 again, the reason is the canvas dimension is 500x500 and the gray scale is 0-255, which is half of the canvas. So the gray scale should be double in length which can be does by converting it into fraction. 0, 0.5,.....254.5, 255.

The implementation is there in the for loop below:

// declaring global variables
int diameter;

// max size of circles
final int MAX_SIZE = 100;

// setup block
void setup() {
size(500, 500);
background(0);
}

// draw block
void draw() {
diameter = (MAX_SIZE * mouseX) / width;

for (var i = 0; i < 500; i+=0.5) {

    fill(i);
ellipse(mouseX, mouseY, diameter, diameter);

}
}

Related Questions

Navigate

• Browse (All)
• Browse P
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.