Colouring rectangles with distance function

Processing Coding Questions
1

Hi all¡

I am trying to add colours to 4 rectangles on the screen. To dod that I am learning how to create my own functions so i will use the distance from some of this rectangle to the mouseX and mouseY coordinates to add variable colour for them…i cant understand why it only appears color in one rectangle…someone can help me please? I put here the code

void setup() {
size(640, 320);
}

void draw() {
background(0);

//TOP LEFT SQUARE
fill(distance(0, 0, mouseX, mouseY));
rect(0, 0, width/2-1, height/2-1);

//TOP RIGHT SQUARE
fill(distance(width, 0, mouseX, mouseY));
rect(width/2, 0, width/2-1, height/2-1);

//BOTTOM LEFT SQUARE
fill(distance(0, height, mouseX, mouseY));
rect(0, height/2, width/2-1, height/2-1);

//BOTTOM RIGHT SQUARE
fill(distance(width, height, mouseX, mouseY));
rect(width/2, height/2, width/2-1, height/2-1);

}

float distance(float x1, float x2, float y1, float y2) {
float dx=x1-x2;
float dy=y1-y2;
float d=sqrt(dxdx+dydy);
return d;
}

THANKS
JAVIER

2

Your distance function’s arguments are in the wrong order.

It’s defined them as (x1,x2,y1,y2).

But you’re using it like they are (x1,y1,x2,y2).

You might consider using the built-in dist() function instead.

1 Like
3

Hi,

I think that you need to map your distance between 0 and 255 to feed your fill function.

Imagine that your mouse is at (0, 0) and you try to calculate the distance to the lower left corner.
Then your distance function give you sqrt(640² + 320²) = 715,5
So you ask fill(715,5) and I’m not sure this will work.

4

Thanks a lot for your answer. It has solved the problem¡ It was pretty easy but i couldn´t find the solution.

Thanks @TfGuy44

5

Thanks for the answer @jb4x, I have tried it before but the problem was the order of the points¡

Thanks