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

Processing Coding Questions
1 
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
2

use

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

3

I tried but it doesn’t work?

1 Like
4

Show me your code

You can play with the values a bit

5

use float instead of int

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

7

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

1 Like
8

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
9

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
10

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

1 Like
11

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
12

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

1 Like
13

A simple example:

image
image500×709 22.5 KB 

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

:)

14

Thanks!
Filler filler

15

Also see this for OpenProcessing users:

And another tidbit about using float and int:

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

:)

16

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