# Fill a parabole track

**URL:** <https://discourse.processing.org/t/fill-a-parabole-track/6338>\
**Category:** Coding Questions\
**Created:** [December 5, 2018, 6:29pm UTC](https://discourse.processing.org/t/fill-a-parabole-track/6338 "2018-12-05T18:29:58Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![saotome](https://avatars.discourse-cdn.com/v4/letter/s/90ced4/32.png) [@saotome](https://discourse.processing.org/u/saotome)\
**Post date:** [December 5, 2018, 6:29pm UTC](https://discourse.processing.org/t/fill-a-parabole-track/6338/1 "2018-12-05T18:29:58Z")

</div>

Hi

I have this code and I want to draw each point of the parabole instead of viewing only the point moving.

Code is the following

```auto
float dx=10; // Inital x position
float dy=620; // Inital y position
float vx=0; // Inital x velocity
float vy=0; //Inital v velocity, remember negative y is up
float t=.1; // Time steps
float g=9.8; // Acceleration due to gravity, where each pixel = 1 meter
float vyf=0; // Final Velocity
float aimX=50;
float aimY=320;
int angle = 0;
int vi=0;
boolean launch=false;
float time=0.000;
float alturamax;
float projV;
float projAngle;

void setup()
{
  size(900, 630);
  smooth();
  background(100);
  frameRate (30/t);
  textSize(20);
}

void draw ()
{
  background(100);
  strokeWeight(1);
  fill(255);
  ellipse (50, height/2, 50, 50);
  ellipse (dx, dy, 20, 20);
  fill(180);
  rect(25, 25, 90, 25);
  rect(25, 75, 90, 25);
  strokeWeight(6);
  line(-angle+25, 25, -angle+25, 50);
  text(-angle+" Deg.", 125, 50);
  line(vi+25, 75, vi+25, 100);
  text(vi+" m/s", 125, 100);
  text("Temps =", 680, 50);
  text(time+" s", 770, 50);
  text("La velocitat inicial és =", 545, 70);
  text(vi +" m/s", 770, 70);
  text("L'angle inicial és =", 585, 90);
  text(-angle +"º", 770, 90); 
  text("La longitud màxima és =", 525, 110);
  text(int(dx-10)+" m", 770, 110);  
  alturamax=vi*vi*sin(-angle)*sin(-angle)/(2*9.8);
  text("La alçada màxima és =", 545, 130);
  text(int(alturamax) + " m", 770, 130);  

  pushMatrix();
  translate(50, height/2);
  rotate(radians(angle));
  line(0, 0, vi, 0);
  line(vi, 0, vi-10, -10);
  line(vi, 0, vi-10, 10);
  popMatrix();
  if (launch)
  {
    vyf=vy+g*t;
    dy=dy+vy*t+.5*(vyf-vy)*t;
    vy=vyf;
    dx=dx+vx*t;
    if (dy<height-10)
    {
      time=time+t;
    }
  }
  if (dy>(height-10))
  {
    dy=height-10;
    vy=0;
    vx=0;
    if (dx<770)
    {
      text(int(dx-10)+" m", dx+15, height-2);
    } else
    {
      text(int(dx-10)+" m", dx-110, height-2);
    }
  }
}

void mouseDragged()
{
  if (mouseX > 25 && mouseX < 115 && mouseY > 25 && mouseY < 50 && dx<11)
  {
    angle=-mouseX+25;
  } else if (mouseX > 25 && mouseX < 115 && mouseY > 75 && mouseY < 100 && dx<11)
  {
    vi=mouseX-25;
  }
}

void mouseReleased()
{
  if (dx<11)
  {
    vy=vi*sin(radians(angle));
    vx=vi*cos(radians(angle));
    launch=true;
    time=0;
  }
}

void mousePressed()
{
  launch=false;
  dx=10;
  dy=620;
}

```

Thanks in advance

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [December 5, 2018, 6:54pm UTC](https://discourse.processing.org/t/fill-a-parabole-track/6338/2 "2018-12-05T18:54:29Z")

</div>

Hi,

You need a way to save the previous position in order to perform the effect you want. You can use an ArrayList for example.

Then, the idea is to add to that list all the position that the ball have ever had and use that list to display a “phantom tray”.

I made quick changes to your code:

```auto
float dx=10; // Inital x position
float dy=620; // Inital y position
float vx=0; // Inital x velocity
float vy=0; //Inital v velocity, remember negative y is up
float t=.1; // Time steps
float g=9.8; // Acceleration due to gravity, where each pixel = 1 meter
float vyf=0; // Final Velocity
float aimX=50;
float aimY=320;
int angle = 0;
int vi=0;
boolean launch=false;
float time=0.000;
float alturamax;
float projV;
float projAngle;

ArrayList<PVector> ballTrack; // Keep track of the old ball positions

void setup()
{
  size(900, 630);
  smooth();
  background(100);
  frameRate (30/t);
  textSize(20);
  
  ballTrack = new ArrayList<PVector>();
}

void draw ()
{
  background(100);
  strokeWeight(1);
  fill(255);
  ellipse (50, height/2, 50, 50);
  
  // Display the previous ball position
  for (int i = 0; i < ballTrack.size(); i++) {
    fill(200);
    ellipse (ballTrack.get(i).x, ballTrack.get(i).y, 20, 20);
  }
  
  // Display your current position 
  fill(255);
  ellipse (dx, dy, 20, 20);
  
  // Add the new position to the liste of the old position for the next turn
  ballTrack.add(new PVector(dx, dy));
  
  fill(180);
  rect(25, 25, 90, 25);
  rect(25, 75, 90, 25);
  strokeWeight(6);
  line(-angle+25, 25, -angle+25, 50);
  text(-angle+" Deg.", 125, 50);
  line(vi+25, 75, vi+25, 100);
  text(vi+" m/s", 125, 100);
  text("Temps =", 680, 50);
  text(time+" s", 770, 50);
  text("La velocitat inicial és =", 545, 70);
  text(vi +" m/s", 770, 70);
  text("L'angle inicial és =", 585, 90);
  text(-angle +"º", 770, 90); 
  text("La longitud màxima és =", 525, 110);
  text(int(dx-10)+" m", 770, 110);  
  alturamax=vi*vi*sin(-angle)*sin(-angle)/(2*9.8);
  text("La alçada màxima és =", 545, 130);
  text(int(alturamax) + " m", 770, 130);  

  pushMatrix();
  translate(50, height/2);
  rotate(radians(angle));
  line(0, 0, vi, 0);
  line(vi, 0, vi-10, -10);
  line(vi, 0, vi-10, 10);
  popMatrix();
  if (launch)
  {
    vyf=vy+g*t;
    dy=dy+vy*t+.5*(vyf-vy)*t;
    vy=vyf;
    dx=dx+vx*t;
    if (dy<height-10)
    {
      time=time+t;
    }
  }
  if (dy>(height-10))
  {
    dy=height-10;
    vy=0;
    vx=0;
    if (dx<770)
    {
      text(int(dx-10)+" m", dx+15, height-2);
    } else
    {
      text(int(dx-10)+" m", dx-110, height-2);
    }
  }
}

void mouseDragged()
{
  if (mouseX > 25 && mouseX < 115 && mouseY > 25 && mouseY < 50 && dx<11)
  {
    angle=-mouseX+25;
  } else if (mouseX > 25 && mouseX < 115 && mouseY > 75 && mouseY < 100 && dx<11)
  {
    vi=mouseX-25;
  }
}

void mouseReleased()
{
  if (dx<11)
  {
    vy=vi*sin(radians(angle));
    vx=vi*cos(radians(angle));
    launch=true;
    time=0;
  }
}

void mousePressed()
{
  launch=false;
  dx=10;
  dy=620;
}

```

Of course there are plenty of stuff to improve like resetting the array, change the way it is displayed depending on how old the phantom is, save less position so the “phantom tray” has less ellipses, etc.

---

<div class="post-metadata">

**Author:** ![saotome](https://avatars.discourse-cdn.com/v4/letter/s/90ced4/32.png) [@saotome](https://discourse.processing.org/u/saotome)\
**Post date:** [December 5, 2018, 7:15pm UTC](https://discourse.processing.org/t/fill-a-parabole-track/6338/3 "2018-12-05T19:15:56Z")

</div>

Thanks, this exactly that I was looking for. A last question, how I clear the screen on the next shot. The first line in draw is background() but seems that didn’t clear the previous track.

Many thanks again

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [December 5, 2018, 7:25pm UTC](https://discourse.processing.org/t/fill-a-parabole-track/6338/4 "2018-12-05T19:25:26Z")

</div>

As I wrote at the end there are plenty of things to improve.

Resetting the array will do the trick. I will let you figure out where is the best place to reset it. If you can do it, it means that you probably understand how the code is working.

---

<div class="post-metadata">

**Author:** ![saotome](https://avatars.discourse-cdn.com/v4/letter/s/90ced4/32.png) [@saotome](https://discourse.processing.org/u/saotome)\
**Post date:** [December 6, 2018, 8:09am UTC](https://discourse.processing.org/t/fill-a-parabole-track/6338/5 "2018-12-06T08:09:38Z")

</div>

In java willl be like that

```auto
float[] arr = ballTrack;
arr = new float[arr.length];

```

But in processing i haven’t enough skills to solve this issue.

Thanks again

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [December 6, 2018, 12:32pm UTC](https://discourse.processing.org/t/fill-a-parabole-track/6338/6 "2018-12-06T12:32:39Z")

</div>

Processing is Java so if you can do it in Java, you can do it in Processing.

Now what you are refering to is fixed size array. It is not what I used, I used an object call an arrayList.

You can find all the information you need here: [https://processing.org/reference/ArrayList.html](https://processing.org/reference/ArrayList.html)

---

<div class="post-metadata">

**Author:** ![saotome](https://avatars.discourse-cdn.com/v4/letter/s/90ced4/32.png) [@saotome](https://discourse.processing.org/u/saotome)\
**Post date:** [December 7, 2018, 8:38am UTC](https://discourse.processing.org/t/fill-a-parabole-track/6338/7 "2018-12-07T08:38:50Z")

</div>

I’ve readed the topic but I didn’t find what I’m looking for. In java is easy as ballTrack.clear(), but here in Processing I’m unable to make it so easy. Other option is clearing element by element, but I haven’t found how is done.

Thanks again.

---

<div class="post-metadata">

**Author:** ![Whahahahaha](https://avatars.discourse-cdn.com/v4/letter/w/3be4f8/32.png) [@Whahahahaha](https://discourse.processing.org/u/Whahahahaha)\
**Post date:** [December 7, 2018, 9:27am UTC](https://discourse.processing.org/t/fill-a-parabole-track/6338/8 "2018-12-07T09:27:40Z")

</div>

@saotome doesn’t adding

```auto
  ballTrack = new ArrayList<PVector>();

```

to mousePressed() or wherever you want to reset work?

---

<div class="post-metadata">

**Author:** ![saotome](https://avatars.discourse-cdn.com/v4/letter/s/90ced4/32.png) [@saotome](https://discourse.processing.org/u/saotome)\
**Post date:** [December 7, 2018, 9:30am UTC](https://discourse.processing.org/t/fill-a-parabole-track/6338/9 "2018-12-07T09:30:32Z")

</div>

I never realize it was so simple. Thanks again

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 7, 2018, 10:05am UTC](https://discourse.processing.org/t/fill-a-parabole-track/6338/10 "2018-12-07T10:05:55Z")

</div>

also can try:

```auto
ArrayList<PVector> ballTrack = new ArrayList<PVector>(); // Keep track of the old ball positions

void setup() {
  ballTrack.add(new PVector(mouseX,mouseY));
  println("after add "+ballTrack.size());
  ballTrack.clear();
  println("after clear "+ballTrack.size());

}

```

many of that possible commands on list can find  
[https://processing.org/reference/StringList.html](https://processing.org/reference/StringList.html)

---

<div class="post-metadata">

**Author:** ![saotome](https://avatars.discourse-cdn.com/v4/letter/s/90ced4/32.png) [@saotome](https://discourse.processing.org/u/saotome)\
**Post date:** [December 8, 2018, 6:03am UTC](https://discourse.processing.org/t/fill-a-parabole-track/6338/11 "2018-12-08T06:03:10Z")

</div>

Thanks kll, it’s an other useful way to clear the array list. I have only a question more, how I can now the maximum number of this code

`ballTrack.get(i).x`

I tryied with `max` but doesn’t work

Thanaks again

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 8, 2018, 6:08am UTC](https://discourse.processing.org/t/fill-a-parabole-track/6338/12 "2018-12-08T06:08:22Z")

</div>

for the length of the array,  
actually the answer you can see 10cm up in my example:

```auto
for ( int i =0 ; i < ballTrack.size(); i++ ) point( ballTrack.get(i).x,ballTrack.get(i).y);

```

possibly you not even need to know:

```auto
for ( PVector ball : ballTrack ) point(ball.x,ball.y);

```

speak:  
for each item “ball” ( of type PVector ) IN the list “ballTrack” execute …

//\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

for finding the biggest .x in the array:

```auto
float xmax = 0;
for ( PVector ball : ballTrack ) if (ball.x > xmax ) xmax = ball.x;
println("xmax: "+xmax);

```

---

<div class="post-metadata">

**Author:** ![saotome](https://avatars.discourse-cdn.com/v4/letter/s/90ced4/32.png) [@saotome](https://discourse.processing.org/u/saotome)\
**Post date:** [December 8, 2018, 6:23am UTC](https://discourse.processing.org/t/fill-a-parabole-track/6338/13 "2018-12-08T06:23:35Z")

</div>

Hi, this is the code I have currently

```auto
float dx=10; // Posició inicial de x
float dy=620; // Posició inicial de y
float vx=0; // Velocitat inicial de x
float vy=0; // Velocitat inicial de y. y NEGATIU ES AMUNT
float t=.1; // Increment temps
float g=9.8; // Acceleració de la gravetat. 1 pixel equival a 1 metre
float vyf=0; // Velocitat final
int angle = 0; // Angle inicial
float alturamax; //Alçada máxima
int vi=0;
boolean launch=false;
float time=0.00;
ArrayList<PVector> ballTrack = new ArrayList<PVector>(); // Manté el registre de les el.lipses anteriors

void setup()
{
  size(900, 630);
  smooth();
  background(100);
  frameRate (30/t);
  textSize(20);
  ballTrack = new ArrayList<PVector>();
  ballTrack.add(new PVector(mouseX,mouseY));
  println("after add "+ballTrack.size());
  ballTrack.clear();
  println("after clear "+ballTrack.size());
}

void draw ()
{
  background(100);
  strokeWeight(1);
  fill(255);
  ellipse (50, height/2, 50, 50);

  // Display the previous ball position
  for (int i = 0; i < ballTrack.size(); i++) {
    fill(200);
    ellipse (ballTrack.get(i).x, ballTrack.get(i).y, 20, 20);
  }

  // Pinta la posició actual
  fill(255);
  ellipse (dx, dy, 20, 20);

  // Afegeix la nova posició al array de posicions per a preparar la següent el.lipse
  ballTrack.add(new PVector(dx, dy));
  fill(180);
  rect(25, 25, 90, 25);
  rect(25, 75, 90, 25);
  strokeWeight(6);

  // Escric els textos i els valors
  text ("Les barres es mouen amb el ratolí", 25, 130);
  text ("No funciona amb el teclat", 25, 150);
  line(-angle+25, 25, -angle+25, 50);
  text(-angle+"º", 125, 50);
  line(vi+25, 75, vi+25, 100);
  text(vi+" m/s", 125, 100);
  text("Temps =", 680, 50);
  text(time+" s", 770, 50);
  text("La velocitat inicial és =", 545, 70);
  text(vi +" m/s", 770, 70);
  text("L'angle inicial és =", 585, 90);
  text(-angle +"º", 770, 90); 
  text("La longitud màxima és =", 525, 110);
  text(int(dx-10)+" m", 770, 110);  
  alturamax=(vi*vi*sin(-angle)*sin(-angle))/(2*9.8);
  text("La alçada màxima és =", 545, 130);
  text(int(alturamax) + " m", 770, 130);  

  pushMatrix();
  translate(50, height/2);
  rotate(radians(angle));
  line(0, 0, vi, 0);
  line(vi, 0, vi-10, -10);
  line(vi, 0, vi-10, 10);
  popMatrix();
  if (launch)
  {
    vyf=vy+g*t;
    dy=dy+vy*t+.5*(vyf-vy)*t;
    vy=vyf;
    dx=dx+vx*t;
    if (dy<height-10)
    {
      time=time+t;
    }
  }
  if (dy>(height-10))
  {
    dy=height-10;
    vy=0;
    vx=0;
    if (dx<770)
    {
      text(int(dx-10)+" m", dx+15, height-2);
    } else
    {
      text(int(dx-10)+" m", dx-110, height-2);
    }
  }
}

void mouseDragged()
{
  if (mouseX > 25 && mouseX < 115 && mouseY > 25 && mouseY < 50 && dx<11)
  {
    angle=-mouseX+25;
  } else if (mouseX > 25 && mouseX < 115 && mouseY > 75 && mouseY < 100 && dx<11)
  {
    vi=mouseX-25;
  }
}

void mouseReleased()
{
  if (dx<11)
  {
    vy=vi*sin(radians(angle));
    vx=vi*cos(radians(angle));
    launch=true;
    time=0;
  }
}

void mousePressed()
{
  launch=false;
  ballTrack = new ArrayList<PVector>(); //Reinicio l'ArrayList i esborro el traç anterior
  dx=10;
  dy=620;
}

```

My concern is to know the max heigh that the ball hass, ie, the max value of the y component of the ArrayList.

Currently I apply this formula, but sometimes didn’t work

`alturamax=(vi*vi*sin(-angle)*sin(-angle))/(2*9.8);`

But sometimes goes crazy and shows not consistent data

Thanks in advance

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 8, 2018, 6:34am UTC](https://discourse.processing.org/t/fill-a-parabole-track/6338/14 "2018-12-08T06:34:45Z")

</div>

> [@saotome](#):
>
> ballTrack.add(new PVector(dx, dy));

this line i would move down after the actual calculation of dx and dy

//  
ok in my prior post see the loop for finding xmax,  
just change to ymax.

---

<div class="post-metadata">

**Author:** ![saotome](https://avatars.discourse-cdn.com/v4/letter/s/90ced4/32.png) [@saotome](https://discourse.processing.org/u/saotome)\
**Post date:** [December 8, 2018, 6:42am UTC](https://discourse.processing.org/t/fill-a-parabole-track/6338/15 "2018-12-08T06:42:08Z")

</div>

Thanks again, but I’m unable to fit the new code. I will try to insert the commands in the correct place

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 8, 2018, 7:11am UTC](https://discourse.processing.org/t/fill-a-parabole-track/6338/16 "2018-12-08T07:11:31Z")

</div>

the problem is NOT to find any max position/value in the array,  
the problem is the calculation:  
try

```auto
  alturamax=(vi*vi*sin(radians(-angle))*sin(radians(-angle)))/(2*9.8);

```

---

<div class="post-metadata">

**Author:** ![saotome](https://avatars.discourse-cdn.com/v4/letter/s/90ced4/32.png) [@saotome](https://discourse.processing.org/u/saotome)\
**Post date:** [December 8, 2018, 7:32am UTC](https://discourse.processing.org/t/fill-a-parabole-track/6338/17 "2018-12-08T07:32:54Z")

</div>

Solved. Thanks so much…