Connecting Points with a Line

Hello all! This is a continuation of my project from here!

It is a bouncing ball that starts in random location with a random gravity acting on it. If you press with a mouse the velocity increases. There’s a chance the background could be black or white. It creates dots as it bounces along. All of that is working and intentional ^-^

However, what I wanted to do is to connect the dots with a line between the previous point and the current points. The code below is my failed attempt to do that (focus on the enhanced for loop near the end)

PVector location;
PVector velocity;
PVector gravity;
ArrayList<PVector> list = new ArrayList();
int col1;
int col2;
int col3;
int ran;
float locRanX;
float locRanY;
float previousX;
float previousY;

void setup() {
  locRanX = (float)(Math.random()*2);
  locRanY = (float)(Math.random()*2);
  location = new PVector(random(width),random(height));
  velocity = new PVector(locRanX, locRanY);
  gravity = new PVector(0,(float)(Math.random()*0.7)+0.2);
  col1 = (int)(Math.random()*254)+1;
  col2 = (int)(Math.random()*254)+1;
  col3 = (int)(Math.random()*254)+1;
  ran = (int)(Math.random()*2);
  previousX = locRanX;
  previousY = locRanY;

void draw() {
  if (ran==1){
  else {
  list.add(new PVector(location.x,location.y)); 
  if ((location.x < 0)) {
  velocity.x = velocity.x * -1;
  col1 = (int)(Math.random()*254)+1;
  col2 = (int)(Math.random()*254)+1;
  col3 = (int)(Math.random()*254)+1;
  if((location.x> width)){
  velocity.x = velocity.x * -1;
  col1 = (int)(Math.random()*254)+1;
  col2 = (int)(Math.random()*254)+1;
  col3 = (int)(Math.random()*254)+1;
  gravity = new PVector(0,(float)(Math.random()*0.6)+0.2);}
  if (location.y > height) {
    velocity.y = velocity.y * -0.88;
    location.y = height;

  if (location.y < 0) {
    velocity.y = velocity.y * -0.6;
    location.y = 0;

  if (mousePressed){
    velocity.y = velocity.y * 1.05;

  if (ran!=1){
    stroke (0);
  ellipse(location.x,location.y, 48, 48);
  for(PVector currentPV : list) {
    stroke(col1, col2, col3);
    line (currentPV.x, currentPV.y, previousX, previousY);
    previousX = currentPV.x;
    previousY = currentPV.x;


I think I’m using the line function wrong. If you remove the line function, you can see the dots created. May someone please guide me to see my error(s)?

Typo here

Please correct


Thanks for sharing your code!

I have been toying around a bit with it and there’s come a question to my mind:
So there are kind of “two” different lines, a first that connects the starting values of x and y to the current values of x and y of the ellipse, and a second that shows the whole process.

How would one write this in order to not show this first line?

Whoops thanks for spotting that! It helped immensely!

1 Like

That’s kinda what I’m messing around with right now. I actually have no idea, because I can’t find the part in the code that shows the creation of that first line. I’m thinking it have something to do with the fact that the current point is added into the arraylist as well, then it gets drawn. However, switching the order arounds accomplishes absolutely nothing.

alternatively use this

for(int i=0;i<list.size();i++) {
    PVector p1 = list.get(i);
    PVector p2 = null;
    if(i<list.size()-1)p2 = list.get(i+1);
    stroke(col1, col2, col3);
    line (p1.x, p1.y, p2.x, p2.y);

to go along with enhanced for loop

for(PVector currentPV : list) {
    stroke(col1, col2, col3);
    if(list.indexOf(currentPV)>0)line (currentPV.x, currentPV.y, previousX, previousY);
    previousX = currentPV.x;
    previousY = currentPV.y;

and to keep the sketch from eating memory