# Drawing Line with Bouncing Ball

**URL:** <https://discourse.processing.org/t/drawing-line-with-bouncing-ball/30130>\
**Category:** Coding Questions\
**Created:** [May 17, 2021, 3:09am UTC](https://discourse.processing.org/t/drawing-line-with-bouncing-ball/30130 "2021-05-17T03:09:39Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![SodaPopPop](https://avatars.discourse-cdn.com/v4/letter/s/8baadc/32.png) [@SodaPopPop](https://discourse.processing.org/u/SodaPopPop)\
**Post date:** [May 17, 2021, 3:09am UTC](https://discourse.processing.org/t/drawing-line-with-bouncing-ball/30130/1 "2021-05-17T03:09:40Z")

</div>

Hello! I am a beginner, and I’m very new to processing!

I have a project in mind that I have no idea how to execute. I want to create something from the [bouncing ball](https://processing.org/examples/bouncingball.html) example. Supposedly, the code will draw a line from the center of the ball to track where the ball has been.

So far, I created a dot in the middle of the circle.

```auto
PVector location; // Location of shape
PVector velocity; // Velocity of shape
PVector gravity; // Gravity acts at the shape's acceleration

void setup() {
  size(640,360);
  location = new PVector(100,100);
  velocity = new PVector(1.5,2.1);
  gravity = new PVector(0,0.2);
}

void draw() {
  background(0);
  
  location.add(velocity);
  // Add gravity to velocity
  velocity.add(gravity);
  
  // Bounce off edges
  if ((location.x > width) || (location.x < 0)) {
    velocity.x = velocity.x * -1;
  }
  if (location.y > height) {
    velocity.y = velocity.y * -1; 
    location.y = height;
  }

  stroke(255);
  strokeWeight(2);
  fill(127);
  ellipse(location.x,location.y, 48, 48);
  line(location.x, location.y, location.x, location.y);
  }

```

This creates a dot, but leaves no trail. I assume it’s because I have no idea how to obtain the location of the center of the ball of the previous frame.

Thank you for reading!

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [May 17, 2021, 4:58am UTC](https://discourse.processing.org/t/drawing-line-with-bouncing-ball/30130/2 "2021-05-17T04:58:00Z")

</div>

Hello @SodaPopPop  
If I’m reading your question correctly, I _think_ you will need to use the **point() function** rather than line() function. And create **an arrayList** in order to store the locations of all of the previous points as well as each new point (x, y location) as long as the sketch runs.  
I hope this helps.  
🤓

---

<div class="post-metadata">

**Author:** ![SodaPopPop](https://avatars.discourse-cdn.com/v4/letter/s/8baadc/32.png) [@SodaPopPop](https://discourse.processing.org/u/SodaPopPop)\
**Post date:** [May 17, 2021, 5:38am UTC](https://discourse.processing.org/t/drawing-line-with-bouncing-ball/30130/3 "2021-05-17T05:38:08Z")

</div>

Thank you! I’ll test it and update here about whether that works.

---

<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:** [May 17, 2021, 7:06am UTC](https://discourse.processing.org/t/drawing-line-with-bouncing-ball/30130/4 "2021-05-17T07:06:47Z")

</div>

> [@SodaPopPop](#):
>
> `background(0);`

For a start just comment this out

---

<div class="post-metadata">

**Author:** ![SodaPopPop](https://avatars.discourse-cdn.com/v4/letter/s/8baadc/32.png) [@SodaPopPop](https://discourse.processing.org/u/SodaPopPop)\
**Post date:** [May 17, 2021, 7:49am UTC](https://discourse.processing.org/t/drawing-line-with-bouncing-ball/30130/5 "2021-05-17T07:49:36Z")

</div>

Oh! I did as soon as I realized it’s drawing the background every frame. Though, it will draw the circle every frame too. I’ll try it out first. 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:** [May 17, 2021, 8:06am UTC](https://discourse.processing.org/t/drawing-line-with-bouncing-ball/30130/6 "2021-05-17T08:06:26Z")

</div>

The idea from debxyz is very good

You need an Arraylist of PVector, add() points to it and display the whole list in draw()

Then you can re-activate background() actually

**Details**

before `setup()`:

`ArrayList<PVector> list = new ArrayList();`

in `draw()` add the points:

`list.add(new PVector(x,y)); // or what the position of the ball is named in your Sketch`

and display the points

```auto
for(PVector currentPV : list) {
    point(currentPV.x,currentPV.y); 
}

```

Chrisir

---

<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:** [May 17, 2021, 8:17am UTC](https://discourse.processing.org/t/drawing-line-with-bouncing-ball/30130/7 "2021-05-17T08:17:00Z")

</div>

Hi,

This thread could help: [Smart-ish bouncing ball](https://discourse.processing.org/t/smart-ish-bouncing-ball/28927)

---

<div class="post-metadata">

**Author:** ![SodaPopPop](https://avatars.discourse-cdn.com/v4/letter/s/8baadc/32.png) [@SodaPopPop](https://discourse.processing.org/u/SodaPopPop)\
**Post date:** [May 18, 2021, 3:22am UTC](https://discourse.processing.org/t/drawing-line-with-bouncing-ball/30130/8 "2021-05-18T03:22:54Z")

</div>

Thank you! This helped immensely!

---

<div class="post-metadata">

**Author:** ![SodaPopPop](https://avatars.discourse-cdn.com/v4/letter/s/8baadc/32.png) [@SodaPopPop](https://discourse.processing.org/u/SodaPopPop)\
**Post date:** [May 18, 2021, 3:23am UTC](https://discourse.processing.org/t/drawing-line-with-bouncing-ball/30130/9 "2021-05-18T03:23:32Z")

</div>

Thank you for the link! It does help with deepening my understanding of the language.