Scale from 0 to 50 to 0 (reverse or invert a range?)

Programming Questions

joelle_tu..

Scale from 0 to 50 to 0 (reverse or invert a range?)

in Programming Questions • 7 months ago

Hi Guys

I'm a noob learning processing with Casey Reas & Ben Fry and their amazing book.

As an exercise, I would like to scale a grid of circles from small (0px) to large (50px) to small (0px) again. I managed to do the reverse (big to small to big) using the map function and converting a value to a range of -1.0 to 1.0 and translating this into scale of -50, 0 and 50. (Sorry if my language is incorrect)

How do I "reverse" this? I got a result using if statements but wondering if there is way to convert to a range of numbers that start at 0, increase to 50 in (for example) 10px increments, and then decrease to 0 again. I'm also unsure if the method of using map as I used it below is the "correct" way to tackle such a thing, converting to one range and then converting to another. Trying to apply some of the things I've learnt thus far.

Apologies if this has been answered, I did search the forum and couldn't find anything. I have pasted my code below.

Thanks in advance guys!

size(500, 500);
background(255);
fill(0);
noStroke();
for (int x = 0; x < 550; x+=50) {
for (int y = 0; y < 550; y+=50) {
float newX = (x*0.200)/2; // convert stage width to increments of 5 between 0 and 50
float n = map(newX, 0, 50, -1.0, 1.0); // convert to new range between -1.0 & 1.0
float s = map(n, -1.0, 1.0, -50, 50); // convert to new range between -50 & 50
//float sPos = lerp(0, 50, n); // does same as above
ellipse(x, y, s, s);
println(s);
// I achieve what I want with the below, but feels like there could be more elegant solution
/*
if (n <= 0.0) {
float s1 = s += 50;
ellipse(x, y, s1, s1);
println(s1);
}
if (n >= 0.0) {
float s2 = s -= 50;
ellipse(x, y, s2, s2);
println(s2);
}
*/
}
}

Replies(2)

amnon.owed

Re: Scale from 0 to 50 to 0 (reverse or invert a range?)

7 months ago

As you found out the ellipse is drawn the same whether the sign is positive or negative.

First, I think your code can be simplified for the current range (-50 to 0 to +50).

To turn it around you can take the absolute and substract 50, leading to the range (0 to -50 to 0).

Visually this is the same as 0 to 50 to 0 (optionally you can use absolute again to get a positive sign).

Adapted Code

size(500, 500);
background(255);
fill(0);
noStroke();
smooth();
for (int x=0; x<550; x+=50) {
for (int y=0; y<550; y+=50) {
float n = abs(map(x, 0, width, -50, 50))-50;
ellipse(x, y, n, n);
}
}

joelle_tu..

Re: Scale from 0 to 50 to 0 (reverse or invert a range?)

7 months ago

Legend!

Totally makes sense, thanks a bunch!

Top Reply