# How to determine ratio of growth of figure based on distance?

**URL:** <https://discourse.processing.org/t/how-to-determine-ratio-of-growth-of-figure-based-on-distance/24441>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [October 8, 2020, 3:50pm UTC](https://discourse.processing.org/t/how-to-determine-ratio-of-growth-of-figure-based-on-distance/24441 "2020-10-08T15:50:35Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![silphonix](https://avatars.discourse-cdn.com/v4/letter/s/85e7bf/32.png) [@silphonix](https://discourse.processing.org/u/silphonix)\
**Post date:** [October 8, 2020, 3:50pm UTC](https://discourse.processing.org/t/how-to-determine-ratio-of-growth-of-figure-based-on-distance/24441/1 "2020-10-08T15:50:35Z")

</div>

Hi, I’m new to Processing.  
I wanted to know the best/simpliest method to achive the following:

I need to move a square from right to left and make it scale while moving.  
The square must be 2x2 at the beggining, and end at 80x80.  
Having a 500x500 canvas, has to start at 0x250 and end at 500x250 (left to right).

I know how to make it scale it from 2x2 to 80x80, and know how to move it from right to left. I don’t know how to determine the growth progressing to get to 80x80 just when arriving at 500x250.

Sorry if I’m not clear, gonna try to explain it better if needed.

Edit: My bad, changed the requeriment, it was left to right, not right to left.

---

<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:** [October 8, 2020, 4:01pm UTC](https://discourse.processing.org/t/how-to-determine-ratio-of-growth-of-figure-based-on-distance/24441/2 "2020-10-08T16:01:20Z")

</div>

Look at the map() command

it allows you to map one range (500…0) to another range (2…80)

Don’t really use scale() command but use the result of your map command as a value when using the rect() command

---

<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:** [October 8, 2020, 4:01pm UTC](https://discourse.processing.org/t/how-to-determine-ratio-of-growth-of-figure-based-on-distance/24441/3 "2020-10-08T16:01:45Z")

</div>

Hey, and welcome to the forum, great to have you here!

😉

Chrisir

---

<div class="post-metadata">

**Author:** ![silphonix](https://avatars.discourse-cdn.com/v4/letter/s/85e7bf/32.png) [@silphonix](https://discourse.processing.org/u/silphonix)\
**Post date:** [October 8, 2020, 4:56pm UTC](https://discourse.processing.org/t/how-to-determine-ratio-of-growth-of-figure-based-on-distance/24441/4 "2020-10-08T16:56:00Z")

</div>

Hi Chrisir, thanks for the fast response.  
Didn’t knew the map() method, gonna try to learn it and apply it to this case.

Thanks 🙂

---

<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:** [October 8, 2020, 5:12pm UTC](https://discourse.processing.org/t/how-to-determine-ratio-of-growth-of-figure-based-on-distance/24441/5 "2020-10-08T17:12:53Z")

</div>

> [@silphonix](#):
>
> My bad, changed the requeriment, it was left to right, not right to left.

ah then it’s

float rectWidth = map one range (0…500) to another range (2…80);

see reference

(I am being a bit vague since I don’t want to spoil the fun for you)

---

<div class="post-metadata">

**Author:** ![silphonix](https://avatars.discourse-cdn.com/v4/letter/s/85e7bf/32.png) [@silphonix](https://discourse.processing.org/u/silphonix)\
**Post date:** [October 8, 2020, 5:20pm UTC](https://discourse.processing.org/t/how-to-determine-ratio-of-growth-of-figure-based-on-distance/24441/6 "2020-10-08T17:20:40Z")

</div>

Hi, thanks again for the fast response 😃 !

I solved it like this:

> int p1 = 0;
> 
> void setup(){  
> size(500,500);  
> background(255);  
> }
> 
> void draw(){  
> background(255);  
> fill(255);  
> float firstEllipseRatio = map(p1, 0,500,100,60);  
> float secondEllipseRatio = map(p1, 0,500,90,60);  
> float thirdEllipseRatio = map(p1, 0,500,80,60);  
> ellipse(p1,100,firstEllipseRatio,firstEllipseRatio);  
> ellipse(p1,250,secondEllipseRatio,secondEllipseRatio);  
> ellipse(p1,400,thirdEllipseRatio,thirdEllipseRatio);  
> p1 = p1 + 1;  
> }

While it does what’s needed, is there any way to improve it codewise ? like better practices  
Thanks again, the map() was a great help, I was getting crazy trying to do it with scale() lol

---

<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:** [October 8, 2020, 5:24pm UTC](https://discourse.processing.org/t/how-to-determine-ratio-of-growth-of-figure-based-on-distance/24441/7 "2020-10-08T17:24:28Z")

</div>

prior to posting hit ctrl-t in processing

the after posting use the `</>` symbol to format it as code

**Idea 1**

work with 3 different p variables and let them have different initial random values

**Idea 2**

let them bounce at right and left border

😉

---

<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:** [October 8, 2020, 5:26pm UTC](https://discourse.processing.org/t/how-to-determine-ratio-of-growth-of-figure-based-on-distance/24441/8 "2020-10-08T17:26:47Z")

</div>

```auto
int p1 = 0;

void setup() {
  size(500, 500);
  background(255);
}

void draw() {
  background(255);
  fill(255);

  float firstEllipseRatio = map(p1, 0, 500, 100, 60);
  float secondEllipseRatio = map(p1, 0, 500, 90, 60);
  float thirdEllipseRatio = map(p1, 0, 500, 2, 250);

  fill(255); 
  ellipse(p1, 100, firstEllipseRatio, firstEllipseRatio);
  fill(255, 0, 0); 
  ellipse(p1, 250, secondEllipseRatio, secondEllipseRatio);
  fill(0, 0, 255); 
  ellipse(p1, 400, thirdEllipseRatio, thirdEllipseRatio);

  p1 = p1 + 1;
}

```