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

``````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);

}
}
}

``````
1 Like

use

map(distance_mouse_ellipse, 0, width,
50,0) for the size of the rect

I tried but it doesn’t work?

1 Like

You can play with the values a bit

``````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.

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

1 Like

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.

3 Likes

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

1 Like

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

1 Like

Hello,

Some references:

Source code:
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:

``````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:

`:)`

1 Like

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

A simple example:

``````// 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!

`:)`

Thanks!
Filler filler

Also see this for OpenProcessing users:

And another tidbit about using float and int:

`:)`