P5.js object not leaving a trail

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

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.

Advertisement

Answer