P5.js object not leaving a trail

Question

I have a project in which I'm trying to make a helix effect, where two ellipses rotate around each other, and they leave a trail which keeps going downwards and then disappearing. now the problem is, I cant get the trail to show up. I followed a tutorial by the coding train on making a trail, and while it works for him, it doesn't for me. one thing that I did differently from him is that he was using a classes for his ball, while I'm not.

My trail code's like this. It takes in a array I made called history, which contains a 2d vector containing the x and y positions, and it should be making a copy of the ellipse every frame, but instead it just makes a new ellipse and erases the last one.

function makeTrail(){
    history.push(pos1);
    for (var i = 0; i < history.length; i++){
        let p = history[i];
        ellipse(p.x, p.y, 8, 8);
    }
 }

and here's my draw function if it helps. Most of it's just code for where I want the balls to be drawn. The MoveBall functions just tell the program what to do with the balls.

function draw(){
    pos1.y += -1;
    pos2.y += -1;
    let rs = 30/*random(10, 30)*/;
    fill('#f42069');
    ellipse(pos1.x, pos1.y, rs, rs);
    moveBall();
    fill('#b4da22');
    ellipse(pos2.x, pos2.y, rs, rs);
    moveBall2();
    makeTrail();
}

Answer 1

The problem is that you're pushing pos1 into history , when you should be pushing pos1.copy() . When you push the vector itself, the value in the list changes with the value of pos1 .