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

Processing Coding Questions
1

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.

2

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

3

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

:wink:

Chrisir

4

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

1 Like
5

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)

6

Hi, thanks again for the fast response :smiley: !

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

1 Like
7

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

:wink:

8 
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;
}