# Colouring rectangles with distance function

**URL:** <https://discourse.processing.org/t/colouring-rectangles-with-distance-function/1897>\
**Category:** Coding Questions\
**Created:** [July 19, 2018, 10:53am UTC](https://discourse.processing.org/t/colouring-rectangles-with-distance-function/1897 "2018-07-19T10:53:22Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Javier](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javier/32/817_2.png) [@Javier](https://discourse.processing.org/u/Javier)\
**Post date:** [July 19, 2018, 10:53am UTC](https://discourse.processing.org/t/colouring-rectangles-with-distance-function/1897/1 "2018-07-19T10:53:22Z")

</div>

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(dx_dx+dy_dy);  
return d;  
}

THANKS  
JAVIER

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [July 19, 2018, 12:28pm UTC](https://discourse.processing.org/t/colouring-rectangles-with-distance-function/1897/2 "2018-07-19T12:28:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [July 19, 2018, 12:30pm UTC](https://discourse.processing.org/t/colouring-rectangles-with-distance-function/1897/3 "2018-07-19T12:30:42Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Javier](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javier/32/817_2.png) [@Javier](https://discourse.processing.org/u/Javier)\
**Post date:** [July 19, 2018, 12:56pm UTC](https://discourse.processing.org/t/colouring-rectangles-with-distance-function/1897/4 "2018-07-19T12:56:42Z")

</div>

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

Thanks @TfGuy44

---

<div class="post-metadata">

**Author:** ![Javier](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javier/32/817_2.png) [@Javier](https://discourse.processing.org/u/Javier)\
**Post date:** [July 19, 2018, 12:57pm UTC](https://discourse.processing.org/t/colouring-rectangles-with-distance-function/1897/5 "2018-07-19T12:57:27Z")

</div>

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

Thanks