# How to make my rects bigger based on proximity (bigger the closer to my mouse) pjs

**URL:** <https://discourse.processing.org/t/how-to-make-my-rects-bigger-based-on-proximity-bigger-the-closer-to-my-mouse-pjs/31637>\
**Category:** Coding Questions\
**Created:** [August 9, 2021, 6:20am UTC](https://discourse.processing.org/t/how-to-make-my-rects-bigger-based-on-proximity-bigger-the-closer-to-my-mouse-pjs/31637 "2021-08-09T06:20:22Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kenga123456](https://avatars.discourse-cdn.com/v4/letter/k/f08c70/32.png) [@Kenga123456](https://discourse.processing.org/u/Kenga123456)\
**Post date:** [August 9, 2021, 6:20am UTC](https://discourse.processing.org/t/how-to-make-my-rects-bigger-based-on-proximity-bigger-the-closer-to-my-mouse-pjs/31637/1 "2021-08-09T06:20:22Z")

</div>

```auto
void setup() {
    frameRate(60);
    size(1020, 510);
	
}

void draw() {
    background(0);
	
	int spacing_x = 45;
	int spacing_y = 45;
	 for (int x = 0; x < width + spacing_x; x = x + spacing_x) {
	for (int y = 0; y < height + spacing_y; y = y + spacing_y) {
		int distance_mouse_ellipse = dist(x, y, mouseX, mouseY);
int r = dist(0, y, x, y) /4;
	int g = dist (x, 0, x, y) /2;
		int b = r+b/3; 
            fill(r, g, b);
		rectMode(CENTER);
		noStroke();
            rect(x, y, distance_mouse_ellipse / 25, distance_mouse_ellipse / 25);
		          
	}
 }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [August 9, 2021, 7:08am UTC](https://discourse.processing.org/t/how-to-make-my-rects-bigger-based-on-proximity-bigger-the-closer-to-my-mouse-pjs/31637/2 "2021-08-09T07:08:48Z")

</div>

> [@Kenga123456](#):
>
> ```auto
> rect(x, y, distance_mouse_ellipse / 25, distance_mouse_ellipse / 25);
> 	
> 
> ```

use

map(distance\_mouse\_ellipse, 0, width,  
50,0) for the size of the rect

---

<div class="post-metadata">

**Author:** ![Kenga123456](https://avatars.discourse-cdn.com/v4/letter/k/f08c70/32.png) [@Kenga123456](https://discourse.processing.org/u/Kenga123456)\
**Post date:** [August 9, 2021, 7:19am UTC](https://discourse.processing.org/t/how-to-make-my-rects-bigger-based-on-proximity-bigger-the-closer-to-my-mouse-pjs/31637/3 "2021-08-09T07:19:15Z")

</div>

I tried but it doesn’t work?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [August 9, 2021, 8:10am UTC](https://discourse.processing.org/t/how-to-make-my-rects-bigger-based-on-proximity-bigger-the-closer-to-my-mouse-pjs/31637/4 "2021-08-09T08:10:30Z")

</div>

Show me your code

You can play with the values a bit

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [August 9, 2021, 8:26am UTC](https://discourse.processing.org/t/how-to-make-my-rects-bigger-based-on-proximity-bigger-the-closer-to-my-mouse-pjs/31637/5 "2021-08-09T08:26:22Z")

</div>

> [@Kenga123456](#):
>
> `int distance_mouse_ellipse`

use float instead of int

---

<div class="post-metadata">

**Author:** ![Kenga123456](https://avatars.discourse-cdn.com/v4/letter/k/f08c70/32.png) [@Kenga123456](https://discourse.processing.org/u/Kenga123456)\
**Post date:** [August 9, 2021, 8:56am UTC](https://discourse.processing.org/t/how-to-make-my-rects-bigger-based-on-proximity-bigger-the-closer-to-my-mouse-pjs/31637/6 "2021-08-09T08:56:02Z")

</div>

```auto
boolean backgroundd = true;

void setup() {
    frameRate(60);
    size(1020, 510);
}

void draw() {
	 background(0);
	
	float size = map(distance_mouse_ellipse, 0, width,50,0);
	int spacing_x = 45;
	int spacing_y = 45;
	 for (int x = 0; x < width + spacing_x; x = x + spacing_x) {
	for (int y = 0; y < height + spacing_y; y = y + spacing_y) {
		int distance_mouse_ellipse = dist(x, y, mouseX, mouseY);
int r = dist(0, y, x, y) /4;
	int g = dist (x, 0, x, y) /2;
		int b = r+b/3; 
            fill(r, g, b);
		rectMode(CENTER);
		noStroke();
  rect(x, y, size, size);

	   
		          
	}
 }
}

```

I also tried directly inserting it on the rect’s height and width value but it didn’t work.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [August 9, 2021, 9:11am UTC](https://discourse.processing.org/t/how-to-make-my-rects-bigger-based-on-proximity-bigger-the-closer-to-my-mouse-pjs/31637/7 "2021-08-09T09:11:56Z")

</div>

> [@Kenga123456](#):
>
> ```auto
> float size = map(distance_mouse_ellipse, 0, width,50,0);
> 	
> 
> ```

This line must be directly before rect ()  
NOT before the for loop

---

<div class="post-metadata">

**Author:** ![Kenga123456](https://avatars.discourse-cdn.com/v4/letter/k/f08c70/32.png) [@Kenga123456](https://discourse.processing.org/u/Kenga123456)\
**Post date:** [August 9, 2021, 9:14am UTC](https://discourse.processing.org/t/how-to-make-my-rects-bigger-based-on-proximity-bigger-the-closer-to-my-mouse-pjs/31637/8 "2021-08-09T09:14:38Z")

</div>

ohhh now it works thank you so much. But can you explain what the map function does? I searched or it but didn’t completely understand.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [August 9, 2021, 9:26am UTC](https://discourse.processing.org/t/how-to-make-my-rects-bigger-based-on-proximity-bigger-the-closer-to-my-mouse-pjs/31637/9 "2021-08-09T09:26:28Z")

</div>

Sure.

It maps (translates) a value (your distance)  
from one scale to the next scale.

For example when it’s 40% on the first scale it will be 40% on the other too, but calculating  
the value on the scale.

In your case, 50 to 0 is the new range which means its  
getting bigger when nearer

---

<div class="post-metadata">

**Author:** ![Kenga123456](https://avatars.discourse-cdn.com/v4/letter/k/f08c70/32.png) [@Kenga123456](https://discourse.processing.org/u/Kenga123456)\
**Post date:** [August 9, 2021, 9:33am UTC](https://discourse.processing.org/t/how-to-make-my-rects-bigger-based-on-proximity-bigger-the-closer-to-my-mouse-pjs/31637/10 "2021-08-09T09:33:34Z")

</div>

I kind of understand the last 2 values but I don’t understand the first 3 values in the map function

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 9, 2021, 9:43am UTC](https://discourse.processing.org/t/how-to-make-my-rects-bigger-based-on-proximity-bigger-the-closer-to-my-mouse-pjs/31637/11 "2021-08-09T09:43:46Z")

</div>

Hello,

Some references:

- [https://processing.org/reference/map\_.html](https://processing.org/reference/map_.html)
- [https://processing.org/examples/map.html](https://processing.org/examples/map.html)

Source code:  
[https://github.com/processing/processing/blob/master/core/src/processing/core/PApplet.java#L5047](https://github.com/processing/processing/blob/master/core/src/processing/core/PApplet.java#L5047) Make take the browser a moment to get to the line!

From source:

```auto
static public final float map(float value,
                                float start1, float stop1,
                                float start2, float stop2) {
    float outgoing =
      start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
...

```

This resembles one of these:

> **[Linear equation](https://en.wikipedia.org/wiki/Linear_equation)**
>
> In mathematics, a linear equation is an equation that may be put in the form
> where 
>   
>     
>       
>         
> x
>           
> 1
>           
>         
> ,
> …
> ,
>         
> x
>           
> n
>           
>         
>       
>     
> {\\displaystyle x\_{1},\\ldots ,x\_{n}}
>   
> are the variables (or unknowns), and 
>   
>     
>       
> b
> ,
>         
> a
>           
> 1
>           
>         
> ,
> …
> ,
>         
> ...

`:)`

---

<div class="post-metadata">

**Author:** ![Kenga123456](https://avatars.discourse-cdn.com/v4/letter/k/f08c70/32.png) [@Kenga123456](https://discourse.processing.org/u/Kenga123456)\
**Post date:** [August 9, 2021, 9:47am UTC](https://discourse.processing.org/t/how-to-make-my-rects-bigger-based-on-proximity-bigger-the-closer-to-my-mouse-pjs/31637/12 "2021-08-09T09:47:32Z")

</div>

Ohh thank you I think I understand it now, I will try to experiment a little with it 🙂

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 9, 2021, 9:59am UTC](https://discourse.processing.org/t/how-to-make-my-rects-bigger-based-on-proximity-bigger-the-closer-to-my-mouse-pjs/31637/13 "2021-08-09T09:59:51Z")

</div>

A simple example:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d13ea27513c7bf16f1cbd0e1260cb2feeb73e980.png)

```auto
// Celcius to Fahrenheit

float F;

for (float C = 0; C<=100; C+=10)
  {
  F = map(C, 0, 100, 32, 212);
  println (C, F);  
  }

```

Try to do it for F to C!

`:)`

---

<div class="post-metadata">

**Author:** ![Kenga123456](https://avatars.discourse-cdn.com/v4/letter/k/f08c70/32.png) [@Kenga123456](https://discourse.processing.org/u/Kenga123456)\
**Post date:** [August 9, 2021, 10:01am UTC](https://discourse.processing.org/t/how-to-make-my-rects-bigger-based-on-proximity-bigger-the-closer-to-my-mouse-pjs/31637/14 "2021-08-09T10:01:04Z")

</div>

Thanks!  
Filler filler

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 9, 2021, 10:14am UTC](https://discourse.processing.org/t/how-to-make-my-rects-bigger-based-on-proximity-bigger-the-closer-to-my-mouse-pjs/31637/15 "2021-08-09T10:14:33Z")

</div>

Also see this for OpenProcessing users:

> [@Loops using arrays](https://discourse.processing.org/t/loops-using-arrays/30253/9):
>
> Hello, In place of println() you can use console.log(): I converted C and F to strings so I could put them on one line. slight_smile

And another tidbit about using float and int:

[https://github.com/processing/processing/wiki/Troubleshooting#why-does-2–5–0-instead-of-04](https://github.com/processing/processing/wiki/Troubleshooting#why-does-2--5--0-instead-of-04)

`:)`

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [August 9, 2021, 10:50am UTC](https://discourse.processing.org/t/how-to-make-my-rects-bigger-based-on-proximity-bigger-the-closer-to-my-mouse-pjs/31637/16 "2021-08-09T10:50:22Z")

</div>

Also remember that you can  
use ctrl-t in processing to  
auto format your code