Scaling Mouse Interactions

Programming Questions

jonobr1

in Programming Questions • 3 years ago

I've pushed myself into a corner where I have to scale an entire sketch. The scale() works well, however I have these mouse sensitive areas that don't scale with the render.

E.G.

float xpos, ypos, r;

void setup() {

size(800, 800);

xpos = width/2;

ypos = height/2;

r = 25;

}

void draw() {

background(255);

pushMatrix();

scale(2.0);

translate(-width/4, -height/4);

if(sqrt(sq(xpos - mouseX) + sq(ypos - mouseY)) < r) fill(255, 0, 0);

else fill(0, 0, 255);

rect(xpos - r, ypos - r, r*2, r*2);

popMatrix();

}

Now I could use a multiplier on the radius to make r in the if statement reflect the new radius, 50, but I was wondering if there was a way that I could do it without having to actually rewrite the number value. I'm totally stumped...

—
http://jonobr1.com/

Replies(3)

Michiel

Re: Scaling Mouse Interactions

3 years ago

Why wouldn't you set r to a new value? Performance?

You could add a float final rConstant = 25. Add a method rescale(float scale) that calls scale(scale) and sets r to rConstant multiplied with scale. If possible you call it only in setup().

rescale(float scale) {

scale(scale);

r = rConstant*scale;

}

Below is what you suggested right?:

draw() {

...

float scale = 2.0;

scale(scale);

....

IF blablabla < (r*scale) etc.etc.

...

}

That does not rewrite r... it will still be 25.

jonobr1

Re: Scaling Mouse Interactions

3 years ago

Thanks Michiel for the reply,

I ended up writing it like your second suggestion. I was just curious if there was a way to affect integers and floating point numbers via scale.

—
http://jonobr1.com/

quarks

Re: Scaling Mouse Interactions

3 years ago

If all you want to do is scale your sketch by 2 then the following code (minor changes to yours) will work for a scale of 2

float xpos, ypos, r;
float scaleXY = 2.0;

void setup() {
size(800, 800);
xpos = width/2;
ypos = height/2;
r = 25;
cursor(CROSS);
}

void draw() {
background(255);

pushMatrix();
scale(scaleXY);
translate(-width/4, -height/4);
if(sqrt(sq(xpos - mouseX) + sq(ypos - mouseY)) < r * scaleXY)
fill(255, 0, 0);
else
fill(0, 0, 255);
rect(xpos - r, ypos - r, r*2, r*2);
popMatrix();
}

Unfortunately this will not work for other scale values because your translate command is hardcoded for a scale of 2.

The problem is that the scale command will stretch/shrink the drawiang area from the top left corner so the translation command to centre the drawing coordinates would also need to be scaled. Also scale does not the affect mouseX and mouseY these will always be measured in actual pixels from the top left hand corner.

The following code does away with the need for translate and will work with any scale. Hope you are able to use the ideas in your sketch.

float xpos, ypos, r;
float scaleXY = 3.142;
float mx, my;

void setup() {
size(800, 800);
xpos = 0.5*width/scaleXY;
ypos = 0.5*height/scaleXY;
r = 25;
cursor(CROSS);
}

void draw() {
background(255);

pushMatrix();
scale(scaleXY);
mx = mouseX/scaleXY;
my = mouseY/scaleXY;
if(sqrt(sq(xpos - mx) + sq(ypos - my)) < r)
fill(255, 0, 0);
else
fill(0, 0, 255);
rect(xpos - r, ypos - r, r*2, r*2);
popMatrix();
}

A more generic approach would be to consider the screen represents some area of 'world space' and then create methods to translate points from world > screen and screen > world. A shape would have a position and size in world space and the screen posiition and size would be calculated using the world > screen method when you need to draw it. To see if the mouse pointer is over a shape use the screen > world method to calculate mouseX and mouseY in world values then compare these to the shape's world position.

I used this approach in the Sprites library see sprites using world and screen mappings

Top Reply