Javascript Array Push Replaces Previous Element in The same Array

Question

I am Facing this Problem, my randomPoints array element is getting replaced by push method. Here is the output of my Console

I don't know why this is happening but if I don't use randomPoint.add, it dosen't replaces and work fine.

randomPoint.add retuns the same Vector object as it would return without it.

var hw
var center
var randomPoints = []
var pointWidth = 20
var points = 300
centerCircleWidth = 300;
pointsOffset = 10

function setup(){
    hw = createVector(600,500)
    createCanvas(hw.x,hw.y)
    center = createVector(hw.x/2,hw.y/2)
    var randomPoint = createVector(0,0)
    randomPoints.push(randomPoint)
    randomPoint = p5.Vector.fromAngle(-radians(120), random(centerCircleWidth/2-pointWidth,centerCircleWidth/2-pointsOffset))
    randomPoints.push(randomPoint)
    console.log(randomPoint)
    randomPoint = randomPoint.add(p5.Vector.fromAngle(radians(60), random(pointsOffset,2*pointsOffset)))
    // this here replaces the last element of array by itself and add another element of same type.
    randomPoints.push(randomPoint)
    console.log(randomPoint)
    console.log(randomPoints)

}

function draw(){
    translate(center.x, center.y)
    background(51);
    strokeWeight(0)
    fill(255)
    ellipse(0,0, centerCircleWidth, centerCircleWidth)
    for(i=0;i<randomPoints.length;i++){
        fill(10)
        ellipse(randomPoints[i].x,randomPoints[i].y,pointWidth,pointWidth)
    }
}

I don't know the full code but I'm guessing here is where it gets interesting: var randomPoint = createVector(0,0). Is that supposed to always refer to the same thing or is it supposed to refer to new createVector(0,0) because that looks like a constructor and if that's the case then you want to have a new one everytime or else you will override your old var reference, — Iskandar Reza
– Iskandar Reza, Commented Dec 3, 2018 at 20:29
Nope, because createVector(0,0) returns an object with {x: 0,y: 0}, p5.Vector.fromAngle() and randomPoint.add() does the same — imLolman
– imLolman, Commented Dec 3, 2018 at 20:38
Okay got it, so why are you recycling the var then? Why not let newRandomPt = p5.Vector.fromAngle(); randomPoints.push(newRandomPt); and so on? It's 3 distinct vars, why then make a reference to it with the same var? That's hella confusing.` — Iskandar Reza
– Iskandar Reza, Commented Dec 3, 2018 at 20:42

ViqMontana · Accepted Answer · 2018-12-03 20:32:37Z

6

Your problems looks to be an object reference problem. The third push isn't replacing the previous element in the array, but you are updating the reference which the array is holding, therefore the element in the array is being updated.

If you remove the third push, you will see that the second item in the array will still be updated.

What you need to do is either create a copy of randomPoint and then make a change to it, or create a new variable.

Take a look at this SOF answer which should make it clearer.

answered Dec 3, 2018 at 20:32

ViqMontana

5,7384 gold badges25 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

imLolman Over a year ago

Oh yes, That SOF answer was explained quite well and I've tried copying object and that worked !!.

Collectives™ on Stack Overflow

Javascript Array Push Replaces Previous Element in The same Array

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related